记录:CSS特殊性——权值规则
浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
css样式优先级: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
重要性
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
注意:!important要写在分号的前面
这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
记录:CSS特殊性——权值规则的更多相关文章
- CSS样式权值
内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet) 例外:但如果外部样式表放在内部样式表 ...
- css选择器权值
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p clas ...
- 【莫队算法】【权值分块】bzoj3920 Yuuna的礼物
[算法一] 暴力. 可以通过第0.1号测试点. 预计得分:20分. [算法二] 经典问题:区间众数,数据范围也不是很大,因此我们可以: ①分块,离散化,预处理出: <1>前i块中x出现的次 ...
- Codevs 1688 求逆序对(权值线段树)
1688 求逆序对 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 给定一个序列a1,a2,…, ...
- codevs1688 求逆序对(权值线段树)
1688 求逆序对 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 给定一个序列a1,a2,…, ...
- 权值线段树&&可持久化线段树&&主席树
权值线段树 顾名思义,就是以权值为下标建立的线段树. 现在让我们来考虑考虑上面那句话的产生的三个小问题: 1. 如果说权值作为下标了,那这颗线段树里存什么呢? ----- 这颗线段树中, 记录每个值出 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- CSS权值
选择器权值 标签选择器:权值为1 类选择器和伪类:权值为10 ID选择器:权值为100 通配符选择器:权值为0 行内样式:权值为1000 !important规则: 可调整样式规则的优先级 添加在样式 ...
- HTML/CSS权值继承
<style type="text/css">p{color:red;}.first{color:green;}/*因为权值高显示为绿色*/ span{color:pi ...
随机推荐
- linux修改hosts
vim /etc/hosts
- linux ubuntu设置root用户初始密码
输入 sudo passwd 命令,输入一般用户密码并设定root用户密码. 设定root密码成功后,输入 su 命令,并输入刚才设定的root密码,就可以切换成root了. 提示符$代表一般用户,提 ...
- JFinal Model判断数据库某条记录的属性字段是否包含空值
如果做报表,一条记录中有空值,使用FreeMarker渲染word会报错,并把错误日志输出到Word中.所以需要之前判断下当前记录中属性值是否有空值. package com.huijiasoft.u ...
- JFinal Web开发学习(一)开启HelloWorld
初次接触JFinal框架,接触过MVC思想,接触过Spring. JFinal官网: http://www.jfinal.com/ 之前很嫌弃JavaWeb开发,主要原因是繁琐的xml配置. 官方推荐 ...
- [z]eclipase优化
eclipse启动优化,终于不那么卡了! 网上找了好多都是myEclipse的优化的,跟eclipse有点区别,找了很多方法还是不能让这个eclipse(Version: Kepler Release ...
- ContenteProvider
以前只写过程序中添加背景音乐,在程序一开始就运行音乐,当程序结束后音乐也随即停止.遇到这样的功能,我们一般是通过系统提供的ContentProvider来实现的,系统对于常用的数据也给开发者提供了方便 ...
- 10.9h5日记
一.单位 1.px是基本的单位,像素 2.em也是一个单位,使用方式,用元素父级的字体大小乘以em前的数字,父级没有就向上一个父级找, 直到body为止,如果body没有,就用默认的字体大小16px ...
- React-router4 第三篇 BasicURL ParametersRedirects (Auth) 谷歌翻译:重定向
依旧是地址 https://reacttraining.com/react-router/web/example/auth-workflow 上来一步走 先导入模块 import React, { P ...
- 故障处理分析:华为5885v3 cable/ Interconnect (LEFT Panel)
故障现象: 处理结果: 1.重新把插左前面板,重启,故障消失.
- 转::before和::after伪元素的用法
一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-let ...