【前端体系课】-- CSS选择器

开发中经常需要找到特定的网页元素进行设置样式

CSS 选择器就是按照一定的规则选出符合条件的元素，为之添加 CSS 样式

分类:

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id 选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

通用选择器

所有的元素都会被选中;

星号 *

一般用来给所有元素作一些通用性的设置

比如内边距、外边距;
比如重置一些内容;

浏览区会遍历所有的元素 (包含没用到的) 并设置值
效率比较低，尽量不要使用;

简单选择器

开发中用的最多的选择器

元素选择器（type selectors） , 使用元素的名称;
类选择器（class selectors） , 使用 . 类名 ;
id选择器（id selectors） , 使用 #id;

id 注意事项:
id 值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为 id值

属性选择器

选择相同属性, 不常见

用法:

// 选中所有相同属性名的元素
[属性名] {
    ...
}

// 选中指定属性值的元素
[属性名=属性值] {
    ...
}

后代选择器

所有的后代 (直接/间接的后代)

选择器之间以空格分割

直接子代选择器 (必须是直接自带)

选择器之间以 > 分割;

兄弟选择器

相邻兄弟选择器

使用符号 + 连接

普遍兄弟选择器

使用符号 ~ 连接

选择器组

交集选择器

需要同时符合两个选择器条件 (两个选择器紧密连接)

在开发中通常为了精准的选择某一个元素;

并集选择器

符合一个选择器条件即可 (两个选择器以, 号分割)

在开发中通常为了给多个元素设置相同的样式;

伪类

Pseudo-classes

伪类是选择器的一种，它用于选择处于特定状态的元素;

比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;

动态伪类
:link、 :visited、 :hover、 :active、 :focus
目标伪类
:target
语言伪类
:lang( )
元素状态伪类
:enabled、 :disabled、 :checked
结构伪类
:nth-child ( )、 :nth-last-child ( )、 :nth-of-type ( )、 :nth-lastof-type ( )
:first-child、 :last-child、 :first-of-type、 :last-of-type
:root、 :only-child、 :only-of-type、 :empty
否定伪类
:not()

使用:

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上
a:active 激活的链接（鼠标在链接上长按住未松开）

注意:

:hover 必须放在 :link 和 :visited 后面才能完全生效
:active 必须放在 :hover 后面才能完全生效
建议的编写顺序是 :link、 :visited、 :hover、 :active

除了 a 元素， :hover、 :active 也能用在其他元素上

:focus

:focus 指当前拥有输入焦点的元素（能接收键盘输入）

文本输入框一聚焦后，背景就会变红色

因为链接 a 元素可以被键盘的 Tab 键选中聚焦，所以 :focus 也适用于 a 元素

动态伪类编写顺序建议为:

:link、 :visited、 :focus、 :hover、 :active

伪元素

pseudo-elements

常用的伪元素有:

:first-line、 ::first-line
:first-letter、 ::first-letter
:before、 ::before
:after、 ::after

为了区分伪元素和伪类，建议伪元素使用 2 个冒号，比如 ::first-line

::first-line 和 ::first-letter

::first-line 可以针对首行文本设置属性
::first-letter 可以针对首字母设置属性

::before 和 ::after

用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
常通过 content 属性来为一个元素添加修饰性的内容