css 选择器及优先级和权重

长傅

已于 2023-03-22 11:36:09 修改

阅读量835

点赞数

分类专栏： css 文章标签： css 前端 css3

于 2022-12-02 17:41:41 首次发布

本文链接：https://blog.csdn.net/WJXYCWCXY/article/details/128144074

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS样式表的引入方式

css样式表的三种引入方式的优先级：行内样式（内联样式） > 内部样式（内嵌样式）= 外部样式（外链式），谁靠后谁生效

css样式表的三种引入方式：

行内样式、内联样式，是通过标签的style属性来设置元素的样式，如：

<标签名 style="属性1：属性值1；属性2：属性值2;">内容</标签名>

注意： js的操作都是行内样式。

内部样式，是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义，如：

<head>
	<style type="text/css">
		div{
			color:red;
		}
	</style>
</head>

外部样式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，如：

<head>
	<link rel="stylesheet" type="text/css" href="css文件路径">
</head>

外部样式表才是真正意义上帮助我们解决了结构与表现分离，并且可以引用多个文件当中，在实际开发中通常使用外部样式表。

选择器的用法

1、基础选择器

p{}：标签选择器
.class{}：类选择器
#id{}：id选择器
*{}：通配符选择器

2、复合选择器

div,p,span{}：并集选择器，选择所有包含的元素。
p.class或#id{}：交集选择器，应用于同一个元素的多个特征属性。标签名放前面，且两个名字之间没有空格。
div p{}：后代选择器，以分隔，选择div内的所有p元素。
div > p{}：子元素选择器，亲生父子。
div + div{}：相邻兄弟选择器，注意相邻、同级。
div ~ div{}：普通兄弟选择器，div ~ *{}表示后面所有。

相邻兄弟选择器的使用场景

场景一： 当两个连续的元素，前一个元素可以因为用户的某些行为被操作，后一个选择跟着发生一些交互的效果，此时可以用兄弟选择器。

<head>
    <style>
        input:checked + span{
            color:red;
        }
    </style>
</head>
<body>
    <input type="radio" name="sex"><span>老坛酸菜</span>
    <input type="radio" name="sex"><span>康师傅</span>
</body>
</html>

场景二： 消除第一个标签的样式，因为自己不能是自己的兄弟。

<html lang="en">
<head>
    <style>
        a{
            text-decoration: none;
            float: left;
            padding: 0 10px;
        }    
        a + a{
            border-left:1px solid red;
        }
    </style>
</head>
<body>    
    <a>HTML<a>
    <a class="c">CSS<a>
    <a>JavaScript<a>   
</body>
</html>

3、伪类选择器

伪类选择器本身也是一种基础选择器。使用伪类选择器，其实相当于检测元素的某一种状态。一般我们都是使用复合选择器的方式和其他选择器结合进行使用。一般都是交集选择器居多，其实本质就是，当某个元素得到某个状态之后，设置一段样式。

（1）焦点伪类选择器

input:focus：焦点状态

实例：

<head>
    <style>
        input:focus{
            border:1px solid red;
            outline: none;
        }
        div{
            display: none;
            width:100px;
            border:1px solid red;
        }
        input:focus + div{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 焦点状态 -->
    <input type="text">
    <div>前端</div>
</body>

（2）动态伪类选择器

目前只有超链接具有四种状态，其他标签可以设置鼠标悬停和激活状态。当我们直接给定a标签定义样式，则默认四个样式显示同一个当前样式。当组合使用四种状态时，必须按照顺序排列，否则错误的顺序会导致样式的失效。

a:link{}：初始状态
a:visited{}：访问之后的状态
a:hover{}：鼠标悬停的状态
a:active{}：激活状态（按下了鼠标但是没松开的状态）

实例：

<head>
    <style>
        a:link{ color: grey;}
        a:visited{ color:skyblue;}
        a:hover{ color:red;}
        a:active{ color:green;}
    </style>
</head>
<body>
    <a href="">未点击超链接</a>
    <a href="">已点击超链接</a>
    <a href="">悬停</a>
    <a href="">激活</a>
</body>

通常情况我们都是只设置a和a:hover的样式。

（3）结构伪类选择器

实例：

    <ul>
        <li class="one">1</li>
        <li class="two">2</li>
        <li class="three">3</li>
        <li class="four">4</li>
        <li class="five">5</li>
        <li class="six">6</li>
    </ul>

实例1（:first-child）：

        li:first-child{color:mediumvioletred;}
        li:last-child{color:mediumvioletred;}

效果1：
在这里插入图片描述

实例2（:nth-child(n)）：

        li:nth-child(2){color:mediumvioletred;}/*①*/
        li:nth-child(2n){color:mediumvioletred;}/*②*/
        li:nth-child(3n){color:mediumvioletred;}/*③*/
        li:nth-child(odd){color:mediumvioletred;}/*④*/
        li:nth-child(even){color:mediumvioletred;}/*⑤*/

效果2：
在这里插入图片描述
实例3：

<head>
    <style>
        span:nth-child(1){ color:red;}
        span:nth-of-type(1){ color:greenyellow;}
    </style>
</head>
<body>
    <div>
        <p>第一个子元素</p>
        <a href="#">第二个子元素</a>
        <p>第三个子元素</p>
        <span>第四个子元素</span>
    </div>
</body>

效果3：

span:nth-child(1)匹配不到，因为第一个子元素的不是span类型；而需要span:nth-of-type(1)来指定第一个span元素。

匹配第n个元素：

p:first-child{}：选择属于其父元素的第一个且为p元素的子元素。如果第一个子元素不是p元素则匹配不到。另外是所有p都查找，不是只查找第一个。
p:last-child{}：选择属于父元素的倒数一个子元素。如果同上
p:nth-child(n){}：选择属于父元素的第n个子元素。如果同上。
p:nth-last-child(n){}：选择属于父元素的倒数第n个子元素。如果同上。
p:only-child{}：选择属于父元素有唯一子元素的元素。

匹配元素的第n个：

p:first-of-type{}：选择属于父元素的第一个p子元素。
p:last-of-type{}
p:nth-of-type(n){}：选择属于父元素的第n个p子元素。
p:nth-last-of-type(n){}
p:only-of-type{}：选择属于父元素有唯一子元素的元素。
:root{}：设置HTML文档。
p:empty{}：选择没有子元素的每一个p元素。

（4）反选伪类选择器

实例：

        div :not(p){color:blue;}

效果：
在这里插入图片描述

:not(p){}：选择非p元素的每一个元素。

（5）目标伪类选择器

实例：

<head>
    <style>
        :target{
            border:2px solid #d4d4d4;
            background-color: #e5eecc;
        }
    </style>
</head>
<body>
<p><a href="#news1">跳转内容 1</a></p>
<p><a href="#news2">跳转内容 2</a></p>
<p>请点击上面的链接，:target选择器会突显当前活动的HTML锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
</body>

效果：
在这里插入图片描述

#news:target{}：选择当前活动的#news元素。

（6）用户行为伪类选择器

实例：

<head>
    <style>
        input{ outline:medium;}
        input:focus{ border: 2px solid blue;}
    </style>
</head>
<body>
    <input type="text">
</body>

效果：
在这里插入图片描述

input:focus{}：选择获得焦点的input元素。

（7）UI元素状态选择器

input:enabled：选择每个启用的input元素。
input:disabled：选择每个被禁用的input元素。
input:checked：选择每个被选中的input元素。

CSS的三大特性

1、CSS的优先级

当同一个元素通过不同的选择器设置相同的样式的时候，会根据选择器的优先级（权重）来决定如何显示选择器优先级更高的声明，才会在元素上生效。如果权重相同的情况下，看顺序，靠后的生效。

优先级：!important>行内样式>id 选择器>伪类选择器=class 选择器>元素选择器>通配符>继承，后面声明的比前面的声明的优先级高，相同属性后者覆盖前者。

另外!important最好不用。

权重计算规则：

等级	类型	实例	权值
第一级	!important	!important	∞
第二级	行内样式	style=" "	1,0,0,0
第三级	id选择器	#id	0,1,0,0
第四级	class选择器、伪类选择器	.class、:hover	0,0,1,0
第五级	元素选择器	div	0,0,0,1
第六级	通配符	*	0,0,0,0
第七级	继承的样式没有权重
复合选择器（除了并集）中的交集、后代、子集、相邻兄弟、普通兄弟选择器		p.class、p .class、p > .class、p + .class、p ~ .class	所有包含的选择器权值相加，但是不会进位，只能同级相加，然后比较
并集选择器		p, div, #id, .class	权值就是每个选择器自己的权值大小，不会将所有权值相加

复合选择器的权值计算

<head>
    <style>
        div#id{
            color: blue;
        }
        div.div1.div2.div3.div4.div5.div6.div7.div8.div9.div10.div11{
            color: red;
        }
    </style>
</head>
<body>
    <div id="id" class="div1 div2 div3 div4 div5 div6 div7 div8 div9 div10 div11">我是一个div标签</div>
</body>

上述代码显示字体颜色为红色，因为div#id权值相加的结果为0,1,0,1，而div.div1-11权值相加的结果为0,0,11,1，说明复合选择器（除并集外）的权值是分级相加，而不是相加在一起。

2、CSS的层叠性

css，html绘制页面，本身就是一层一层的画出来的。页面的元素对于我们来说就会有一个层叠的顺序，靠上的会显示，靠下的会被遮挡或覆盖。

3、CSS的继承性

在css当中我们想要考虑继承的问题，元素与元素之间，必须存在嵌套关系。所谓的继承也就是父元素或者祖先元素身上设置了某些属性，到子元素或后代元素身上依旧有效。

并不是所有的属性都可以继承

一般文字本样式的属性都是可以继承的，比如text-，font-，line-这些开头的可以继承，还有color。
一般设置结构的属性都是不能被继承的，比如width，height，margin，padding，border，background，float，position。