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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
HTML中的表单Form实现居中效果
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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
如何实现JS函数的重载
2006/09/22 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
JS中的三个循环小结
2017/06/20 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python max内置函数详细介绍
2016/11/17 Python
Python制作刷网页流量工具
2017/04/23 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
浅析matlab中imadjust函数
2020/02/27 Python
基于python实现地址和经纬度转换
2020/05/19 Python
python打开文件的方式有哪些
2020/06/29 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
python集合的新增元素方法整理
2020/12/07 Python
Ado与Ado.net的相同与不同
2014/12/08 面试题
Why do we need Unit test
2013/01/03 面试题
企业法人授权委托书范本
2014/09/23 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
物业接待员岗位职责
2015/04/15 职场文书
永不妥协观后感
2015/06/10 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书