属性选择器
1.根据某个属性进行选择 p[class]即表示为有class属性的p(即使class="")
img[alt]、*[title]、a[href][title]等2.根据具体属性值进行选择
p[moon='1']、p[moon='1'][title='123'] 注意:这种匹配方式应该是完全匹配1
2
3
4
/*匹配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元素(一定要用空格隔开) *= 与 ~= 类似 区别就在于不用空格隔开6
/*匹配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