CSS 面试要点：选择器

# 基本选择器

# 通用选择器

选择所有元素

语法：*

代码语言：javascript复制

* {
  font-size: 12px;
}

# 元素选择器

按节点名选择所有匹配的元素

语法：element

代码语言：javascript复制

p {
  font-size: 12px;
}

# 类选择器

按 class 属性值选择所有匹配的元素

语法：.classname

代码语言：javascript复制

.btn {
  font-size: 12px;
}

# ID 选择器

按 id 属性值选择一个匹配的元素，注意，文档中每个 ID 属性应该是唯一的

语法：#id

代码语言：javascript复制

#btn-1 {
  font-size: 12px;
}

# 属性选择器

按指定的数学，选择所有匹配的元素

语法：

[attribute]，选择有 attribute 属性的元素
[attribute=value]，选择有 attribute 属性值为 value 的元素
[attribute~=value]，选择有 attribute 属性，且属性值以空格间隔开，且其中至少有值为 value 的元素
[attribute|=value]，选择有 attribute 属性，且属性值以 value 或 value- 开头的元素
[attribute^=value]，选择有 attribute 属性，且属性值以 value 开头的元素
[attribute$=value]，选择有 attribute 属性，且属性值以 value 结尾的元素
[attribute*=value]，选择有 attribute 属性，且属性值包含 value 的元素

代码语言：javascript复制

[href] {
  font-size: 12px;
}

[href="https://www.cellinlab.com"] {
  font-size: 12px;
}

# 分组选择器

# 选择器列表

选择所有能被任意一个选择器选中的元素，其中选择器通过 , 分隔

语法：selector1, selector2, selector3

代码语言：javascript复制

p, div {
  font-size: 12px;
}

# 组合器

# 后代组合器

(空格)，选择前选择器的后代元素

语法：selector1 selector2

代码语言：javascript复制

/* 选择所有位于任意 p 后代的 a 元素 */
p a {
  font-size: 12px;
}

# 直接子代组合器

> (大于号)，选择前选择器的直接子代元素

语法：selector1 > selector2

代码语言：javascript复制

/* 选择所有位于任意 p 的直接子代 a 元素 */
p > a {
  font-size: 12px;
}

# 一般兄弟组合器

~ 选择兄弟元素，只要有共同父节点就行

语法：selector1 ~ selector2

代码语言：javascript复制

/* 匹配同一父元素下，p 元素后的所有 span 元素 */
p ~ a {
  font-size: 12px;
}

# 相邻兄弟组合器

选择相邻的兄弟元素，要有共同父节点，且紧跟在前一个元素之后

语法：selector1 selector2

代码语言：javascript复制

/* 匹配同一父元素下，p 元素后紧跟的 a 元素 */
p   a {
  font-size: 12px;
}

# 列组合器

|| 选择属于某个表格行的节点

语法：column-selector || cell-selector

代码语言：javascript复制

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

# 伪选择器

# 伪类

按照未被包含在文档树中的状态信息来选择元素

语法：selector1 :pseudo-class

代码语言：javascript复制

a:visited {
  color: #999;
}

标准伪类索引 (opens new window)

# 伪元素

用于表示无法用 HTML 语义表达的实体

语法：selector1::pseudo-element

代码语言：javascript复制

a::before {
  content: '>';
}

标准伪元素索引 (opens new window)

css size 面试索引语法

0 人点赞