CSS3中新增选择器有哪些，怎么运用

发布时间：2023-09-26 14:53:40 所属栏目：语言来源：

导读：这篇文章给大家分享的是“CSS3中新增选择器有哪些，怎么使用”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

结构(位置)伪类选择器（CSS3)

这篇文章给大家分享的是“CSS3中新增选择器有哪些，怎么使用”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

结构(位置)伪类选择器（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属性，否则伪元素就不起作用。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!