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 弹性布局快速入门
Jun 06 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
CSS filter 有什么神奇用途
May 25 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新手NOTICE错误常见解决方法
2011/12/07 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
Javascript注入技巧
2007/06/22 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python re模块findall()函数实例解析
2018/01/19 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python分数表示方式和写法
2019/06/26 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
考试诚信承诺书
2014/05/23 职场文书
大学生实习证明
2015/06/16 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python