【CSS3 学习笔记】CSS选择器

基本选择器

CSS作为层级样式表，其设置的样式需要作用在不同的标签上，下面的选择器可以指定CSS选择的范围

选择器	用法举例	功能
*	*	选择所有的元素
类选择器	.user	选择所有class为user的元素
ID选择器	#name	选择所有id为name的元素
标签选择器	p	选择所有<p> ...</p>标签
属性选择器	[target] [target = _blank] [target ~= btn] [target ^= btn]	选择属性带有target的元素/选择target = _blank的元素 选择包含btn的/选择以btn开头的…
，	.user,#name	同时操作多个选择器，分别进行选取
空格	div p	选择div包含范围的所有p标签，向下递归作用
>	div>p	选择div的子元素为p的标签，只作用一层
+	div+p	选择紧接着div的那个p标签

全体选择器

使用*选择器可以对html页面内的所有元素进行操作。

• 为页面内所有元素设置字体大小、行距、字体 ：

*{
    font:normal normal 18px/1.5em '宋体';
}

标签选择器

使用标签选择器可以对指定的标签进行操作

• 对h1标签进行选择：

h1{
    font:normal normal 18px '宋体';
}

• 也可以利用","来多选来实现批量处理

h1,h2,h3{
    font:normal normal 18px '宋体';
}

类选择器

利用类选择器可以帮助CSS找到标签的class属性值一致的标签，即可以找到一类的标签

• 为class属性值为text-center的一类元素设置文本居中：

.text-center {
    text-align: center;
}

• 将类选择器指定为具体标签

p.text-center{
    text-align: center;
}

ID选择器

利用ID选择器可以对指定ID的元素进行选中操作

选择id值为input-name的元素：

#input-name{
    font: normal normal 18px;
}

结构选择器(上下文选择器)

HTML标签具有层级的关系，CSS结构选择器可以根据标签的层级关系进行选择指定范围的标签。

后代选择器

在CSS中 标签之间使用空格来代表选择前者里的后代元素

• 选择div标签中包含的所有p标签(向下递归选择所有p标签)：

div p{
    font:normal normal 15px/1.5em '宋体';
}

子代选择器

在CSS中 标签之间使用>来代表选择前者里的子代元素

• 选择div标签中的下一层的p标签（只选择div标签的下一层，不向下递归）

div>p{
    font:normal normal 15px/1.5em '宋体';
}

选择紧邻兄弟

在CSS中 标签之间使用+来代表选择前者紧接的下一个目标兄弟元素(兄弟元素指与该元素同级的元素)

• 选择h2标签的下一个紧接的与h2同级的h1元素:

h2+h1{
    font: normal normal 20px '宋体';
}

选择后面的兄弟

在CSS中 标签之间使用~来代表选择前者的后面的兄弟元素,同时上面的所有选择器都可以互相复合使用：

/*选择h1标签的所有在它后面的兄弟标签*/
h1 ~ *{
    color: blue;
}
/* 选择h1标签的后面的所有h2兄弟标签 */
h1 ~ h2{
    color: green;
}
/*选择h1标签后面的所有class为 class1 的兄弟标签*/
h1 ~ .class1{
    color: red;
}
/* 选择h1标签后面的id 为  id1 的兄弟标签 */

h1 ~ #id1{
    color: yellow;
}

属性选择器

属性选择器基于标签的属性来进行标签的选择,在CSS中用[attribute]表示，attribute表示将要查询的属性

选择器格式	示例	描述
[attribute]	[target]	选取带有 target 属性所有元素
[attribute=value]	[target=_blank]	选取targe 属性 等于"_blank" 的所有元素
[attribute~=value]	[target~=btn]	选取target属性值中包含单词"btn"的元素。
[attribute|=value]	[target|=user]	选取target 属性以 “user” 开头或以属性连接破折号的所有元素
[attribute*=value]	[src*="csdn"]	选取src 属性中包含 “csdn” 子串的每个 元素
[attribute^=value]	[src^="https"]	选取src 属性值以 “https” 开头的每个 元素
[attribute$=value]	[src$=".com"]	选取src 属性以 “.com” 结尾的所有 元素

属性选择器可以和其他的选择器混用达到二次或多次筛选的效果:

/* 选取页面中包含target属性的id为"id1" class 为"class1"的h1标签 */
h1.class1#id1[target]{
    color: red;
}

为具体的属性值设置样式:

/* 为href属性值为"www.baidu.com" 的标签设置样式*/
[href ="www.baidu.com"]{
    color: red;
}

使用^代表为以某一值开头的属性值设置样式:

/* 为href属性值以"https"开头 的标签设置样式*/
[href ^="https"]{
    color: red;
}

使用$代表为以某一值结束的属性值设置样式:

/* 为href属性值以".com"结束 的标签设置样式*/
[href $=".com"]{
    color: red;
}

使用*代表为以某一值为子串的属性值设置样式:

/* 为href属性值包含"baidu" 的标签设置样式*/
[href *="baidu"]{
    color: red;
}

使用~代表为以某一包含指定单词的属性值设置样式:

/* 为appraise属性值包含单词"great" 的标签设置样式*/
[appraise ~= "great"]{
    color: red;
}

使用|代表为包含连字符分割的某一子串为前缀的属性值设置样式:

[lang|=en] { color:red; }

伪类选择器

伪类选择器通常用于为元素的不同状态或不确定存在的元素设置样式规则

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即html。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数元素
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数元素
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not(p)	选择非元素的每个元素

超链接伪类

使用伪类可以对超链接的不同状态进行样式设置

/* 未被访问的超链接 */
a:link{
    color: blue;
}
/* 已被访问的超链接 */
a:visited{
    color: red;
}
/* 鼠标移动到超链接 */
a:hover{
    color:green;
}
/* 用户按下超链接时 */
a:active{
    color: yellow;
}

结构伪类

基于HTML的层次关系进行选择一些不确定的标签

/* 为p标签的第一个子标签设置样式 */
p:first-child{
    color: red;
}
/* 选择article标签的子标签里的第一个span标签 */
article span:first-of-type{
    color:greenyellow;
}
/* 选择article标签的子标签里的最后一个span标签 */
article span:last-of-type{
    color:green;
}
/* 选择article唯一的子标签且是span的标签 */
article span:only-child{
    color:darkgray;
}
/* 选择article子标签里唯一同级的span标签 */
article span:only-of-type{
    color:yellowgreen;
}

除了上面选择选择器，还有具体利用层次关系选择的以nth开头的结构伪类,nth意为第几个

/* 选择第三个li标签 */
li:nth-child(3){
    color: red;
}
/* 选择奇数li标签 可以用 odd 代替 2n+1*/
li:nth-child(2n+1){
    color:green;
}
/* 选择偶数li标签 可以用 even 代替 2n*/
li:nth-child(2n){
    color: yellowgreen;
}

还可以从后面开始计数,只需要在中间添加last，例如:nth-last-child(n)获取从后数的第n个元素

还可以使用not 进行非操作，排除某一个元素:

/* 排除第三个li元素，为其他li元素都添加样式 */
li:not(:nth-child(3)){
    color: red;
}

表单伪类

选择器	示例	说明
:enabled	input:enabled	选择每个启用的 input 元素
:disabled	input:disabled	选择每个禁用的 input 元素
:checked	input:checked	选择每个被选中的 input 元素
:required	input:required	包含required属性的元素
:optional	input:optional	不包含required属性的元素
:valid	input:valid	验证通过的表单元素
:invalid	input:invalid	验证不通过的表单

字符伪类

状态	示例	说明
::first-letter	p:first-letter	选择每个元素的首字母
::first-line	p:first-line	选择每个元素的首行
::before	p:before	在每个元素的内容之前插入内容
::after	p:after	在每个元素的内容之后插入内容

选择器权重

元素会被多个样式一层层作用，这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题

规则	粒度
ID	0100
class，类属性值	0010
标签,伪元素	0001
*	0000
行内样式	1000

• 相同权重的规则应用最后出现的
• 可以使用 !important 强制提升某个规则的权限
• 子元素可以继承父元素设置的样式,边框、高度等并不会继承
• 继承的规则没有权重