CSS常用选择器

整理常见的选择器

单一的选择器

类选择器

最常用的选择器

CSS: .classname{}

HTML: <element class="classname"></element>

id选择器

较常用的选择器，注意一个元素的id应当是唯一的

CSS: #id{}

HTML: <element id="id"></element>

元素选择器

选择一类元素

CSS: el{}

HTML: <el></el>

属性选择器

根据属性选择元素，支持部分包含（使用~=或|=，字段用空格或"-"分隔）和匹配所有值（只保留属性名，不限制属性内容）

CSS: prototype="pro"

HTML: <el prototype="pro"></el>

组合的选择器

组合的选择器仍然可以组合，符合逻辑就行。

派生选择器

如下后代选择器选择了a元素中的所有b元素。

CSS: a b{}

HTML: <a><b></b></a>

多类选择器

.class1.class2{}选择了class属性同时包含class1与class2的元素

结合元素的类选择器

如p.classname{}将选择class="classname"的p元素

结合元素的属性选择器

如ahref选择了所有具有href属性的a元素

选择器中的符号

,

a,b{}样式同时作用于a和b

*

通配符选择器，允许选择所有元素

>

子元素选择器，a>b将选择a的所有直接子元素中的b元素。也就是说b元素与a元素之间不能有一层其他元素（如<a><span><b></b></span></a>是不行的）。

+

相邻兄弟选择器，a+b将选择与a具有同一父元素的相邻的b元素（如<p><a></a><b></b></p>中的b元素会被选中，但a不会被选中）。只能选择相邻的（下一个）元素，如果不相邻无法选择。

作用于选择器的伪类与伪元素

Pseudo elements伪元素与Pseudo classes伪类

​