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

上周我们讲解了页面浮动之后产生的问题,以及针对这个问题所采取的措施——清浮动,同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题,那其中就包含了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 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

3397
来自专栏C/C++基础

CSS中常见的长度单位

注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。

902
来自专栏木子昭的博客

块元素, 内联元素, 内联块元素块元素(默认为父级宽度的100%,支持全部样式):内联元素(不支持宽高, 不支持margin上下, 不支持padding上下)内联块元素(从其它元素转换而来, disp

块元素(默认为父级宽度的100%,支持全部样式): body h1 , h2, h3, h4, h5, h6 p div li (条目) ul(定义无序列表, ...

3456
来自专栏超然的博客

Float 的那些事

  display:inline-block某种意义上的作用就是包裹(wrap),而浮动也有类似的效果。举个常见例子,或许您有实现宽度自适应按钮的经验,实现宽度...

753
来自专栏大数据钻研

CSS入门笔记 - 初识CSS

引言 上次给大家带来了html部分的笔记,大家的反馈让我非常开心?。 这次给大家带来css部分的第一篇笔记,由于本人比较蠢,学的很慢,而且css部分内容非常的细...

3546
来自专栏性能与架构

CSS选择器的性能优化

CSS选择器的性能排名(从最快者开始): (1)识别器:#id (2)类:.class (3)标签:div (4)相邻兄弟选择器:a + i (5)父类选择器:...

2967
来自专栏小李刀刀的专栏

[译]clearfix改良及overflow:hidden详解

原文:clearfix Reloaded + overflow:hidden Demystified clearfix 和 overflow:hidden 可算...

3468
来自专栏大数据钻研

CSS基础

CSS基础 CSS基础知识 选择器(重要!!!) 继承、特殊性、层叠、重要性 CSS格式化排版 单位和值 盒模型 浮动 相对定位与绝对定位 布局初探 CSS基础...

2705
来自专栏HTML5学堂

一步步实现静态页面布局

本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

47010
来自专栏张俊红

网页的修饰

总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

3557

扫描关注云+社区