1.选择器
1.核心选择器
-
标签选择器
h2 { } div {规则 }
-
id选择器
#two {} <div id="one"></div> <div id="two"></div>
-
类选择器
.second{} <div class="second"></div> <div class="second"></div>
-
逗号选择器
h1,h2,h3 {}
-
组合选择器
div#two {} 选择id为div的元素 div,#two {} 选择div元素和id为two的元素
-
普遍选择器
*{}
2. 层次选择器
-
子元素选择器
.header > a 选中class为header的元素的直接孩子元素a标签 <div class="header"> <a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div class="content"> <a href=""></a> <a href=""></a> </div>
-
后代元素选择器
.header a 选中class为header的元素的后代元素a标签
-
下一个兄弟
语法: ul>li.two + li或.two + *(用“+”加号连接)<ul> <li>zero</li> <li>one</li> <li class="two">two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
-
之后所有兄弟
语法:ul>li.two ~ li或.two ~ *(用“~”波浪线连接)
3. 属性选择器【过滤器】
在已有选择器的基础上进行筛选
selector[]
input[type]
对包含type属性的元素进行样式的添加input[type=text]
对type属性值为text的元素进行样式的添加input[type^=s]
选择type属性值以"s"开头的所有元素input[type$=t]
选择type属性值以"t"开头的所有元素input[type*=t]
选择type属性值以包含子串"t"的所有元素
4. 伪类选择器
表示结构的
:first-child:第一个子元素
:last-child:最后一个子元素
:only-child: 匹配属于父元素中唯一子元素的 p 元素
:nth-child(n): 同级别中第一个子元素
:nth-child(odd): 同级别中所有的奇数标签
:nth-child(even): 同级别中所有的偶数标签
:first-of-type:同级别中同类型的第一个标签
:last-of-type:同级别中同类型的最后一个标签
:nth-of-type(n)