属性选择器详解-优快云博客

属性选择器

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

重学前端-css选择器