荐 CSS3——CSS3 新增选择器

更新时间:2023-04-07 12:34:11 阅读：评论：0

天空之外

结构(位置)伪类选择器（CSS3)案例属性选择器案例伪元素选择器（CSS3)4. E::before和E::after案例: 伪类与 :: 伪元素注意案例

结构(位置)伪类选择器（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;        }

案例

<!DOCTYPE html><html lang="en"><head><meta chart="UTF-8"><title>Document</title><style> /*a:hover 鼠标经过a链接的时候 */ ul li { list-style: none; } ul li:first-child { background-color: pink; } ul li:last-child { background-color: pink; } li:nth-child(3) { /*选择第3个 */ background-color: purple; } li:nth-child(even) { /* even 选择所有的偶数*/ background-color: pink; } li:nth-child(odd) { /* odd 选择所有的奇数*/ background-color: purple; } li:nth-child(2n) { /* n = 0 1 2 3 4 5 2n 0 2 4 6 8 10...开始 2n 类似于even*/ background-color: pink; } li:nth-child(2n+1) { /*奇数 odd*/ background-color: pink; } li:nth-child(4n) { /* 4.8.12 */ background-color: blue; } </style></head>小学一年级班主任工作计划<body><ul><li>我的错热风</li><li>我的错热风</li><li>我的错热风</li><li>我的错热风</li><li>爱上对方过后就哭了</li><li>爱上对方过后就哭了</li><li>爱上对方过后就哭了</li><li>爱上对方过后就哭了</li><li>爱上对方过后就哭了</li></ul></body></html>

属性选择器

（其中有正则的知识，在这先了解怎么用就行了，后面的文章会学）
选取标签带有某些特殊属性的选择器我们成为属性选择器

class^=font 表示 font 开始位置就行了class$=footer 表示 footer 结束位置就行了class*=tao *= 表示tao 在任意位置都可以

/* 获取到 拥有 该属性的元素 */div[class^=font] { /* class^=font 表示 font 开始位置就行了 */color: pink;}div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */color: skyblue;}div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */color: green;}

案例

<!DOCTYPE html><html lang="en"><head><meta chart="UTF-8"><title>Document</title><style> div[class] { /*选出所有 带有 class 属性的*/ background-color: pink; } div[class=demo] { /* 选出 class = demo 的*/ background-color: yellow; } div[class^=test] { /*选出test 开头的 标签*/ background-color: purple; } div[class$=test] { /*选出test 结束的 标签 ^ $ */ background-color: red; } </style></head><body><div class="demo">属性选择器例子</div><div>属性选择器例子</div><div>属性选择器例子</div><div>属性选择器例子</div><div>属性选择器例子</div><div>属性选择器例子</div><div class="firsttest">属性选择器例子</div><div class="test">属性选择器例子</div><div class="test1">属性选择器例子</div><div class="test2">属性选择器例子</div><div class="test3">属性选择器例子</div></body></html>

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）E::first-line 文本第一行；E::lection 可改变选中文本的样式；

p::first-letter {  font-size: 20px;  color: hotpink;}/* 首行特殊样式 */p::first-line {  color: skyblue;}p::lection {  /* 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，这样做的目的是用来做兼容处理。

案例

代码分析

源代码

<!DOCTYPE html><html lang="en"><head><meta chart="UTF-8"><title>Document</title><style> div::before { /*必须带一个属性 content 伪元素 其实这个 before 是个盒子*/ /* 这个盒子是行内的盒子 可以转换*/ content: "我"; width: 200px; height: 200px; background-color: pink; display: block; } div::after { content: "18岁"; } </style></head><body><div>今年</div></body></html>

: 伪类与 :: 伪元素

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

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

注意

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

案例

<!DOCTYPE html><html lang="en"><head><meta chart="UTF-8"><title>Document</title><style> p::first-letter { /* 选择第一个字*/ font-size: 100px; } .pp::first-line { /*第一行*/ color: red; } p::lection { /*选择文字时候的状态*/ background-color: pink; color: yellow; } </style></head><body><p class="pp">中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 </p><p>p北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!</p></body></html>