上周我们讲解了页面浮动之后产生的问题,以及针对这个问题所采取的措施——清浮动,同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题,那其中就包含了CSS选择器的详解,选择器的优先级介绍以及所有选择器的权重计算等一系列的问题。
上周给出的作业是罗列清浮动的方法,大家如果查看了文章,相信都能得到答案,所以小编这边就简要的讲述下吧!清浮动方法:空标签清浮动、br标签清浮动、父级浮动、父级设置overflow、伪元素清浮动。如果大家还有疑问,可以回复“浮动”到“HTML5学堂”的公众号即可查看浮动的相关文章。
继上次在实现布局的那篇文章里面给大家分享了三种基本的选择器以外,有好多人也在想难道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选择器的优先级就好像在学校里,谁更有话语权,比如说:
班级同学相互说过年放假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大的,所以,前者的优先级级别更高。
例如:
例如:
分析:类选择器权重值为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>
最终结果如何,大家还是动手实现一下吧~