简单选择器

简单选择器有三种类型，它们的使用是通过绑定HTML元素的元素标签名，类名，ID名。

// 标签选择器 - Tag name Selectors
p {
    color: gray;
    background: white;
}
// 类选择器 - Class name Selectors
.myclass {
    color: gray;
    background: white;
}
// ID选择器 - ID Selectors
#myid {
    color: gray;
    background: white;
}
// 通配选择器 - Universal Selectors
* {
    color: gray;
    background: white;
}

如上面代码所示，这里的标签，类，ID 使用起来是要依赖HTML从而修改其样式。是不是很容易理解呢？

相邻选择器

相邻选择器它们有四种类型

后代选择器-descendant selector ( )
子选择器-children selector (>)
相邻兄弟选择器-adjacent sibling selector (+)
通配兄弟选择器-general sibling selector (~)

// 后代选择器-descendant seletor
div p {
    color: gray;
} // 这行代码会影响 div范围下所有的 p元素的样式

// 子选择器-children selector
div > p {
    color: gray;
} // 这行代码会影响 div范围下第一个（最近or紧跟）p元素的样式，如果有两个 p元素，第二个 p元素不受影响

// 相邻兄弟选择器-adjacent sibling selector
div + p {
    color: gray;
} // 这行代码会影响到 div元素和 p元素同级（同一个父级）之下，p元素的样式会受影响，如果多个同级的 p元素，第二个p元素是不会受影响的

// 通配选择器
div~p {
    color: gray;
} // 这行代码会影响 在 div元素和 p元素同级之下， 所有p元素的样式会受影响，div是不受影响的
//

⚠️：如上面的代码例子，虽然只使用了标签名，但是你也可以使用相应的类名，ID名，也可以达到同样的效果。

伪类选择器

伪类选择器的使用是当HTML的元素在特定的状态，而用选择器去定义它们。举个例子：比如当鼠标在经过HTML的 a元素-hover，再比如当鼠标点击HTML的 button元素-focus，可能表述的不是很具体，那就结合一下代码来深入了解一下.

// 伪类选自器的语法 (:)

a:active {
    color: gray;
} // 在点击 a元素触发 link的时候会影响

input:checked {
    color: gray;
} // 在 input元素被选中的时候会影响（单选框-radio，复选框-checkbox）

input:enabled {
    color: gray;
} // 在每个 input已启用都是受影响，很适用于表单input样式

p:empty {
   color: gray;
} // 没有子元素的p元素会受影响

p:first-child {
    color: gray;
} // 仅仅作用于 p元素父级范围下的第一个子元素
p:last-child {
    color: gray;
} // 顾名思义，仅作用 p元素父级范围下的最后一个子元素

p:only-child {
    color: gary;
} // 在p元素的父级所有子元素中，只有一个子元素，其子元素才会受影响
// 这个选择器等效于 :first-child(1):last-child(1)或者first-child:last-child

p:nth-of-child（2） {
    color: gray;
} // 在p元素的父级的所有子元素中，第二个子元素会受影响

p:nth-last-child(3) {
    color: gray;
} // 在p元素的父级的所有子元素中，最后一个元素开始计数，第三个子元素受影响

p:last-of-type {
    color: gray;
} // 在p元素的父级下，最后出现的p元素会受影响

p:only-of-type {
    color: gray;
} // 在p元素的父级下，仅仅p元素会受影响 

p:nth-of-type(3) {
    color: gray;
} // 在p元素的父级下，出现第三个p元素会受影响

p:nth-last-of-type(2) {
    color: gray;
} // 在p元素的父级下，所有出现的p元素中，倒数第二个p会受影响

input:focus {
    color: gray;
} // input 在 被聚焦和被点击都会影响

input:hover {
    color: gray;
} // 鼠标箭头在经过时会受影响

a:link {
    color: gray;
} // 所有的a标签没有访问链接的时候会受影响

a:visited {
    color: gray;
} // 上一个反之

input:optional {
    color: gray;
} // input元素没有 required属性的时候会被影响（表单）

input:read-only {
    color: gray;
} // input元素在有 read-only属性才会受影响（表单）

input:required {
    color: gray;
} // input元素有 required属性的时候才会受影响（表单）

⚠️：如上面的代码例子，虽然只使用了标签名，但是你也可以使用相应的类名，ID名，也可以达到同样的效果。

伪元素选择器

伪元素的使用是去绑定到HTML的元素特殊的区域里，（不知道这么解释是否正确）举个例子，像是将一段内容插入到一个元素的前面或后面。

// 伪元素选选择器语法 {::}


p::after {
    color: gray;
} // 将一段内容插入到p元素的后面去

p::before {
    color: gray;
} // 讲一段内容插入到p元素的前面去

p::first-letter {
    color: gray;
} // p的第一个字母受影响

p::last-letter {
    color: gray;
} // p的最后一个字母受影响

p:first-line {
    color: gray;
} // p 的第一行会受影响

p::selection {
    color: gray;
} // ::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）
// 使用selection伪元素时，background-iamge会如果其他属性一样被忽略

结语：希望你希望这个博客，如果你有什么建议和见教请留下你珍贵的评论。Happy Coding！Good Day！;;;;

我们前端必须知道地CSS所有的选择器

简单选择器

相邻选择器

伪类选择器

伪元素选择器