css选择器 助记（一）

css选择器 助记（一）

标签选择器

p{
    color:red;
}

页面上的p标签都会变成红色，经常描述共性

id选择器

#div1{
    color:red;
}

<!--html代码-->
<p id="div1"></p>

1. 命名必须以字母开头，可包含字母，数字，下划线
2. 命名不能与html标签重名
3. id命名只能唯一，一个html页面不能出现相同id

类选择器

  .div1{
    color:red;
}
<!--html代码-->
<p class="div1"></p>
<p class="div1"></p>

1. class属性可以重复使用
2. 同一个标签，可以同时属于多个类，用空格隔开

    .div1{
        color：red;
    }
    .div2{
        font:10px;
    }
    <!--html代码-->
    <p class="div1 div2"></p>

3. 用class控制css，用id控制javascript

后代选择器

div a{
    color:red;
}
<!--html代码-->
<div>
    <p>
        <a></a>
    </p>
</div>

a标签变成红色，总体与局部

交集选择器

p.div1{
    color:red;
}
<!--html代码-->
<p class="div1">变红色</p>
<p></p>

1. 必须同时是p标签和.div1才会变红色
2. 以html标签名开头如：div.nav,a.emt

分组选择器

p,li{
    color:red;
}
<!--html代码-->
<p></p>
<ul>
    <li></li>
</ul>

p,li标签内都是红色

通配符*

*{color:red;}

1. 所有元素都适用
2. 效率不高，慎用

儿子选择器

div>p{
    color:red;
}
<!--html代码-->
<div>
    <p>aa</p>
    <div><h2><p>dd</p></h2></div>
</div>

aa变色，dd不变色，靠近自己的才是儿子

序选择器

ul li:first-child{
    color:red;
}
<!--html代码-->
<ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>

第一个a变色

下一个兄弟选择器

p+a{
    color:red;
}
<!--html代码-->
<p></p>
<a></a>
<a></a>
<a></a>
<p></p>
<a></a>
<a></a>
<a></a>

每一个p标签后的第一个a标签变成红色