CSS 选择器 【一文全懂CSS 选择器】

关于CSS 选择器，大家日常听到最多的就是类选择器，id选择器，其实CSS 有着非常丰富的选择器供大家使用，本文将从简单开始并举例讲解CSS的各种选择器。

选择器的分类为：

• 简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。
• 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
• 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM 树中一父节点的第一个子节点。
• 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
• 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs 的直系子节点的段落，或者直接跟在 headings 后面的段落。
• 多用选择器（Multipleselectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个 CSS 规则下面，以将一组声明应用于由这些选择器选择的所有元素。

简单选择器

简单选择器指的是日常最常用的 标签选择器，id选择器， 类选择器。
如； a, div 都是标签选择器。 #name, #head 这些都是id 选择器。 .pressure, .env 这些都是类元素选择器。

注意：一个ID名称必须在文件中是唯一的。关于重复ID的行为是不可预测的，比如在一些浏览器只是第一个实例计算，其余的将被忽略。

组合选择器

组合选择器允许你按照一定的关系组合各种选择器，选中你所需求的元素。
先看例子：

<div class='test'>
    <p> 我是没有类元素的标签</p>
    <p class="text">我是text类元素的标签</p>
    <p class="text">我是text类元素的标签</p>
</div>
<p> 我和test类的div直接相邻</p>
<div title="showTitle">
    <a class="link">我是有link类的标签a</a>
    <a class="link">我是有link类的标签a</a>
</div>

• div p
  选中的是所有div标签下的p标签，包括div标签下的嵌套子标签。

• div > p
  选中的是所有div标签下的直接子标签，不包含嵌套标签。

• div + p
  选中的是div的直接相邻的兄弟标签，也就是div需要和p是同级标签。

• div ~ p
  选中的是 div 的兄弟标签，不需要直接相邻，

属性选择器

属性选择器顾名思义是对html标签的属性来说的，当然它又有所扩展可以支持“伪正则”的匹配模式。

1、只指定属性名

*形式：E[attr][attr]...:*/
.nav a[id]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中，具有id属性的a元素*/
}

.nav a[id][title]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中，具有id属性和title属性的a元素*/
}

2、指定属性名，并指定属性值

/*形式：E[attr="value"]...:*/
.nav a[id="one"]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中，id属性值为one的a元素*/
}

.nav a[class="nav first"][title]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中，具有title属性，并且class属性值为nav first的a元素*/
}

在=的写法下， 注意：属性值必须完全匹配

3、指定属性名，并具有该属性值

/*形式：E[attr~="value"]...:*/
.nav a[class="nav first"][title]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中，具有title属性，并且class属性值为nav或first或nav first的a元素*/
}

4、指定属性名，并属性值是以value开头的

/*形式：E[attr^="value"]...:*/
.nav a[title^="https://"]{
    font-size:12px;     /*选择class为nav的元素的所有子元素中，具有title属性，并且title属性值以https://开头的a元素*/
}

5、指定属性名，并属性值是以value结尾的

/*形式：E[attr$="value"]...:*/
.nav a[title$=".com"]{
    font-size:12px;     /*选择class为nav的元素的所有子元素中，具有title属性，并且title属性值以.com结尾的a元素*/
}

6、指定属性名，并且属性值中包含了value

/*形式：E[attr*="value"]...:*/
.nav a[title*="mine"]{
    font-size:12px;     /*选择class为nav的元素的所有子元素中，具有title属性，并且title属性值包含了mine的a元素*/
}

7、指定属性名，并且属性值是value或者以value-开头的值

/*形式：E[attr|="value"]...:*/
.nav img[src|="img"]{
    width:200px;     /*选择class为nav的元素的所有子元素中，具有src属性，并且src属性值为img或以img-开头的a元素*/
}

伪类和伪元素

伪类就是某个元素的一种虚拟状态，或者说一种特有的性质，这种状态或性可以通过CSS捕捉到。常见的伪类有：:link、:visited、:hover、:active、:first-child和:nth-child。

伪元素是一种虚拟的元素，CSS把它当成普通HTML元素看待。之所以叫伪元素，就因为它们在文档树或DOM中并不实际存在。换句话说，我们不会在HTML中包含伪元素，只会通过CSS来创建伪元素。

会继续更新的，欢迎点赞和收藏支持！
未完待续-----------------------