CSS学习篇（二） 选择器

CSS规则主要由选择器和属性来组成，其中选择器有多种形式的存在，主要用来按照不用方式来方便的选择网页中的目标元素，从而添加属性来修改其样式。

下面介绍各种选择器：

简单选择器（Simple selectors）：通过元素类型、class或id匹配一个或多个元素。

• 元素选择器

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

p {
  color: red;
}

div {
  color: blue;
}

• 类选择器

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

• id选择器

<p id="first"> 1 </p>
<p id="second"> 2 </p>

#first {
  font-family: cursive;
}

#seconde {
  font-family: monospace;
  text-transform: uppercase;
}

 

属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。

• 存在和值（Presence and value）属性选择器

1. [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
2. [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
3. [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
  color: green
}

/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
[data-vegetable~="spicy"] {
  color: red;
}

•             子串值（Substring value）属性选择器

1. [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
2. [attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
3. [attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
4. [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。

这里的CSS筛选与上面例子一样的HTML：

/* 语言选择的经典用法 */
[lang|="fr"] {
  font-weight: bold;
}

/* 
    具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色
*/
[data-vegetable*="not spicy"] {
  color: green;
}

/* 
   具有"data-quantity"属性其值以"kg"结尾的所有元素*/
[data-quantity$="kg"] {
  font-weight: bold;
}

/* 
   具有属性"data-quantity"其值以"optional"开头的所有元素 
*/
[data-quantity^="optional"] {
  opacity: 0.5;
}

 

伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。

一个CSS伪类是添加到选择器的末尾，并以冒号为前缀添加关键字的组合，例如比较常见的是鼠标悬浮(“:hover”)、**(“:active”)、选中(“:checked”)等等。详情可以参考伪类。

 

伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。 

伪元素与伪类很像，不过是以双冒号为前缀，例如常见的是某个元素前面（"::before"）、某个元素后面（"::after"）、选中的元素（“::selection”）。详情可以参考伪元素。

 

组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。

组合选择器就是通过多个选择器之间的组合来筛选元素。

名称	组合器	选择
选择器组	A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
后代选择器	A B	匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器	A > B	匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器	A + B	匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器	A ~ B	匹配B元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

 

多重选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。

 选择器组就是多个选择器用逗号分割并组成：

h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}