CSS的三大特性

duan199226 发布于2019-04-23 13:46 / 2075人阅读

本文内容：

层叠性
继承性
优先级

权重计算方法（特异性）

首发日期：2018-05-01

层叠性：

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。
比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）

层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow）。】

示例：

依据层叠性的就近原则，第一个div的背景色为蓝色，第二个div的背景色为绿色。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        div{
            background-color: red;
        }
        div{
            background-color: blue;
        }
    style>
head>
<body>
    <div>123div>  
    <div style="background-color: green;">123div>  
body>
html>

<title>Documenttitle> <style> div{ font-size:70px; background-color: #CCC; color:skyblue; } style> head> <body> <div> <p>p继承div的样式p> div> body> html> <title>Documenttitle> <style> /* 从上到下，依次注释选择器来测试优先级 */ div{ color:green!important; } #id1{ color:red; } .class{ color: blue; } div{ color:purple; } style> head> <body> <div>!import优先级div> <div style="color:red">行内样式优先级div> <div id="id1">id选择器优先级div> <div class="c1">类选择器优先级div> <div>标签选择器优先级div> body> html>

上面的规则!important和行内样式毫无疑问，但如果多个选择器混杂来定义样式的时候如何判断他们的优先级？答案是依据权重来判断。

权重计算方法【可以称为是css的特异性】：

几个规则：

权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】
继承的权重为(0,0,0,0)
标签选择器的权重为(0,0,0,1)
类、伪类选择器的权重为(0,0,1,0)
id选择器选择器的权重为(0,1,0,0)
行内样式的权重为(1,0,0,0)
!important的权重无限大

计算方法：

多个选择器混杂时，权重之和也是用四个数字来组成，每一位的值为多个选择器四个数字的每位之和，比如div:first-child的权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1)，比如div ul li 为(0,0,0,3),比如a:hover为(0,0,1,1)
权重之和的数制是不会进位的，再多的标签选择器权重加和也抵不过一个类选择器。
多个选择器之间的顺序是无关的，不影响权重之和。
注意：对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每一个选择器还是独立的。 <title>Document
title> <style> div .p1{ background-color:blue; } p.p1{ background-color:green; }
style>
head> <body> <div> <p class="p1">123
p> div> body> html>
权重不同时，权重大的生效：

DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Documenttitle> <style> p.p1:first-child{ background-color:green; } div .p1{ background-color:blue; } style> head> <body> <div> <p class="p1">123p> div> body> html>

专线服务混合云忽略css特性类的特性 linux的特性 spark的特性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2309.html

课时89.CSS三大特性练习（理解）

摘要：给大家补充一点通配符是不参与权重计算的，因为通配符的权重是，而权重只计算，类，标签，将来还有一种，到后面说。练习直接选中和间接选中的，必然要听直接选中的。练习直接选中一共有两个，直接比较这两个直接选中的权重大小，听从权重大的。给大家补充一点：通配符是不参与权重计算的，因为通配符的权重是0，而权重只计算id，类，标签，将来还有一种，到后面说。练习1 直接选中和间接选中的，必然要听直接选中的...

马龙驹 2019-04-23 13:37 评论0 收藏0
前端基础-CSS的各种选择器的特点以及CSS的三大特性

摘要：一基本选择器二后代选择器子元素选择器三兄弟选择器四交集选择器与并集选择器五序列选择器六属性选择器七伪类选择器八伪元素选择器九三大特性一基本选择器选择器作用根据指定的名称，在当前界面中找到对应的唯一一个的标签，然后设置属性格式名称属性值注意点一、基本选择器二、后代选择器、子元素选择器三、兄弟选择器四、交集选择器与并集选择器五、序列选择器六、属性选择器七、伪类选择器 ...

番茄西红柿 2019-04-23 13:41 评论0 收藏0
css的三个特性背景透明设置

摘要：样式的权重可以叠加一般来说行内标签选择器类标签标签选择器通配选择器没有权重背景半透明的设置，，，最后一个参数是透明度取值范围在之间注意背景半透明是指盒子背景半透明，盒子里面的内容不受影响。关于行内元素（补充一点）行内元素只能容纳文本或其他行内元素。（a特殊a里面可以放块级元素）例子：关于行高tip: 选择器的嵌套层级不应大于3级，位置靠后的限定条件应尽可能的精确。属性定义必须...

liuhh 2019-04-23 13:29 评论0 收藏0
2018年，前端应该怎么学？

摘要：未来一个大的趋势就是前端开发的效果，正无限逼近原生效果同时一些大厂也在纷纷提前布局了，之前惊艳四方的天猫造物节淘宝造物节风靡朋友圈的怎么做的如果我们要在这波浪潮上取得先机，那么就必须提前学习。我个人想学习的框架是天猫的。面向2018年，我觉得前端有这么三个方向可以突破前端逻辑层（包括三大框架，webpack，前端数据管理）前端交互层（包括css3，canvas，svg，vr...

AnthonyHan 2019-08-22 11:18 评论0 收藏0
前端常见问题整理

摘要：关于原型链请求数据时解决缓存的办法服务器端的继承简单谈谈事件冒泡和事件捕获闭包什么时候会用到有什么好处闭包就是将函数内部和函数外部连接起来的一座桥梁可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中三目运算符图表的使用跨域如何关于js 1.原型链 http://www.cnblogs.com/Flying... 2.AJAX请求数据时...

jayzou 2019-08-20 18:05 评论0 收藏0