前端 CSS层叠性 CSS选择器优先级
层叠性
层叠性：权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重：谁的权重大，浏览器就会显示谁的属性
我们现在已经学过了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那么就会有一个问题：如果我通过不同的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
类选择器权重大于标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
p{
color: red;
font-size: 30px;
} .spe1{
color: yellow;
font-size: 40px;
} </style>
</head>
<body>
<div>
<p class="spe1">我是什么颜色</p>
<p class="spe1">我是什么颜色</p>
</div>
</body>
</html>
当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style> .spe1{
color: yellow;
font-size: 40px;
} .spe2{
color: green;
font-size: 40px;
} </style>
</head>
<body>
<div>
<p class="spe1 spe2">我是什么颜色</p>
<p class="spe1 spe2">我是什么颜色</p>
</div>
</body>
</html>
前端 CSS层叠性 CSS选择器优先级的更多相关文章
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
- CSS学习笔记03 CSS层叠性、继承性、特殊性
层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- css层叠性和继承性
1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...
- css层叠性冲突中的优先级
一.首先从CSS级别来进行优先级划分: CSS控制页面样式的四种方法: 1.行内样式 通过style特性 <p style=”color:#F00; background:#CCC; font- ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- css笔记09：选择器优先级
1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- CSS——层叠性
层叠性:浏览器渲染是从上而下的,当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码).和标签调用选择器的顺序没有关系. <!DOCTYPE htm ...
- CSS层叠性
比较id,类,标签的数量 谁多就谁在上面 255个类的权重等于一个id 当权重一样时,以后设置的为准 通过继承而来的,权重为0 !important (设置权重无限大)可以影响权重,但只能影响选中的, ...
随机推荐
- 长沙理工大学第十二届ACM大赛-重现赛 D 小M和天平 （01背包）
链接:https://ac.nowcoder.com/acm/contest/1/D 来源:牛客网 小M和天平 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言 ...
- New Machine Learning Server for Deep Learning in Nuke（翻译）
最近一直在开发Orchestra Pipeline System,歇两天翻译点文章换换气.这篇文章是无意间看到的,自己从2015年就开始关注机器学习在视效领域的应用了,也曾利用碎片时间做过一些算法移植 ...
- GUI学习之二十四——QDialog学习总结
今天学习对话框输入控件的基类(QDialog). 一.描述 是对话类窗口(字体框.颜色选择.文件选择框等)的基类. 对话框窗口是顶级窗口(就是说不包含于哪个父类的显示界面里),主要用于短期任务和与用户 ...
- python基础练习题2
01:python九九乘法表 for i in range(1,10): for j in range(1,i+1): print('{}*{}={}'.format(j,i,i*j),end='\t ...
- php内置函数分析之array_chunk()
PHP_FUNCTION(array_chunk) { int argc = ZEND_NUM_ARGS(), num_in; zend_long size, current = ; zend_str ...
- 浅析拯救小矮人的 nlogn 算法及其证明
浅析拯救小矮人的 nlogn 算法及其证明 题型简介: 有 $ n $ 个人,第 $ i $ 个人身高 $ a_i $ 手长 $ b_i $ ,他们为了从一个高为 $ H $ 的洞中出去,决定搭人梯. ...
- 数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- JavaScript正则表达式简介（一）
一.正则表达式 正则表达式Regular Expression,可以简写为regexp.regex或是RE. 正则表达式使用单个字符串来描述或是匹配一系列符合某个句法规则的字符串模型. 按照某种规则去 ...
- HTML和CSS实现的透明登录框效果
实现代码 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- HOJ 2315 Time（模拟）
Description Kim是一个掌控时间的大师.不同于一般人,他习惯使用秒来计算时间.如果你问他现在是几点,他会告诉你现在是今天的xxxx秒.Mik想要考考Kim.他想知道从某一天的00:00:0 ...