#转载请留言联系
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选择器及其权重的更多相关文章

  1. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  2. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

  3. CSS选择器的权重与优先规则

    权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”.   原文:http://w ...

  4. css选择器的权重

    权重会叠加!

  5. CSS选择器的权重与优先规

    我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: ...

  6. css选择器权重、样式继承、默认样式

    学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...

  7. css优先级和权重

    1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

随机推荐

  1. python之*args和**kwargs参数，以及迭代器

    *args让函数可以接受不限制多个位置参数,**kwargs让函数可以接受不限制多个关键字参数,用法如图 2.迭代器总结

  2. http短连接大量time wait解决方案

    tcp连接是网络编程中最基础的概念,基于不同的使用场景,我们一般区分为“长连接”和“短连接”,长短连接的优点和缺点这里就不详细展开了,有心的同学直接去google查询,本文主要关注如何解决tcp短连接 ...

  3. [转] UnityVS(Visual Studio Tools For Unity)的安装与使用

    一些废话 Unity 的开发者们,尤其是微软系的Unity开发者们,用Mono是不是烦死了?你是不是跟我一样,用vs来写代码,用Mono来跟踪调试?好麻烦啊好麻烦. 也许你会说,傻逼你不会用Unity ...

  4. 【SSH】——hql的使用方式及实现原理

    [含义] hql,即Hibernate Query  Language.它与我们熟知的sql很类似,它最大的特点就是对查询进行了面向对象的封装,下面会在具体例子中说明. sql查询的是数据库中的表或字 ...

  5. web颜色转换为delphi

    今天在写写一个日志浏览和报警功能时,要求用多种颜色去显示不同的信息,客户给出的颜色是web的 rgb颜色,就是用6位16进制数去表示的颜色,直接把他赋值给Delphi的TColor变量,发现显示的颜色 ...

  6. Impala-1

    Impala相关操作上   阅读目录 序 数据库相关 表相关 系列索引 序 上一篇,我们介绍Impala的介绍及安装.   下面我们开始继续进一步的了解Impala的相关操作. 数据库相关 一:创建 ...

  7. HihoCoder 1480:矩阵填数 (杨氏矩阵 || 钩子公式 + 筛逆元)

    描述 小Hi在玩一个游戏,他需要把1, 2, 3, ... NM填入一个N行M列的矩阵中,使得矩阵每一行从左到右.每一列从上到下都是递增的. 例如如下是3x3的一种填法: 136 247 589 给定 ...

  8. LinuxUnix time时间戳的处理转换函数

    Linux/Unix time时间戳的处理转换函数 linux下的时间函数 我们在编程中可能会经常用到时间,比如取得系统的时间(获取系统的年.月.日.时.分.秒,星期等),或者是隔一段时间去做某事,那 ...

  9. vue的nextTick的实现

    vue的nextTick是用浏览器支持的方法模拟nodejs的process.nextTick 老版本的vue用如下方法来模拟 Promise.thenMutationObserver(Mutatio ...

  10. nm用法小记

    nm用于显示目标文件的符号,也是二进制工具集(info binutils)里的一员 先来看一个例子,源码和对应的命令结果 四部分分别表示的意义 符号所在的obj文件名 符号的值,这里应该是指符号所在段 ...