CSS3新增选择器

最新推荐文章于 2022-07-19 11:31:45 发布

jiang981124

最新推荐文章于 2022-07-19 11:31:45 发布

阅读量129

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/jiang981124/article/details/120966715

版权

这篇博客详细介绍了CSS3中的新增选择器，包括属性选择器（如^=$=*=）、结构伪类选择器（如:nth-child()和:nth-of-type()）和伪元素选择器（如::after和::before）。通过实例解析了如何利用这些选择器更精确地选取和操作DOM元素，同时强调了选择器优先级的概念，帮助开发者更好地理解和应用CSS3选择器。

摘要由CSDN通过智能技术生成

CSS3复习之选择器

CSS3选择器

CSS3选择器

CSS3增加了属性选择器、结构伪类选择器和伪元素选择器

属性选择器

属性选择器可以看作css中的“正则表达式”，按照规则选出元素。
例如html中有很多div盒子，其中有两个类分别为box1和box2的盒子，为了把这两个盒子选出来可以用属性选择器

div[class^=“box”] 选择具有class属性并以"box"开头的的div元素
div[class=“box”]选择class属性并等于"box"的div元素
div[class$=“box”]选择class属性以"box"结尾的div元素
div[class*=“val”]选择class属性中含有"box"值的div元素
div[class]选择有class属性的div元素(如果所有div都分配了一个类名，那么都选中)

结构伪类选择器

结构伪类常用来找某个元素符合条件的子元素。
注意的是n-child和nth-of-type的区别，如果ul中只有li子元素，那么二者无差别，但如果像下面一样，含有别的元素。那么注意
在这里插入图片描述

nth-child是按照子级来算的，子级可能不是一种类型，有p有li等
nth-of-type是先指定子级
因此如果想把偶数个li的背景颜色改变，要使用nth-of-type(2n)

<style>
  li:nth-child(3) {
    background-color: red;
    /*不起作用，因为li所在父级的第三个子元素不是li而是p*/
  }

  p:nth-child(3) {
    background-color: red;
    /*起作用！！先匹配p所在父元素的第三个子元素，*/
  }

  li:nth-of-type(6) {
    background-color: green;
    /*先匹配li，找到li中的第6个，并把它的颜色改成绿色*/
  }
</style>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <p>哈哈哈哈</p>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <p>呵呵呵呵</p>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</body>

伪元素选择器

伪元素选择符只有::after, ::before，分别表示在元素内部的后面、前面插入内容。之所以叫伪元素，是因为在dom里找不到该元素，而且这个元素属于行内元素。而且伪元素必须有content属性，伪元素常常用来插入字体图标，配合iconmoon或者阿里图库使用。

CSS选择器优先级

如果加上以上三个新选择器，css中选择器优先级顺序如下：
!important > 行内样式 > id选择器 > 类选择器 = 属性选择器 = 结构伪类选择器 > 标签选择器 > 通配符选择器 > 继承 > 浏览器自定义

jiang981124

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增选择器

CSS3复习之选择器CSS3选择器属性选择器结构伪类选择器伪元素选择器CSS选择器优先级CSS3选择器CSS3增加了属性选择器、结构伪类选择器和伪元素选择器属性选择器属性选择器可以看作css中的“正则表达式”，按照规则选出元素。例如html中有很多div盒子，其中有两个类分别为box1和box2的盒子，为了把这两个盒子选出来可以用属性选择器div[class^=“box”] 选择具有class属性并以"box"开头的的div元素div[class=“box”]选择class属性并等于"box
复制链接

扫一扫