CSS选择器及其权重
#转载请留言联系
1、标签选择器
标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
举例：
div{color:red}
......
<div>这是第一个div</div> <!-- 对应以上样式 -->
<div>这是第二个div</div> <!-- 对应以上样式 -->
2、类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>
3、层级选择器
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
举例：
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
<span>....</span>
<a href="#" class="pink">....</a>
<a href="#" class="gold">...</a>
</div>
<span>....</span> # 没有样式
<a href="#" class="pink">....</a> # 没有样式
4、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：
#box{color:red}
......
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。 举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold} <div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
6、伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:hover{
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
当鼠标放在“百度”这两个字上面时，下划线消失，这就是伪类选择器的功能。
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1
CSS选择器及其权重的更多相关文章
- CSS选择器的权重与优先规则？
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- 常见CSS选择器的权重和优先级
一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...
- CSS选择器的权重与优先规则
权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”. 原文:http://w ...
- css选择器的权重
权重会叠加!
- CSS选择器的权重与优先规
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: ...
- css选择器权重、样式继承、默认样式
学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...
- css优先级和权重
1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器
最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...
随机推荐
- BZOJ 4408 FJOI2016 神秘数 可持久化线段树
Description 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数.例如S={1,1,1,4,13},1 = 12 = 1+13 = 1+1+14 = 45 = 4+16 ...
- winform 不同语言（中文，英文等）
Visual Studio 对于.NET 程序的本地化提供了完整的支持,这里仅介绍实现多语言版本本地化程序的简单步骤.注意黑体处为关键点.一. 窗体本地化 对于Windows 窗体,你需要做的第 ...
- hbase1.2.6完全分布式安装
环境,参考之前的两篇博文: jdk1.7 hadoop2.6.0 完全分布式 一个master,slave1,slave2,slave3 zookeeper3.4.6 完全分布式 安装与配置:(以下步 ...
- J2EE开发实战基础系列一 HelloWorld
开始咱们的第一个程序,首先是配置环境,按照上一章所描述的方式下载开发工具,然后配置Java环境变量,给大家看下具体的结构: 环境变量配置OK的提示,如上图. Eclipse和Tomcat的文件目录位置 ...
- 集大通APP案例分析
前言 很多同学有误解: 软件工程课是否就是理论课? 或者是几个牛人拼命写代码,其他人打酱油的课? 要不然就是学习一个程序语言,搞一个职业培训的课? 都不对!软件工程有理论,有实践,更重要的是分析,思辨 ...
- [洛谷P3935]Calculating
题目大意:设把$x$分解质因数的结果为$x=p_1^{k_1}p_2^{k_2}\cdots p_n^{k_n}$,令$f(x)=(k_1+1)(k_2+1)\cdots (k_n+1)$,求$\su ...
- 2017 湖南省赛 K Football Training Camp
2017 湖南省赛 K Football Training Camp 题意: 在一次足球联合训练中一共有\(n\)支队伍相互进行了若干场比赛. 对于每场比赛,赢了的队伍得3分,输了的队伍不得分,如果为 ...
- 【CF MEMSQL 3.0 A. Declined Finalists】
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- 【BZOJ 3172】[Tjoi2013]单词 AC自动机
关于AC自动机:一个在kmp与Trie的基础上建立的数据结构,关键在于Trie树结构与fail指针,他们各有各的应用.在AC自动机里最典型的就是多串匹配,原本效率为O(n*l+n*l+m*l),(n是 ...
- 【NOIP 模拟赛】区间第K大(kth) 乱搞
biubiu~~~ 这道题就是预处理,我们就是枚举每一个数,找到左边比他大的数的个数以及其对应的区间,右边也如此,我们把左边的和右边的相乘就得到了我们的答案,我们发现这是O(n^3)的,但是实际证明他 ...