属性选择器
1.根据某个属性进行选择 p[class]即表示为有class属性的p(即使class="")
img[alt]、*[title]、a[href][title]等
2.根据具体属性值进行选择
p[moon='1']、p[moon='1'][title='123']
注意:这种匹配方式应该是完全匹配
<p class="test1">1</p>
<p>2</p>
<p class="test1 test2">3</p>
<p class="test2 test1">4</p>
/*匹配1*/
p[class='test1']{
font-weight: bold;
}
/*匹配3*/
p[class='test1 test2']{
font-size: 18px;
}
/*匹配134*/
.test1{
color: #a6a495;
}
复制代码如果要进行部分匹配,应该是
/*匹配134*/
p[class~='test1']{
font-weight: bold;
}
复制代码既然当我们用.class进行匹配的时候,本身就是部分匹配,那么[class~='']形式有什么意义呢?
因为~=这种属性选择器能用于任何属性,而不止是class,例如当title=how to figure out时,可以被p[title~='figure']匹配到,从而匹配一系列的title中有figure的p元素(一定要用空格隔开)
*= 与 ~= 类似 区别就在于不用空格隔开
<p title="fffigureeee">6</p>
/*匹配6*/
p[title*='figure']{
background-color: red;
}
复制代码- 特定属性选择类型
*[lang|='en']匹配所有lang属性为en或en-开头的所有值
结构选择器
ul li : ul后代中的所有li
ul>li : ul子元素中的li
h1+p : h1后面第一个元素是p的话,p被选中
伪类和伪元素
链接的伪类 a:link a:visited a:hover a:active
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。
对应还有:first-letter/:first-line