2.2 CSS 选择器

1.基本选择器

• 通配选择器：* {}

• • 多用于清除样式

• 元素选择器：标签名 {}

• • 为页面中某种元素统一设置样式。
  • 无法实现差异化设置

• 类选择器：.类名 {}

• • 一个元素不能写多个class属性
  • 一个元素的class属性，能写多个值，用空格隔开。

• id选择器：#id值 {}

• • 一元素只能拥有一个id属性，多个元素的id属性值不能相同。

2. 复合选择器

• 交集选择器：选择器1选择器2选择器3 {}

• • 常用：元素选择器配合类名选择器—p.beauty {}
  • id选择器、理论上可以作为交集的条件，但实际应用中几乎不用，因为没有意义。
  • 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素。

• 并集选择器：选择器1,选择器2,选择器3 {}

• • 并集选择器，我们一般竖着写。
  • 并集选择器，通常用于集体声明，可以缩小样式表体积。

• 后代选择器：选择器1 选择器2 选择器3 {} (先写祖先，后写后代)

• • 后代选择器，最终选择的是后代，不选中祖先。儿子、孙子、重孙子，都算是后代。
  • 结构符合HTML嵌套规则(如：p不能嵌套块级元素)

/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
  color: red;
}

• 子代选择器：选择器1>选择器2>选择器3 {}

• • 选中指定元素中，符合要求的儿子元素
  • 子、孙子、重孙子、重重孙子.….统称后代!，子就是指儿子。

• 兄弟选择器：

• • 相邻兄弟选择器：选择器1+选择器2 {}(选择指定元素后面紧挨着的兄弟元素)
  • 通用兄弟选择器：选择器1~选择器2 {}(选择指定元素后面所有的兄弟元素)

• 属性选择器：

/* 第一种写法:选中具有title属性的元素 */
[title] {
  color: red;
}

/*第二种写法:选中具有title属性,且属性值为value1的元素*/
[title="value1"] {
  color: red;
}

/*第三种写法:选中具有title属性，且属性值以字母a开头的元素*/
[title^="a"] {
  color: red;
}

/*第三种写法:选中具有title属性，且属性值以字母u结尾的元素*/
[title$="u"] {
  color: red;
}

/*第三种写法:选中具有title属性，且属性值包含字母u的元素*/
[title*="u"] {
  color: red;
}

3. 伪类选择器

• 3.1 动态伪类

/*选中的是没有访问过的a元素*/
a:link {
  color: orange;
}

/*选中的是访问过的a元素*/
a:visited {
  color: gray;
}

/*选中的是鼠标悬浮状态的a元素*/
a:hover {
  color: skyblue;
}

/*选中的是激活状态的a元素*/
a:active {
  color: green;
}

/*选中获取焦点的表单控件*/
input:focus {
  color: orange;
  background-color:green;
}

• 3.2 结构伪类

/*按照所有兄弟计算*/
div>p:first-child {} /*没有符合条件*/
div>p:last-child {} /*没有符合条件*/
div>p:nth-child(an+b) {} 
div>p:nth-child(3) {}/*李四*/

/*按照所有同类型兄弟计算*/
div>p:first-of-type {} /*张三*/
div>p:last-of-type {} /*老八*/
div>p:nth-of-type(an+b) {}
div>p:nth-of-type(3) {}/*王五*/

:nth-last-child(an+b) /*所有兄弟元素中的倒数第n个*/
:nth-last-of-type(an+b) /*所有同类型身弟元素中的倒数第n个*/
:only-child {} /*选择没有兄弟的元素（独生子女)*/
:only-of-type {} /*选择没有同类型兄弟的元素*/
:root {} /*根元素*/
:empty {} /*内容为空元素空格也算内容*/

<div>
<span>测试1</span>
<p>张三:98分</P>
<p>李四:88分</p>
<p>王五:78分</P>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
<span>测试2</span>
</div>

• 3.3 否定伪类：:not(选择器)排除满足括号中条件的元素。

div>p:not(:first-child) /*排除了张三*/

<div>
<p>张三:98分</P>
<p>李四:88分</p>
<p>王五:78分</P>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
</div>

• 3.4 UI伪类

• • :checked 被选中的复选框或单选按钮。
  • :enable 可用的表单元素（没有disabled属性)。
  • :disabled 不可用的表单元素(有disabled属性)。

• 3.5 目标伪类

• • :target 选中锚点指向的元素

• 3.6 语言伪类

• • :lang(en) 根据指定的语言选择元素(本质是看lang属性的值)。

4. 伪元素选择器

• ::first-letter 选中元素中的第一个文字。
• ::first-line 选中元素中的第一行文字。
• ::selection 选中被鼠标选中的内容。
• ::placeholder 选中输入框的提示文字。
• ::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容)。
• ::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容)。