Language - CSS - 选择器 | 魔术桌

文章摘要： 摘要内容。

选择器种类	表示方式	说明
元素选择器	<标签名>	通过标签名来选择
class选择器	`.`<class名>	class允许多个属性使用同一个名称
id选择器	`#`<id名>	id名必须唯一，不可重复
并列选择器	<名1>`,`<名2>	能够同时指定多个
后代选择器	<父类名>``<子类名>	能够以层级关系获取后代
子元素选择器	<父类名>`>`<名>	获取某个元素的直接下一代，不包含孙子代
相邻同胞选择器	<名>`+`<名>	选择紧随其后的第一个同胞元素
后续同胞选择器	<名>`~`<名>	选择所有跟随其后的相同元素
伪类选择器	<名>`:<伪类属性>`	为元素添加特殊效果

元素（标签）选择器

选择器的名字必须是标签的名字。
作用是选择器中的样式会作用于所有相同标签上。

label {
    /*样式属性和参数*/
}

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器。
CSS 中 id 选择器以#井号来表示。
id名称不能重复，即不能重复在不同的元素中使用同一个id名称。

#ID01 {
    /*样式属性和参数*/
}

<head>
    <!--外联样式-->
    <link rel="stylesheet" href="./style.css">
</head>

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示。
在 CSS 中，class选择器以一个.点号表示。

.class01 {
    /*样式属性和参数*/
}

并列选择器

使用,逗号隔开。

.class01, .class02 {
    /*样式属性和参数*/
}

后代选择器

选择指定元素内的所有后代元素。
使用``空格分割。

body .class02 {
    /*样式属性和参数*/
}

子元素选择器

选择指定元素的直接子元素。
使用>大于号表示。

body > .class02 {
    /*样式属性和参数*/
}

相邻同胞选择器

选择紧随其后的第一个同胞元素。
使用+加号。

label + .class02 {
    /*样式属性和参数*/
}

后续同胞选择器

选择所有跟随其后的同胞元素。
使用~波浪号。

label ~ .class02 {
    /*样式属性和参数*/
}

伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

表单相关

伪类选择器	示例	说明
`:checked`	`input:checked`	选择所有选中的表单元素
`:disabled`	`input:disabled`	选择所有禁用的表单元素
`:enabled`	`input:enabled`	选择所有启用的表单元素

元素单选

伪类选择器	示例	说明
`:first-of-type`	`p:first-of-type`	选择的每个`<p>`元素是其父元素的第一个`<p>`元素
`:last-child`	`p:last-child`	选择所有`<p>`元素的最后一个子元素
`:last-of-type`	`p:last-of-type`	选择每个`<p>`元素是其母元素的最后一个`<p>`元素
`:not(selector)`	`:not(p)`	选择所有p以外的元素
`:nth-child(n)`	`p:nth-child(2)`	选择所有`<p>`元素的父元素的第二个子元素
`:nth-last-child(n)`	`p:nth-last-child(2)`	选择所有`<p>`元素倒数的第二个子元素
`:nth-last-of-type(n)`	`p:nth-last-of-type(2)`	选择所有`<p>`元素倒数的第二个为`<p>`的子元素
`:nth-of-type(n)`	`p:nth-of-type(2)`	选择所有`<p>`元素第二个为`<p>`的子元素
`:only-of-type`	`p:only-of-type`	选择所有仅有一个子元素为`<p>`的元素
`:only-child`	`p:only-child`	选择所有仅有一个子元素的`<p>`元素

元素状态

伪类选择器	示例	说明
`:link`	`a:link`	`<a>`未访问过状态
`:visited`	`a:visited`	`<a>`已访问过状态
`:active`	`a:active`	`<a>`正在活动状态
`:hover`	`a:hover`	`<a>`将鼠标放在链接上的状态
`:focus`	`input:focus`	选择元素输入后具有焦点

伪类选择器	示例	说明
`:empty`	`p:empty`	选择所有没有子元素的`<p>`元素
`:in-range`	`input:in-range`	选择元素指定范围内的值
`:invalid`	`input:invalid`	选择所有无效的元素
`:optional`	`input:optional`	选择没有"required"的元素属性
`:out-of-range`	`input:out-of-range`	选择指定范围以外的值的元素属性
`:read-only`	`input:read-only`	选择只读属性的元素属性
`:read-write`	`input:read-write`	选择没有只读属性的元素属性
`:required`	`input:required`	选择有"required"属性指定的元素属性
`:root`	`root`	选择文档的根元素
`:target`	`#news:target`	选择当前活动#news元素(点击URL包含锚的名字)
`:valid`	`input:valid`	选择所有有效值的属性
`:first-letter`	`p:first-letter`	选择`<p>`元素的第一个字母
`:first-line`	`p:first-line`	选择`<p>`元素的第一行
`:first-child`	`p:first-child`	选择器匹配属于任意元素的第一个子元素的`<p>`元素
`:before`	`p:before`	在`<p>`元素之前插入内容
`:after`	`p:after`	在`<p>`元素之后插入内容
`:lang(language)`	`p:lang(it)`	为`<p>`元素的lang属性选择一个开始值

案例

/*外联样式*/
/*选择`.class02`元素，是一个超链接元素的为访问链接状态*/
.class02:link {
    /*定义该状态下的样式*/
}

伪元素选择器

创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	示例	说明
`::before`	`E::before`	在E元素里面最前面添加一个伪元素
`::after`	`E::after`	在E元素里面最后添加一个伪元素