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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php实现的用户查询类实例
2015/06/18 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
JavaScript实现修改伪类样式
2017/11/27 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python实现连连看游戏
2020/02/14 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
出国考察邀请函
2014/01/21 职场文书
派出所所长先进事迹
2014/05/19 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript