css选择器

基本选择器

• 通用选择器: * 选择所有元素。
• 元素选择器: elementname 选择特定元素名的元素。
• 类选择器: .classname 选择class属性值为指定值的元素。
• ID选择器: #idname 选择ID属性值为指定值的元素。

属性选择器

• 属性存在选择器: [attr] 选择所有具有指定属性的元素。
• 属性值选择器: [attr=value] 选择所有具有指定属性且属性值为完全匹配的元素。
• 属性包含选择器: [attr~=value] 选择所有具有指定属性且属性值包含指定文本的元素。
• 属性开始选择器: [attr^=value] 选择所有具有指定属性且属性值以指定文本开头的元素。
• 属性结束选择器: [attr$=value] 选择所有具有指定属性且属性值以指定文本结尾的元素。
• 属性匹配选择器: [attr*=value] 选择所有具有指定属性且属性值包含指定文本的元素。

分组选择器

• 选择器列表: A, B 选择所有能被列表中的任意一个选择器选中的节点。

组合器

• 后代组合器: A B 选择前一个元素的后代节点。
• 直接子代组合器: A > B 选择前一个元素的直接子代节点。
• 兄弟组合器: A ~ B 选择后一个元素的前面所有同辈元素。
• 紧邻兄弟组合器: A + B 选择后一个元素紧邻的前一个同辈元素。

伪选择器

• 伪类: :pseudo-class 选择器基于某些条件选择元素，如:hover、:active等。
• 伪元素: ::pseudo-element 选择器用于代表无法用HTML语义表达的实体，如:first-line、:last-child等。

 css样式的复用

在CSS中，您可以使用变量来存储值，并在整个文档中重复使用这些值。这有助于减少样式的重复定义，使CSS文件更加易于维护和理解。CSS变量可以通过:root伪类或者任何其他选择器来声明，并通过var()函数来访问。

例如，如果您想在多个地方使用相同的颜色值，可以在:root伪类中声明这个颜色值，然后在需要的地方使用var()函数来引用它。这样做可以避免在每个地方都重复写相同的颜色值，从而简化CSS代码。

下面是一个简单的示例：

​
:root {
  --main-color: #000;
}

.box1 {
  background-color: var(--main-color);
}

.box2 {
  color: var(--main-color);
}

​

在这个例子中，--main-color是一个CSS变量，它在:root伪类中被赋值为#000。然后，在.box1和.box2选择器中，通过var()函数引用了这个变量，这样就不需要在每个地方都重复写#000了。