CSS3 新增选择器(属性选择器、结构伪类选择器、伪元素选择器)

4 篇文章 0 订阅

CSS3 新增选择器

  CSS3 给我们新增了属性选择器结构伪类选择器伪元素选择器。让我们可以更加便捷,更加自由的选择目标元素。

忘了四种基础选择器赶紧复习一下吧
忘了四种复合选择器赶紧复习一下吧

一、属性选择器

  属性选择器可以根据元素特定的属性来选择元素,这样可以不用借助于类或 id 选择器。

选择符简介
E[att]选择具有 att 属性的 E 元素
E[att=“val”]选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=“val”]选择具有 att 属性且属性值以 val 开头的 E 元素
E[att$=“val”]选择具有 att 属性且属性值以 val 结尾的 E 元素
E[att*=“val”]选择具有 att 属性且属性值含有 val 的 E 元素
  • E[att]: 选择具有 att 属性的 E 元素
属性选择器1
  • E[att=“val”]:选择具有 att 属性且属性值等于 val 的 E 元素【重点】
属性选择器2
  • E[att^=“val”]:选择具有 att 属性且属性值以 val 开头的 E 元素
属性选择器3
  • E[att$=“val”]:选择具有 att 属性且属性值以 val 结尾的 E 元素
属性选择器4
  • E[att*=“val”]:选择具有 att 属性且属性值含有 val 的 E 元素
属性选择器5

  【注意】属性选择器的权重是 0,0,1,0。跟类选择器权重一样。选择器权重问题

二、结构伪类选择器

  结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器选择里面的子元素。

选择符简介
E:firse-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中的最后一个子元素E
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type匹配指定类型E的第一个子元素
E:last-of-type匹配指定类型E的最后一个子元素
E:nth-of-type(n)匹配指定类型E的第n个子元素
  • E:firse-child 和 E:last-child:匹配第一个和最后一个子元素
结构伪类选择器1
  • E:nth-child(n):可以选择符元素的一个或多个特定的子元素。其中括号后的参数n 可以是数字,关键字,或者是公式。

  数字: 选择第n个子元素,从1开始的。

结构伪类选择器2

  关键字: even(偶数),odd(奇数)。

结构伪类选择器3

  公式: 常见公式如下(n如果是公式则是从 0 开始的,但元素没有第 0 个或者n到了超出子元素个数时都会被忽略)

公式取值
n所有的子元素
2n偶数
2n+1奇数
5n5的倍数
n+5从第5个开始到最后
-n+5前5个(包含第5个)
结构伪类选择器4
结构伪类选择器5
结构伪类选择器6

  E:first-of-type、E:last-of-type、E:nth-of-type(n) 用法与E:first-child、E:last-child、E:nth-child(n)类似,区别如下:

  • E:first-child(n):表示在父元素中直接找到第n个子元素,再判断它是不是给定的类型E,如果是则写的样式有效,不是则不生效。

  • E:first-of-type(n):表示先把父元素中所有是类型E的子元素找出来排序,再选出找出的E子元素中的第n个,如果有则设置为相应的样式。没有则不生效。

三、伪元素选择器【重点】

  伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

  两个重要的伪元素是::before、::after。伪元素前面是用两个冒号表示。

  • :: before:在元素内部的前面插入内容

  • :: after:在元素内部的后面插入内容

【注意几点:】

  • before 和 after 创建的元素属于行内元素
  • before 和 after 创建的元素在文档树中找不到,所以称之为伪元素
  • 语法:element::before{}
  • before 和 after 必须要有 content 属性
  • 伪元素选择器和标签选择器权重一样:0,0,0,1
伪元素选择器使用场景1:伪元素字体图标

  利用伪元素制作下图:

结构伪类选择器6
div {
    position: relative;
    width: 200px;
    height: 35px;
    border: 1px solid red;
    margin: 5px auto;
}
div::after{
    content: '\e609';			// 下三角图标编码
    font-family: 'iconfont';	// 阿里字体图标
    position: absolute;
    top: 8px;
    right: 10px;  
}

  字体图标的使用参看:CSS字体图标的使用

伪元素选择器使用场景2:仿土豆视频效果

  利用伪元素为土豆视频添加鼠标进过显示遮罩层:

结构伪类选择器6
<style>
    .tudou {
        position: relative;
        display: inline-block;
        font-family: "iconfont";
        width: 220px;
        height: 125px;
        border: 1px solid red;
    }
    .tudou img {
        width: 100%;
        height: 100%;
    }
    .tudou::after {		// 添加伪元素
        content: "";
        display: none;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(85, 56, 56, 0.6) url(images/bofang.png) no-repeat center;
    }
    .tudou:hover::after{	// 鼠标移到tudou就让里面的after显示出来
        display: block;
    }
</style>
<body>
    <div class="tudou">
        <img src="images/shipin1.png" alt="">
    </div>
    <div class="tudou">
        <img src="images/shipin2.png" alt="">
    </div>
    <div class="tudou">
        <img src="images/shipin3.png" alt="">
    </div>
</body>
伪元素选择器使用场景3:伪元素清楚浮动

  为什么要清除浮动:当父盒子没有高度,而子盒子有浮动时会出现父盒子高度为0(因为浮动的元素不占有位置),会影响下面的标准流盒子。视频链接

<style>
    .one {
        border: 1px solid red;
    }
    .one span{
        /* float: left; */	// 浮动代码
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: pink;
    }
    .two {
        height: 50px;
        background-color: gray;
    }
</style>
<body>
    <div class="one">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="two"></div>
</body>

  div 中子盒子浮动前:

浮动前

  div 中子盒子添加浮动后:

浮动后
  • 额外标签法清除浮动(隔墙法):W3C推荐的方法

  在浮动元素后添加一个空的块级元素:

浮动后
<style>
    .one {
        border: 1px solid red;
    }
    .one span{
        float: left;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: pink;
    }
    .cc{			// 额外标签清除左右浮动
        clear: both;
    }
    .two {
        height: 50px;
        background-color: gray;
    }
</style>
<body>
    <div class="one">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <div class="cc"></div>	// 添加的额外标签
    </div>
    <div class="two"></div>
</body>
添加额外标签后清除了浮动
  • 给父级添加 overflow

  可以给父级添加 overflow 属性,将其属性值设置为 hidden、auto 或 scroll。

<style>
    .one {
        border: 1px solid red;
        overflow: hidden;	//父级添加清除浮动代码
    }
    .one span{
        float: left;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: pink;
    }
    .two {
        height: 50px;
        background-color: gray;
    }
</style>
<body>
    <div class="one">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="two"></div>
</body>
  • 伪元素清楚浮动时额外标签法的一种升级和优化
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

  要清楚浮动的父元素加上类 clearfix 即可清除浮动,原理与额外标签法一样。

// 更常见的写法
.clearfix::before,.clearfix::after{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ItDaChuang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值