CSS3 新增选择器：伪类选择器和属性选择器

一、结构（位置）伪类选择器（ : ）

1、:first-child

2、:last-child

3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)

<body><ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li>我是第四个</li><li>我是第五个</li><li>我是第六个</li><li>我是第七个</li><li>我是第八个</li><li>我是第九个</li><li>我是第十个</li></ul>
</body>

<style>ul li:first-child{/* 选择第一个li */    background: rgb(228, 22, 22);}ul li:last-child {/* 选择最后一个li */background: rgb(109, 18, 212);}ul li:nth-child(6){/* 选择第n个li */background: rgba(140, 214, 19);}ul li:nth-child(2n){/* 选择偶数li（注：n=0,1,2,3,4……） */font-size: 20px;}ul li:nth-child(2n+1){/* 选择奇数li（注：n=0,1,2,3,4……） */font-size: 12px;}</style>

二、属性选择器（[ ]）

1、[ 属性 ]

2、可以和正则表达式混用，如 $ 和 ^ 和 *

<body><ul><li class="test">我是第一个</li><li class="two123">我是第二个</li><li class="twotabc">我是第三个</li><li class="abcfour">我是第四个</li><li class="ggg-four">我是第五个</li><li class="bug">我是第六个</li><li class="bug_ee">我是第七个</li><li class="hhbug">我是第八个</li><li class="bug345">我是第九个</li><li class="test">我是第十个</li></ul>
</body>

<style>ul li[class=test] {/* 选择有属性为class=test的li（第一个和第十个） */background: rgb(206, 25, 25);}ul li[class$=four]{/* 选择属性里结尾有four的类名的li（第四个和第五个）*/background: rgb(106, 9, 216);}ul li[class^=two]{/* 选择属性里开头有two的类名的li（第二个和第三个） */background: rgb(54, 201, 10);}ul li[class*=bug]{/* 选择属性里所有带有bug的类名的li（第六、七、八、九个） */font-size: 30px;}</style>

转载于:https://www.cnblogs.com/EricZLin/p/8856614.html

CSS3 新增选择器：伪类选择器和属性选择器相关推荐

CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器其他伪类选择器 1.结构性 ...
html新增伪类,CSS3新增的伪类有哪些与居中div的多种方法
CSS3新增伪类有那些? p:first-of-type:选择属于其父元素的首个元素 p:last-of-type:选择属于其父元素的最后元素 p:only-of-type:属于父元素的特定类型的 ...
html5新增的伪类选择器有,CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
03-高级选择器,属性选择器,伪类选择器
高级选择器分为: 后代选择器子代选择器并集选择器交集选择器后代选择器使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{color: red; ...
html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签（代码实例）...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
html5子代选择器,伪类、子代、毗邻选择器 — IE6已逝，这些优秀的选择器你怎能不用？...
那些被遗忘的选择器在IE6~8"统治"网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍弃.而今,IE6已逝 ...
第7章-选择器+伪类
一.选择器 1.基础选择器通配符选择器标签/元素选择器类选择器 id选择器 2.高级选择器 E,F (多元素选择器) 同时匹配所有E元素或F元素,E和F之间用逗号分隔 eg: div,p{wid ...
css3-属性选择器伪类:root :not() :first-of-type :first-child 伪元素 ::first-letter ::first-line ::selection等等
用户代理(User Agent,简称UA)是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等属性选择器语法 E[a ...
前端 CSS的选择器伪类选择器
伪类选择器常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中没有访问的超链接a标签样式: a:link {color: blue; } <!DOCTYPE html> < ...

CSS3 新增选择器：伪类选择器和属性选择器

CSS3 新增选择器：伪类选择器和属性选择器相关推荐

最新文章

热门文章