CSS选择器常见用法

CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.

通过以下代码来学习CSS选择器的使用.

    <div class="font32">我是⼀个div, class为font32</div>
    <div class="font32">我是⼀个div, class为font32</div>
    <div><a href="#">我是⼀个div</a></div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>
    <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ol>
    <button id="submit">提交</button>

标签选择器

用法: 标签+{属性}.例如:

    <style>
        div{
            color: red;
        }
    </style>

类选择器

用法: .类名+{属性}.例如:

    <style>
        .font32{
            color: blue;
        }
    </style>

⼀个类可以被多个标签使⽤,⼀个标签也能使⽤多个类(多个类名要使⽤空格分割,这种做法可以让代码更好复用)

ID选择器

用法: #id+{属性},例如:

    <style>
        #submit{
            color: green;
        }
    </style>

id是唯⼀的,不能被多个标签使用.

通配符选择器

用法:*+{属性},可以选择整个页面进行编辑.例如:

    <style>
        * {
            color: purple;
        }
    </style>

复合选择器

用法:标签 标签+{属性},后续标签要是前置标签的后代,例如:

    <style>
        ol li{
            color: red;
        }
    </style>

只有ol下的li被改为红色,而ui下的li没有被修改.