四 . css系列之选择器详解及权重

最新推荐文章于 2024-08-09 11:34:51 发布

Stavin Li

最新推荐文章于 2024-08-09 11:34:51 发布

阅读量5.7k

点赞数 3

分类专栏： css3基础及应用

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/m0_37285193/article/details/81567522

版权

css3基础及应用专栏收录该内容

17 篇文章 0 订阅

订阅专栏

#####（一）选择器详解

1.标签选择器（元素选择器）:`HTML`标签作为选择器，作用是选取`HTML`文档中相同的HTML元素`P{}`

2.类选择器

第一步：设置类名<开始标签 class="类名"></结束标签>
第二步：为类设置样式.类名{}

注意：
1.同一文档中类名可以相同
2.class后面可以有多个值，用空格分开

3.id选择器

第一步：设置id名<开始标签 id="类名"></结束标签>
第二步：为id设置样式#id名{样式}

注意：
1.同一文档中，id名必须唯一
2.id的权重大于class

4.全局选择器（通配符选择器）：`*`，选取文档中所有元素

5.群组选择器：将多个选择器用逗号连接在一起，形成一个组，使它们应用同种样式，如`p,h3{}`

6.伪类选择器

:link   设置超链接的默认效果
:visited  设置超链接被访问过后的样式
:hover    设置元素被鼠标滑过的样式
:active   设置元素被激活时的样式
:focus    设置元素获得输入焦点时的样式

注意：LVHA

7.后代选择器：用来选择一个元素的所有后代元素，选择器间用空格分隔，如div p{}，表示div的后代p

8.子选择器：用来选择一个元素的子元素，两个选择器间用>分隔，如div>P{}，表示选择div的子元素，且这个子元素是p标签

9.属性选择器：通过元素的属性或属性值来获取元素

a.[属性名]{样式}      选取具有某个属性的所有元素

b.匹配元素[属性名]{样式}    选取具有某个属性且匹配前面的“匹配元素”的所有元素

c.[属性名1][属性名2]{样式}	选取具有多个属性的所有元素

e.[属性名="属性值"]{样式}		选取具有某个属性且具有指定属性值的所有元素

f.[属性名~="属性值1  属性值2  属性值3..."]   选取具有某个属性且包含 某个属性值的所有元素

g.[属性名|="属性值"]    选取具有某个属性，且其属性值以某些字符串作为前缀，或属性值为该字符串，如
	<p title="a-1">测试1</p>
	<p title="a">测试2</p>
	[title|="a"]{}，会选取到测试1和测试2
	
h.[属性名^="字符串"]	  选取具有某个属性，且属性值以某些字符开头的所有元素

i.[属性名$="字符串"]	  选取具有某个属性，且属性值以某些字符串做结尾的所有元素

j.[属性名*="字符串"]	  选取具有某个属性，且属性值中包含指定字符串的所有元素

10.交集选择器：将两个选择器紧挨着写在一起，作用是选取这两个选择器的交集部分，格式有三：

a.标签选择器.类名
b.标签选择器#id名
c.标签选择器[属性名="属性值"]

11.结构伪类选择器：用于选取一个结构中的某个元素

:first-child		选取结构中第一个元素
父元素  :first-child   选取某个结构中的第一个元素
父元素  匹配对象:first-child    选取某个机构中的第一个元素，且这个元素必须和匹配对象向匹配
:last-child      选取结构中最后一个元素
:nth-child(n)		选取结构中第n个元素
:nth-last-child(n)    选取结构中倒数第n个元素

元素类型:nth-of-type(n)   按类别查找结构中的第n个元素
元素类型：nth-last-of-type(n)   按类型在结构中查找倒数第n个元素
元素类型：first-of-type     按类型查找结构中第一个符合某种类型的元素
元素类型：last-of-type      按类型查找结构中最后一个符合某种类型的元素

12.伪元素选择器

:first-letter   选取一个元素的第一个字符 
:first-line	选取一个元素的第一行内容
:before		在一个元素前面插入相应内容，常和content结合使用
:after		在一个元素后面插入内容，常和content结合使用
注意:
:first-line
:first-letter
这两个选择器的应用对象是块级元素

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

:enabled    选取界面中可用元素
:disabled   选取界面中不可用元素

14.通用兄弟元素选择器

选择器1~选择器2     选取的是选择器1后面的所有选择器2，如div~p，选取的是div后面的所有p元素
选择器1+选择器2     选取的是选择器1后面的第一个选择器2元素，如div+p，选取的是div后面的第一个p元素
:root   选取文档的根元素，即<html>标签
:empty	选取文档中的空元素（所谓空元素，就是指该元素中连文本性信息都没有）
:not(被否定的元素)   否定伪类选择器，用来排除某些元素
:target   选取文档中具有锚点的元素，当超链接被激活时发挥作用

#####（二）选择器的权重

第一等：行内样式，如style="font-weight:bold"，权重为1000
第二等：ID 选择器（例如，#example），权重为0100
第三等：类选择器(例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover），权重为0010
第四等：标签选择器（例如，h1）和伪元素（例如，::before），权重为0001
第五等：通配选择符（*）关系选择符（+, >, ~, ' ', ||）和 否定伪类（:not()）对优先级没有影响
第六等：继承样式