关于其他选择器以及选择器优先级详解

上周我们讲解了页面浮动之后产生的问题,以及针对这个问题所采取的措施——清浮动,同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题,那其中就包含了CSS选择器的详解,选择器的优先级介绍以及所有选择器的权重计算等一系列的问题。

本文内容概要:

1 上周作业讲解

2 CSS选择器介绍

3 选择器的优先级

4 选择器的权重值

一、上周作业讲解

上周给出的作业是罗列清浮动的方法,大家如果查看了文章,相信都能得到答案,所以小编这边就简要的讲述下吧!清浮动方法:空标签清浮动、br标签清浮动、父级浮动、父级设置overflow、伪元素清浮动。如果大家还有疑问,可以回复“浮动”到“HTML5学堂”的公众号即可查看浮动的相关文章。

二、CSS选择器介绍

继上次在实现布局的那篇文章里面给大家分享了三种基本的选择器以外,有好多人也在想难道CSS选择器就只有这三种吗?那小编的回答是:当然不止这三种啦。所以今天我们这篇文章就来给大家分享下我们CSS到底还有哪些其它的选择器可以用来布局使用的。

通配符选择器

基本语法:* { }。

特性:通配符表示所有的元素。

* {
    margin: 0;
    padding: 0;
    background-color: skyblue;
}


<div class="wrap">
    <h1>HTML5学堂</h1>
    <p>让HTML5技术通俗易懂~</p>
</div>

结果:

分析:选中网页里所有的html标签,并对其设置相应的样式;

群组选择器

基本语法: 选择器,选择器 { }, 多个选择器用逗号连接。

特性:多个样式可以合并书写,大大减少了代码量。

.nav, .footer {
   background-color: yellow;
    font-size: 20px;
}
.main {
    background-color: skyblue;
}


<div  class="wrap">
    <div  class="nav">我是头部</div>
    <div  class="main">我是内容区域</div>
    <div  class="footer">我是底部</div>
</div>

结果:

分析:.nav, .footer的意思是同时选中类名为nav和footer的标签,并对其设置相应的样式;

后代选择器

基本语法:选择器 选择器 { },多个选择器之间用空格隔开。

特性:可以减少书写类名,一个样式可以同时对应多个标签。

.wrap  div  {
  color:  red;
}


<div  class="wrap">
  <div>我是第一个标签</div>
  <div>我是第二个标签</div>
  <div>我是第三个标签<div>我在第三个标签里面</div></div>
</div>

结果:

分析:选中类名为wrap里面的所有的标签(只要是它的后代都能被选中),并对其设置相应的样式;

子代选择器

基本语法:选择器 > 选择器 { },多个选择器用 > 连接。

.wrap  >  div  {
  border-top:  5px  solid  gray;
}


<div  class="wrap">
  <div>我是第一个标签</div>
  <div>我是第二个标签</div>
  <div>我是第三个标签<div>我在第三个标签里面</div></div>
</div>

结果:

分析:选中类名为wrap的所有子代,因为“<div>我在第三个标签里面</div>”该标签不是它的子代,所以没有出现边框的样式;

子代和后代选择器的区别

子代和后代的区别在于,后代选择器,只要都是父级的后代,都可以被选中,类似同一家族关系,只要是后代都能被选中。而子代只是父子关系才会被选中。

/* 后代选择器 */
.wrap .box {
    width: 300px;
    border: 1px solid #000;
    background: #cfc;
}
/* 子代选择器 */
.outer > .box {
    width: 300px;
    border: 1px solid #000;
    background: #ccf;
}


<div class="wrap">
    <div class="box">
        wrap的第一个box
        <div class="box">wrap的第二个box</div>
    </div>
</div>


<div class="outer">
    <div class="box">
        wrap的第一个box
        <div class="box">wrap的第二个box</div>
    </div>
</div>

结果:

分析:代码23行的标签不是类名为outer标签的子代,而是属于后代,所以.outer > .box没有被选中该标签;

伪类选择器

基本语法:选择器:hover { }。

a:link {
    color: red;
}
a:hover {
    color: purple;
}

Tips:伪类选择器在后期我们会做一个详解;

毗邻选择器

基本语法:选择器 + 选择器 { }。

.con  +  p  {
  background-color:  skyblue;
}


<div  class="wrap">
  <div  class="con">HTML5学堂</div>
  <p>利利</p>
  <p>堡堡</p>
  <p>祥辉</p>
</div>

结果:

兄长选择器

基本语法:选择器 ~ 选择器 { }。

.con  ~  p  {
  background-color:  skyblue;
}


<div  class="wrap">
  <div  class="con">HTML5学堂</div>
  <p>利利</p>
  <p>堡堡</p>
  <p>祥辉</p>
</div>

结果:

属性选择器

基本语法:标签名 [属性名=属性值]。

特性:如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

input[type=text]  {
  background-color:  skyblue;
}
a[title=html5]  {
  background-color:  yellow;
}
<div  class="wrap">
  <input  type="text"  name=""  value="">
  <input  type="password"  name=""  value="">
  <a  href=""  title="html5">HTML5学堂</a>
</div>

结果:

以上这些就是我们今天要给大家补充介绍的CSS选择器了,大家可以看着我们给出的代码例子,自己动手尝试使用一下,以实战的方式来掌握这些常见选择器的使用规则。

那我们现在暂时把思路返回到之前讲解的三种基本选择器上,假设我们现在对同一个div分别使用标签名选择器、类名选择器、id选择器设置不同的文字颜色,这时候页面最终会展示出来的是哪个颜色呢?面对这个问题的解答就需要我们接下来讲解的知识点才能够解决了——CSS选择器优先级。

三、 CSS选择器的优先级

优先级,这一概念到底要怎么解读呢?是否可以理解为我们生活中的级别问题,谁的级别大,就听谁的。

优先级例子

CSS选择器的优先级就好像在学校里,谁更有话语权,比如说:

班级同学相互说过年放假3天,这时候班主任过来了,说放假5天。你们听谁的?

那把生活与我们的代码相互挂钩起来,它们的对应关系就变成这样了:

1)标签内联样式 - 校长 - 在标签内书写最高;

2)ID选择器 - HTML5主管 – HTML5主管比讲师的级别更高;

3)class选择器 - HTML5讲师 – 多个讲师,都比不上一个主管的级别,但是管得了学生;

4)标签类型选择器 – h5学生 – 人数再多也比不过一个讲师的级别。

同类型选择器的比较遵照页面从上向下渲染的机制 – 谁后面来通知的,当然听后面的。

总结:CSS样式优先级分为4个等级,可以以这4种等级为依据确定CSS选择器的优先级。通常我们是以四位数 0 0 0 0 分别比较大小来计算优先级的。而这4位数分别对应的就是标签内书写(这个不属于选择器)、id选择器、类名选择器、标签名选择器。

下面我们就来看看三种基本选择器的优先级比较。

div {
    font-size: 40px;
    color: #f00;
}
.test {
    color: #0f0;
    background: #fcf;
}
#txt {
    color: #00f;
    background: yellow;
}
<div>这是div标签</div>
<div class="test">添加了类名这的div标签</div>
<div id="txt" class="test">添加了id名的div标签</div>

结果:

分析:当样式发生冲突的时候,需要考虑CSS选择器的优先级;类名test和id名txt给标签(代码15行)设置了background和color,因为id的选择器优先级(0 1 0 0)比类名选择器的优先级(0 0 1 0)高,所以最终渲染出来的是id的选择器的样式;

优先级的算法

通常计算方式是:通常我们用四位数字表示优先级,一位一位的进行比较。如,一种选择器的优先级是 0 1 1 0,另一种选择器的优先级是 0 1 0 2,那么就从第一位开始比较,两者均是0,此时看第二位,都是1,第三位,前者为1,后者为0,1自然是比0大的,所以,前者的优先级级别更高。

例如:

  • .wrap div的优先级为0 0 1 1;
  • #wrap .con的优先级为0 1 1 0;
  • #wrap .con div的优先级为0 1 1 1;

例如:

  1. <div class="con1 con2 con3 con4 con5 con6 con7 con8 con9 con10" id="con">设置了10个类选择器</div>

分析:类选择器权重值为0 0 1 0,那么此时的标签有十个类,不过这里需要注意此时的权重应该是0 0 10 0。因为优先级的计算是不会满十进位的,倘若有100个类名,那优先级的写法也是:0 0 100 0。

相信讲解到这里,大家对于优先级这个概念应该都有一定的了解了吧。下面我就把所有选择器的一个优先级的权重总结给大家。

四、 选择器的权重值

注意:通配符和继承样式权重都为0 0 0 0,但是单独使用的时候确为0,不过配合其他选择器就会是不一样的结果。

例子:

.out * {
    font-size: 40px;
}
.out .in {
    font-size: 20px;
}
<div class="out">
    <div class="in">
        <div class="iin">TEST</div>
    </div>
</div>

最终结果如何,大家还是动手实现一下吧~

五、课后作业

  1. 根据今天所学的知识点,把每种选择器都在实战中进行使用;
  2. 巧妙使用CSS选择器的优先级,尝试书写出不同的效果;

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏恰同学骚年

Unity3D游戏开发初探—4.开发一个“疯狂击箱子”游戏

  (1)如何在游戏脚本程序中创建对象而不是一开始就创建好对象?->使用GameObject的静态方法:CreatePrimitive()

1184
来自专栏Coco的专栏

不受控制的 position:fixed

1214
来自专栏企鹅号快讯

D3.js 满足你对数据可视化的一切幻想

D3.js D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript...

3048
来自专栏Python小屋

详解Python GUI版24点游戏制作过程

本文作者为浙江温州永嘉县教师发展中心应根球老师,电子邮箱:ycicada@163.com。 传统用扑克牌算24点游戏用于小学低中段学生训练四则运算效果不错,也可...

2715
来自专栏知晓程序

小程序也能做这么精致的动效?看完我给大神献上了膝盖…… | 开发

1223
来自专栏MixLab科技+设计实验室

设计师编程指南之Sketch插件开发 9 之 Shape中的oval

往期文章索引: 1 / 入门基本概念、page的相关操作 2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操...

2787
来自专栏Crossin的编程教室

【Pygame 第12课】 屡败屡战

打飞机游戏,我们已经做得差不多了。今天要再加上两个功能,让它看上去更完整:显示分数、重新开始。这样,玩家才能一次接一次地玩下去。 要显示分数,首先得有一个变量记...

2645
来自专栏Python数据科学

Seaborn从零开始学习教程(一)

最近在做几个项目的数据分析,每次用到seaborn进行可视化绘图的时候总是忘记具体操作。虽然seaborn的官方网站已经详细的介绍了使用方法,但是毕竟是英文,而...

881
来自专栏练小习的专栏

常用的命名

命名参考 常用的CSS命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:co...

1855
来自专栏阿炬.NET

【人在江湖飘,哪有不带刀】神器Jumony

2726

扫码关注云+社区