CSS3 新增选择器的实例


Posted in HTML / CSS onNovember 13, 2019

结构(位置)伪类选择器(CSS3)

  • :first-child :选取属于其父元素的首个子元素的指定选择器
  • :last-child :选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
  • :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式​
li:first-child { /*  选择第一个孩子 */
                color: pink; 
            }
li:last-child {   /* 最后一个孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
                color: skyblue;
            }

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }
<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>
input[type=text]
div[class*=tao]

伪元素选择器(CSS3)

  • E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  • E::first-line 文本第一行;
  • E::selection 可改变选中文本的样式;
p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}
p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素

之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查

注意

伪元素:before和:after添加的内容默认是inline元素**;这个两个伪元素的content属性,表示伪元素的内容,设置:before和:after时必须设置其content属性,否则伪元素就不起作用。

总结

以上所述是小编给大家介绍的CSS3 新增选择器的实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 #HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 #HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 #HTML / CSS
CSS3 边框效果
Nov 04 #HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 #HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 #HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 #HTML / CSS
You might like
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue实现计步器功能
2019/11/01 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python制作websocket服务器实例分享
2016/11/20 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
linux下进程间通信的方式
2014/12/23 面试题
办护照工作证明范本
2014/01/14 职场文书
教学改革实施方案
2014/03/31 职场文书
高中学生期末评语
2014/04/25 职场文书
自查自纠工作总结
2014/10/15 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
承诺函范文
2015/01/21 职场文书
2015年中秋寄语
2015/07/31 职场文书
python munch库的使用解析
2021/05/25 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript