IE6已逝,遗忘在角落的选择器,赶快用起来

那些被遗忘的选择器

在IE6~8“统治”网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍弃。而今,IE6已逝,赶紧把这些方便快捷的选择器用在日常的开发当中吧!

  • 伪类选择器 :first-child
  • 子代选择器 .wrap > p
  • 毗邻选择器 .con + p

伪类选择器 :first-child

说到:first-child,很多人会联想到:last-child,但是请务必注意::first-child和:last-child并非“师出同门”。

:first-child是CSS2版本时代提出的伪类选择器,得到了IE7及IE7以上的各个主流浏览器的支持;

:last-child是CSS3版本时代提出的伪类选择器,得到了IE9及IE9以上的各个主流浏览器的支持。

当IE6逝去,IE8还“苟延残喘”之时,:last-child这种CSS3选择器还不能够在PC平台施展拳脚。

:first-child的主要用途

替代传统的margin负值应用,解决“多个类似标签中,只有某个标签的边框或边距与其他不同”的需求。

:first-child的应用场景

:first-child代码实例

如上第一个场景的样式与结构代码:

<style>
    .con {
        padding: 20px;
        border: 1px solid black;
    }
    .con div {
        height: 50px;
        border-top: 2px dashed red;
        line-height: 50px;
    }
    .con div:first-child {
        border: none;
    }
</style>
<div class="con">
    <div>HTML5学堂</div>
    <div>原来技术可以通俗易懂</div>
    <div>每周一周四与您分享技术文章</div>
    <div>不定期更新“学堂闲谈”</div>
</div>

如上第二个场景的样式与结构代码:

<style>
    .box {
        width: 340px;
        border: 1px solid red;
    }
    .box div {
        float: left;
        width: 100px;
        height: 100px;
        margin-left: 20px;
        background: #39f;
    }
    .box div:first-child {
        margin: 0;
    }
</style>
<div class="box clearfix">
    <div>:first-child</div>
    <div>便捷的伪类选择器</div>
    <div>快快用起来</div>
</div>

子代选择器 >

子代选择器也是使用多个选择器的组合来找到要控制的标签,不同的选择器之间使用大于号“>”分隔。整体的原理与后代选择器类似,所不同的是,子代选择器仅仅选择到的是一代,而非所有后代。得到了IE7及IE7以上的各个主流浏览器的支持。

子代选择器基本语法

  1. 选择器名1 > 选择器名2 > … > 选择器名n {
  2. 属性名: 属性值;
  3. 属性名: 属性值;
  4. }

子代选择器的主要用途

起名字一直都是前端开发工程师的烦心事,子代选择器能够帮我们减少代码中的类名数量,同时,标签选择时的部分情况下,不需要刻意规避一些标签,选择起来更灵活。

子代选择器的应用场景

不采用子元素选择器时的结构代码

<div class="arc">
    <h1 class="tit"></h1>
    <p class="inf"></p>
    <div class="con">
        <h1></h1>
        <p></p>
        <h2></h2>
        <p></p>
    </div>
</div>

当不采用子元素选择器时,要考虑选择器的控制范围,由于在内容区域(类名为con的div)当中,会在此有可能出现h1~h6、p、ul、ol、div等各类标签,因此,针对“文章大标题”、“文字信息”以及“文章内容包含框”几个元素,就必须单独起类名,进行控制,使用“.arc .tit”“.arc .con”等后代选择器进行样式控制。

采用子元素选择器时的结构代码

<div class="arc">
    <h1></h1>
    <p></p>
    <div>
        <h1></h1>
        <p></p>
        <h2></h2>
        <p></p>
    </div>
</div>

当采用子代选择器的时候,类名为arc的div当中,第一层标签和第二层标签的样式,就可以进行单独控制,此时如果希望控制如上代码中第二级别的标签样式,只需要使用“.arc > h1”、“.arc > p”、“.arc > div”等选择器。如果希望控制第三级别甚至第四级别的标签样式,可以使用“.arc > div p”此类选择器来实现。

毗邻选择器 +

毗邻选择器,也称为相邻选择器。使用 + 号连接两个选择器。用于选择当前标签的下一个兄弟级元素。得到了IE7及IE7以上的各个主流浏览器的支持。

+(毗邻)与~(兄弟)

提到+(毗邻选择器),对CSS3比较熟悉的工程师有可能会想到~(通用兄弟选择器)。通用兄弟元素选择器是CSS3新增加的一种选择器,得到了IE9及IE9以上的各个主流浏览器支持。与毗邻选择器类似的地方在于:需要在同一个父元素之中。与毗邻选择器不同的地方在于:这种选择器将选择某元素后面的所有兄弟元素。

兄弟选择器语法

  1. E ~ F {/* 样式代码 */}

代码含义:匹配任何在E元素之后的同级F元素。

毗邻选择器的主要用途

相对:first-child和子选择器而言,毗邻选择器的使用场景比较少,可以利用该选择器来减少类名的设置。内容较多的列表部分可以使用该选择器。

毗邻选择器应用场景

如果不采用毗邻选择器,对于“文章分类、发布时间”、“作者、阅读量”这两行,就需要通过类名进行区分,例如如下结构:

<div class="arc">
    <h1><a href="" title=""></a></h1>
    <div class="kinds"><span></span><span></span></div>
    <p></p>
    <div class="author"><span></span><span></span></div>    
</div>

如果采用毗邻选择器,可以调整为如下结构:

<div class="arc">
    <h1><a href="" title=""></a></h1>
    <div><span></span><span></span></div>
    <p></p>
    <div><span></span><span></span></div>    
</div>

对于第一个div,可以使用“.arc > h1 + div”选择器选取,对于第二个div,可以使用“.arc > p + div”这个选择器选取。

好啦,几种选择器介绍完了,赶紧在自己的开发当中把它用起来吧~!

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

原文发表时间:2016-10-20

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(四)边框图片,过渡

并且,添加边框图片是以背景的方式添加的,所以会有可能文字覆盖在边框的情况,后面也会介绍处理方法。

361
来自专栏前端知识分享

第8天:CSS制作导航栏

今天主要学习了网页导航栏的制作。注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹...

541
来自专栏Coco的专栏

滚动视差?CSS 不在话下

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的...

2187
来自专栏HTML5学堂

各大公司移动端页面 - 导航的实现

HTML5学堂:伴随着科技的发展,出现了各种型号的手机,导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说,移动端的实现方法没有一个统一的标准,大家...

3147
来自专栏HTML5学堂

iconfont字体图标库

HTML5学堂小编的话:昨日发布的iconfont的内容有些不足,对于可能不太了解iconfont和特殊字体的学习者来说,可能会存在一定的理解问题,在此针对昨日...

4856
来自专栏天天

面向对象编程的思想

603
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之float

1、float的历史   float设计的初衷仅仅是为了文字环绕效果。   示例代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DT...

3375
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

1955
来自专栏数据小魔方

图表美化教程|图案与形状填充

今天跟大家分享简单的信息图制作方法——形状/图案填充法。 ▽▼▽ 今天教大家简单的图表形状填充。 ●●●●● 首先是一个已经做好的柱形图。 ? 每天都看着这样的...

2766
来自专栏IMWeb前端团队

移动端web开发入门笔记

移动端web开发基本上分为三种: 移动端网页开发 传统的页面开发,可以参考手机腾讯网。 移动端web app开发 简单来说就是在开发中使用一些浏览器私有的方法...

2029

扫码关注云+社区