首页 > 其他分享> 文章详细

选择器总结

2021-07-27 20:34:24 阅读：148 来源： 互联网

标签：总结 attr 元素 nth child 选择器属性

其实，路上都是风景。

之前我们学习了一些选择器，今天我们来进行总结，选择器一共分为五大类。

01.基本选择器

1.通配符选择器

统一调配所有属性

*{
padding: 0;
margin: 0;
}

2.class选择器必须在元素中定义class属性

[类似于人名]
.class属性值{
属性:属性值;
...
}

3.ID选择器必须在元素中定义id属性

#id值{
属性:属性值;
...
}

4.元素选择器（标签选择器）

标签名{
属性:属性值;
...
}

5.群组选择器

就是同时选择多个类名，中间用逗号隔开

02.层次选择器

1.包含选择器（后代选择器）选择的匹配的元素被包含在前一个元素内，会选择所有在此父元素里面的所有后代，包括孙元素。中间用空格连接

2.子选择器

匹配的是这个元素的孩子，用>号连接

3.相邻兄弟选择器

兄弟选择器，就是让一个元素的兄弟属性值与这个元素相同

p+a{} 表示p的相邻元素a会改变为大括号设置的属性值。

p:hover+a{}表示鼠标悬浮在P上之后他的下面一个兄弟元素会显示出来并且属性值变为设置的。

4.通用选择器

p~a{}表示p后面所有的兄弟a元素都变为大括号内设置属性值。

p:hover~a{}表示鼠标悬浮在p上之后他所有的兄弟属性都会显示且属性值为设置的。

03.伪类选择器

1.动态伪类选择器（链接伪类选择器）

1>.链接未访问时效果

语法：a:link:;

2>.链接访问后效果

语法：a:visited:;

3>.鼠标悬停时候效果

语法：a:hover:;

4>.鼠标按下时效果

语法：a:active

使用链接伪类选择器的时候顺序必须为1234

5>.获取焦点

语法：E：focus

应用在文本输入框中

2.目标伪类选择器

语法：：target

选择匹配的所有元素

前面的元素只能是被操作的元素的选择器。

例如：#id:target{}

使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

3.UI元素状态伪类选择器

enabled 匹配所有启用的表单元素，改变样式

disabled 匹配所有禁用的表单元素，改变禁用状态下的样式

checked 匹配的是复选或者单选按钮的表单元素，点击之后的样式

4.结构伪类选择器

1>E:fisrt-child

选中子元素为E的第一个E。与E:nth-child(1)等同

2>E:last-child

作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

3>E F:nth-child(n)

选择父元素E的第n个子元素F。:nth-child(length)、:nth-child(n)、:nth-child(n*length)、:nth-child(n+length)、:nth-child(-n+length)、:nth-child(n*length+1)

这里需要注意，如果F元素中混入了一个其他的元素，这个元素也算一行，但是不会显示出样式，比如第六行插入了其他的，那么如果想要继续设置第五行元素，n的值为6.

4>F:nth-child(even)

选中所有子元素F中位于偶数行的元素

5>F:nth-child(odd)

选中所有子元素F中位于奇数行的元素

6>:nth-last-child()

选中从后往前数的第几行/奇数行/偶数行

7>E:only-child

选中父元素中只有一个E元素的E

8>:first-of-type

选择的元素是一堆同类元素的上一级的元素的第一行

9>:last-of-type

选择一个上级元素的最后一个同类子元素

10>:nth-of-type()

选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素。不管其中有没有混入其他的元素，也只计算第n行/偶数行/奇数行

11>:nth-last-of-type()

选择指定的元素，从元素的最后一个开始计算

12>:only-of-type

选择一个元素是它的上级元素的唯一一个相同类型的子元素,注意这里与only-child不同的是，它是唯一一个类型相同而不是唯一一个

13>:empty

选择的元素里面没有任何内容,连空格都没有才可以

14>:root

选择文档的根元素

5.否定伪类选择器

E;not(F)

匹配E元素中所有除了F以外的元素。

04.伪元素选择器

1.:after{content:''}与::after{content:''}相同

代表让这些文字或者图片跟在此元素后面显示出来

2.:before{content:''}与::before{content:''}

在此元素之前添加内容或者图片

3.:first-letter{}

定义它身后的块级元素中第一个字符的样式

4.:first-line{}

定义它后面的块级元素的第一行的样式，注意这两个都只能使用块级元素

5.:selection{}

当我选中元素里面的文字时，改变样式，只能改变字体颜色和背景颜色。

05.属性选择器

1.E[attr]

选择具有attr属性的E元素，E可以省略，代表定义了attr的任意类型元素。

2.E[attr=”value”]

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素例如: a[href=”www.baidu.com”]{color:red;}

3.E[attr|=value]

选择匹配E元素，且E元素定义了属性 attr，attr属性值是一个具有val或者以val-开始的，属性值。常用于lang属性（例如 lang=” en-us”)。例如 p[lang=en]将匹配定义为英语的任何段落，无论是英式英语还是美式英语

4.E[attr~=val]

选择匹配E元素，且E元素定义了属性 attr，attr属性值具有多个空格分隔的值，其中一个值等于val。例如，.info[title~-=more]将匹配元素具有类名info，而且这个元素设置了一个属性 title，同时title属性值以包含了“more”的任何元素，例如<a class=” info”title=”clickhere for more information” >click me</a>

5.E[attr*=val]

选择匹配元素E，且E元素定义了属性 attr，其属性值任意位置包含了“val”。换句话说,字符串 val 在任意位置

*代表匹配任意字符

6.E[attr^=val]

选择匹配元素E，且E元素定义了属性 attr，其属性值以val开头的任何字符串

^代表匹配起始符

7.E[attr$=val]

选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任何字符串。刚好与E[attr^=val]相反

$代表匹配终止符

标签：总结,attr,元素,nth,child,选择器,属性
来源： https://blog.csdn.net/m0_48353529/article/details/119150771