Ricardo

# 选择器

选择器承担的是，从html文档中选择一个或多个标签来应用css的规则。

# 基本选择器

# 通用选择器

选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。

语法:*

示例

*{
  color: red;
}

# 元素选择器

按照给定的节点名称，选择所有匹配的元素。

语法: element

示例:

p{
  color:red
}

匹配所有p元素标签

# 类选择器

按照给定的 class 属性的值，选择所有匹配的元素。

语法: .className

示例:

.index{
  color:red;
}

<p class='index'></p>

匹配 class='index'的标签元素(此处是p)

# ID选择器

按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。

语法: #idName

示例:

#id{
  color:red;
}

<p id="id"></p>

# 属性选择器

按照给定的属性，选择所有匹配的元素。

语法: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

示例:

[disabled]{
  color: color;
}

<button disabled>按钮</button>

# 高级选择器

# 分组选择器

, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点, 即选择器的规则合并写法。

语法: A,B

示例:

p,.class{
  color:red;
}

<p>color</p>
<button class='class'></button>

# 后代组合器

（空格）组合器选择前一个元素的后代节点

语法: A B

示例:

div span{
  color:red;
}

匹配 所有位于 任意 div元素之内的 span元素

# 直接子代组合器

> 组合器选择前一个元素的直接子代的节点。

语法: A>B

示例:

ul > li{
  color:red;
}

匹配 直接 嵌套在 ul 元素内的所有 li 元素

# 一般兄弟组合器

~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

语法: A ~ B

示例:

p ~ span{
  color:red;
}

匹配 p 元素后 所有 span 元素

# 紧邻兄弟组合器

+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

语法: A + B

示例:

h2 + p{
   color: red;
}

匹配所有紧邻在 h2 元素后的 p 元素。

# 列组合器

|| 组合器选择属于某个表格行的节点。

语法: A || B

示例:

col || td{
  color: red;
}

匹配所有 col 作用域内的 td 元素。

# 伪选择器（Pseudo）

# 伪类

: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。

详情 (opens new window)

# 伪元素

:: 伪选择器用于表示无法用 HTML 语义表达的实体。

详情 (opens new window)

# 优先级

当多个选择器同时应用到(匹配到)某一个元素上, 选择器的优先级将决定哪些规则被应用，哪些规则被覆盖。

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

选择器 权重
style='' 内联选择器 1000
id选择器 0100
类选择器, 属性选择器,伪类 0010
类型选择器, 伪元素 0001

!important 例外规则

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。

通配选择符（*）关系选择符（+, >, ~, ' ', ||）和 否定伪类 （:not()）对优先级没有影响。

# 参考资料

← 盒模型 →