该部分内容均来自 「MDN web docs」
选择器类型
1. 简单选择器（simple selectors）
直接匹配文档中的一个或者多个元素：基于元素类型 div p span；基于class；基于id。
-
类选择器
可以叠加使用，叠加方式为
.warning {}
.important {}
<p class="warning important">我是女生</p>
<!--两种类如有冲突，以后面的important为准--!>
因此，选择器一定要：
- 描述清晰（方便叠加使用）
- 越是特殊类的，越要放到后面（这样特殊的优先级更高）
-
id选择器
哈希标志# + ID名称组成
在一个文档中，一个id名必须是唯一的，如有重复，有一些浏览器只认可第一个id。 -
通用（universal）选择器
通用选择器是老大（ultimate joker），他可以选中页面中的所有元素。我们很少用它来给页面的每一个元素添加式样，一般通用选择器和其他选择器组合（combination）使用。
谨慎使用universal selector，尤其是在大的界面上，它会让页面的加载速度变慢。 -
Combinators
组合多重选择器，有以下四种可用的类型：
<section>
<h2>Heading 1</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>
<h2>Heading</h2>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</section>
- The descendant selector
section p {
color: blue;
}
section中的所有p标签
- The child selector
section > p {
background-color: yellow;
}
仅仅是section中的第一级子标签p
- The adjacent sibling selector 相邻兄弟选择器
h2 + p {
text-transform: uppercase;
}
h2后的第一个同级（same hierarchy level)兄弟标签
注意：此种用法是的h2和p一定是同级标签！如果是section + p，则不会生效。
- The general sibling selector 通用兄弟标签
h2 ~ p {
border: 1px dashed black;
}
h2后的所有同级兄弟标签
2. 属性选择器（attribute selectors）
形式是data-*，为特定属性的标签设定样式。
也叫“RegExp expression”，因为属性选择器提供的灵活匹配方式和正则表达式非常像（其实并不是真正的正则表达式）
使用方式：
<li data-vegetable="spicy">Red pepper</li>
[data-vegetable="spicy"] {
color = red;
}
匹配方式：
- [attr |= val] exactly val or starts with val
- [attr ^= val] starts with val
- [attr $= val] ends with val
- [attr *= val] contains val [attr ~= val] treat spaces as part of val
3. 伪类选择器（pseudo-class selectors）
一共41种。
放选择器的末尾，只有在特定的状态时才会生效。
举例：
p {
color: red;
}
p :hover {
color:pink;
}
4. 伪元素选择器（pseudo-elements selectors）
一共6种。
和伪类选择器很像，同样是放在选择器的末尾使用。
5. 组合器（combinators）
一共5种。
- A, B
A and/or B - A B
B是A的子级（descendant） - A>B
B是A的direct child - A+B
B是A的The next child of the same parent - A~B
B是A的one of the next children of the same parent
6. 多重选择器（multiple selectors）
就是combinators中的A, B, C这种类型。
暂时施工完毕。
网友评论