什么是 CSS？ CSS（层叠样式表）用于给文档添加样式，是描述 HTML 或 XML 文档样式的语言。 CSS 选择器规定了某些 CSS 规则会应用在哪些元素上。
基本选择器
- 通用选择器 :
*选择所有的元素。（可选）也可以将其限制为特定的名称空间或所有名称空间ns|**|*。 - 元素选择器 :
elementname选择元素名为 elementname 的元素。 - 类选择器 ：
.classname选择任何class属性中含有 classname 的元素。 - ID 选择器 ：
#idname选择id属性为 idname 的元素。一个文档中，每个 ID 属性都应当是唯一的。 - 属性选择器 ： 选择任何属性符合条件的元素。
[attr]选择带有 attr 属性的所有元素；[attr=value]选择带有 attr 属性，并且 attr=“value”的所有元素[attr~=value]选择带有 attr 属性，并且 attr 的属性值中包含 value 的所有元素；[attr|=value]选择带有 attr 属性，并且 attr 的属性值以“value”开头的所有元素；[attr^=value]选择带有 attr 属性，并且 attr 的属性值以 value 开头的每个元素；（这里的匹配是正则匹配，所以选择器里面的 value 应该是 string）[attr$=value]选择带有 attr 属性，并且 attr 的属性值以 value 结尾的每个元素；（这里的匹配是正则匹配，所以选择器里面的 value 应该是 string）[attr*=value]选择带有 attr 属性，并且 attr 的属性值中包含 value 子串的每个元素；（这里的匹配是正则匹配，所以选择器里面的 value 应该是 string）
如果多个通用选择器紧挨在一起，表示选择同时满足所有选择器要求的元素。
分组选择器
- 选择器列表 ：选择所有能被列表中的任意一个选择器选中的节点。列表间的元素用
,号分开。
例：div, span 会同时匹配 <span> 元素和 <div> 元素。
组合器
- 后代组合器 ：
- 例如，
div span匹配所有位于任意<div>元素之内的<span>元素。
- 例如，
- 直接子代组合器 ：
>组合器选择前一个元素的直接子代的节点。- 例如：
ul > li匹配直接嵌套在<ul>元素内的所有<li>元素。
- 例如：
- 一般兄弟组合器 ：
~组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。- 例如：
p ~ span匹配同一父元素下，<p>元素后的所有<span>元素。
- 例如：
- 紧邻兄弟组合器 ：
+组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
伪选择器
- 伪类 ：
:伪选择器支持按照未被包含在文档树中的状态信息来选择元素。实际上还是选择元素。类似于普通的类，可以在一个选择器中同时一起写多个伪类。:active: 匹配被用户激活的元素。这个样式可能会被后声明的其他链接相关的伪类覆盖，为保证样式生效，需要把:active的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序 ::link—>:visited—>:hover—>:active。在有多键鼠标的系统中，CSS 3 规定:active伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。:checked:任何处于选中状态的 radio (<input type="radio">),checkbox (<input type="checkbox">) 或("select") 元素中的 option HTML 元素("option")。:default:一组相关元素中的默认表单元素。:disabled:任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。:empty:没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。:enabled:表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的。:first-child: 表示在一组兄弟元素中的第一个元素。:first: 打印文档的时候，第一页的样式。:first-of-type:表示一组兄弟元素中其类型的第一个元素。:focus:表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。:focus-within:表示一个元素获得焦点，或，该元素的后代元素获得焦点。:host:选择包含其内部使用的 CSS 的 shadow DOM 的根元素:host():选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。:hover:使用指示设备虚指一个元素（没有激活它）的情况。:indetermainate:表示状态不确定的表单元素:in-range:代表一个<input>元素，其当前值处于属性min和max限定的范围之内.:invaild:表示任意内容未通过验证的<input>或其他<form>元素:lang():基于元素语言来匹配页面元素。:lang(en)``:lang(fr):last-child:代表父元素的最后一个子元素。:last-of-type:表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。:left:对打印文档的左侧页设置 CSS 样式."从左到右"的书写方向中第一页应当使用:right配置; "从右至左"的书写方向中第一页应当使用:left配置.:link:选中元素当中的链接。:not():用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类 （negation pseudo-class ）。:nth-child:首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。tr:nth-child(2n+1)表示 HTML 表格中的奇数行:nth-last-child:从兄弟节点中从后往前匹配处于某些位置的元素:nth-last-of-type:only-child:匹配没有任何兄弟元素的元素.等效的选择器还可以写成:first-child:last-child或者:nth-child(1):nth-last-child(1):only-of-type:optional:表示任意没有required属性的<input>，<select>或<textarea>元素使用它。:out-of-range:read-only:表示元素不可被用户编辑的状态（如锁定的文本输入框）。:read-write:代表一个元素（例如可输入文本的 input 元素）可以被用户编辑。:required:right:root:匹配文档树的根元素。对于 HTML 来说，:root表示<html>元素，:scope:表示作为选择器要匹配的参考点的元素。在样式表中使用时,:scope等效于:root，:target:代表一个唯一的页面元素(目标元素)，其id与当前 URL 片段匹配 .:vaild:visited
- 伪元素 ：
::伪选择器用于表示无法用 HTML 语义表达的实体。会在选择的元素的某个位置插入实体。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。::before:::after:用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。::cue:匹配所选元素中的 WebVTT 提示。::first-letter选中块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） 。::first-line：选中块级元素第一行。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。::selection：CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。::slotted()：用于选定那些被放在 HTML 模板 中的元素
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于