普通规则 -- 选取器
在 css 中，首要要选取一个（或多个）文档中的元素，而后才可对其应用咱们定义的样式；而选取文档中元素的规则，便是选取器。
归类基本选取器通配选取器ID选取器类选取器元素选取器属性选取器组合选取器后代选取器子选取器兄弟选取器相邻兄弟选取器通常兄弟选取器伪类伪元素选取器列表基本选取器
基本选取器指的是选中某类元素只必须一个选取器的一类选取器。
通配选取器
通配选取器便是一个星号( * )，用于匹配 html 文档内的所有元素。在搭配其他选取器运用时，会被完全忽略掉。
ID选取器
ID 选取器会按照元素的 ID 属性中的内容匹配元素，元素 ID 属性值必要与选取器中的 ID 属性名完全匹配，此条样式声明才会生效。
语法如下：
#id { 声明 }
类选取器
类选取器会按照元素的 class 属性中的内容匹配元素，元素 class 属性值列表中的最少一条必要与选取器中的 class 属性名完全匹配，此条样式声明才会生效。
语法如下：
.类名 { 声明 }
元素选取器
一般说的元素选取器通常指的是普通的元素选取器，它会按照元素的节点名叫作（即标签名）匹配元素；
语法如下：
节点名叫作 { 声明 }
属性选取器
属性选取器会按照元素的属性名或与声明要求匹配的属性值匹配元素。
语法如下：
简单选取器[属性要求] { 声明 } 简单选取器暗示能够匹配到元素的选取器属性要求能够是属性名 [attr] : 暗示匹配属性名为 attr 的元素符合要求的属性值[attr = value] : 暗示匹配属性名为 attr 且属性值为 value 的元素[attr ~= value] : 暗示匹配属性名为 attr 且属性值若为空格分割的列表，则最少一个值是 value 的元素，若为单个的值，则必须完全匹配；[attr |= value] : 暗示匹配属性名为 attr 且值为 value 或 value- 开头的元素，应用场景是匹配语言简叫作如：zh-CN等。重视：这儿的value必定要是个完整的属性值或全匹配短横前的属性值，否则会匹配失败。如：[class |= class1] 没法匹配 class="class123"；能够匹配到class="class1" 或 class="class1-23"[attr ^= value] : 暗示匹配属性名为 arrt 且值为 value 开头的元素。与 [attr |= value] 有区别[attr $= value] : 暗示匹配属性名为 arrt 且值为 value 结尾的元素。[attr *= value] : 暗示匹配属性名为 arrt 且值包括 value 的元素。[attr <操作符> value i] : 暗示匹配属性名为 attr 且 value 符合（以上所有）操作符的属性值且忽略体积写的元素。如：[id = id1 i] 能够匹配 id="id1" 或 id=Id1等。组合选取器
组合选取器指的是连接多个选取器，选中特殊的元素的选取器
后代选取器
后代选取器是用一个空格连接两个元素（这儿的元素指匹配到的元素），暗示匹配把第1个元素做为祖先元素的所有的第二个元素
语法如下：
元素1 元素2 { 声明 }
/* 匹配 div 下的 所有 p */
div p {
...
}
子选取器
子选取器是用一个 > 连接两个元素（同上），暗示匹配做为第1个元素的直接后代（子元素）的第二元素。它与后代选取器相比，区别点在于：子选取器只会匹配到下一级的元素，而后代选取器是匹配到所有的后代元素，不管dom的层级有多深
语法如下：
元素1>元素2 { 声明 }
兄弟选取器
兄弟选取器指的是匹配在同一个父元素下的同级元素的选取器。分为通常兄弟选取器和相邻兄弟选取器
通常兄弟选取器
通常兄弟选取器是用一个~连接两个元素，暗示匹配在第1个元素之后的所有的同一层级的第二个元素。重视：只会匹配第1个元素之后的元素。
语法如下：
元素1~元素2 { 声明 }
相邻兄弟选取器
相邻兄弟选取
| 
发表于 2024-6-30 07:03:14
