选择器

Tue, 08 Oct 2024 00:00:00 +0800

CSS选取器分类

*{
 margin:0;
 padding:0;
}

p{
 color:red;
}

.warning{
 color:red;
}

#warning{
 color:red;
}

优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

示例html

<ul>
 <li foo>1</li>
 <li foo="abc">2</li>
 <li foo="abc efj">3</li>
 <li foo="abcefj">4</li>
 <li foo="efjabc">5</li>
 <li foo="ab">6</li>
</ul>

[attribute]

[foo]{
 background-color:red;
}

选择所有带 foo 属性的元素

选择 attribute=value 的所有元素。

[foo=abc]{
 background-color:red;
}

选择 attribute 属性包含单词 value 的所有元素。

[foo~=abc]{
 background-color:red;
}

选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始