前端开发基础学习笔记（四）：知识点--CSS选择器

一、简单选择器： 

1.类型选择器（又名元素选择器）：

      即对HTML元素名的选择，比如

,

等。

2.类选择器：

     对HTML元素的类名筛选选择

3.ID 选择器：

     以#+ID来选择，ID必须当前文档唯一

4.通用选择器

类似：*{color:red}，对所有元素使用，一般不用。

二、属性选择器： 

1.存在和值（Presence and value）属性选择器：

    

        
Tomatoes
    

2.子串值（Substring value）属性选择器：

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

/* 语言选择的经典用法 */
[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-class）和伪元素

1.伪类

    一个 CSS伪类（Pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。

2.伪元素

  跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。

四、组合器和选择器组

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