!important >行内样式 >ID >类、伪类、属性 >标签名 >继承 >通配符
计算权重方式:
从图上看讲权重分为:
1. 第一等:代表内联样式,如: style=””,权值为1000。
2. 第二等:代表ID选择器,如:#content,权值为0100。
3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。
当权重一样时遵循准则:
1. 选择器越 具体 优先级越 高
2. 在同一个级别的情况下, 最后 指定的规则优先级就越 高 ,也就是我们通常说的就近原则;
权重计算例子:
1. li ->0 0 0 1 权重为 1
2. h1 + *[rel=up] ->0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成,属性选择器为10,因此权重为11
3. ul ol li.red ->0 0 1 3 权重为13
4 li.red.level ->0 0 2 1 权重21
1. !important (width: 100% !important)
2. 行内样式 (style="width:100%")
3. id选择器 (#myIdName)
4. class选择器 (.myClassName)
5. 标签选择器 (div,h1,p)
1. 使用 " >>>" 符号,这种方式主要是用于普通css,方式为:
外层 >>>第三方组件样式: .wrapper >>>.swiper-pagination { color: #eee }
2. 使用 "/deep/" ,这种方式主要用于sass或less,方式为:
外层 /deep/ 第三方组件样式: .wrapper /deep/ .swiper-pagination { color: #eee }
1.首先,从功能上来说,这3个实现的功能是一样的,都能够达到对内容进行排版修饰。2.但是,从用法上来说,他们的使用方式是不同的,下面我们来一一区分:
第一种,外部式,是单独写一个以.css为扩展名的文件,然后在<head></head>中使用<link>标签,将css样式链接到html中
举个例子:<link href="css样式的名字(一般自己取).css" rel="stylesheet" type="text/css">
这里需要注意的是,rel="stylesheet"和type="text/css"是固定写法,不可修改
第二种,嵌入式,这个可以理解为嵌套,现在<body></body>文本中写下需要的元素标签,比如span,然后在<head></head>中单独写一个css样式
举个例子:
<head>
<style type="text/css">
span{color:re}
</style>
</head>
<body>
<p>莱昂纳多演的<span>了不起的盖茨比</span>非常好看。</p>
</body>
这里就是用嵌入式,对了不起的盖茨比设置颜色,不过,设置的具体样式,我们写在<head></head>中,在<body></body>中只对要设置样式的内容加入元素标签。
第三种,内联式,这个是3个里面最容易的,我们既不需要另写一个以“.css"为扩展名的文件,也不需要单独在<head></head>中设置样式,这里,我们可以直接写在<body></body>的元素标签中
举个例子:
<body>
<p>莱昂纳多演的<span style="color:red">了不起的盖茨比</span>非常好看。</p>
</body>
最后,我们来说一下优先级或者权重值(也叫做权值,这3个说法实际一个意思)
这个涉及到以后学习的内容,我在这里先补充下:
内联样式的权值为:1000
ID选择器的权值为:100
类或伪类的权值为:10
元素和伪元素的权值为:1
连接符和通配符(*)的权值为0
继承的权值连0都没有(如果不想这样理解,可以理解为继承的权值是所有里面最小最小的)
那现在我们来看内联式,它是1000,所以内联式,外部式,嵌入式都有的情况下,权重最大的执行,所以此时是内联式的样式
外部式和嵌入式的权值在一样的情况下,浏览器会执行覆盖命令,所以写在后面的会被执行
这属于"多重样式(Multiple Styles)"
多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。
一般情况下,优先级如下:
(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style,例如:
<head><style type="text/css">
/* 内部样式 */
h3{color:green}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置:h3{color:blue} -->
</head>
<body>
<h3>测试!</h3>
</body>
在选择器的情况下:
如图:
解释:
1. 内联样式表的权值最高 1000;
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
利用选择器的权值进行计算比较,示例如下:
<html><head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00 /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
结果:<em> 标签内的数据显示为蓝色。
CSS 优先级法则:
A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式不如后来指定的CSS 样式;
E 在同一组属性设置中标有“!important”规则的优先级最大;示例如下:
<html><head>
<style type="text/css">
#redP p{
/*两个color属性在同一组*/
color:#00f !important /* 优先级最大 */
color:#f00
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>