【前端小记】-- CSS--1.一些好用的CSS3选择器

最新推荐文章于 2024-05-20 22:08:52 发布

尤记昨日书

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量144

点赞数 1

分类专栏： CSS 前端小记文章标签： css css3 前端

xiaohui

本文链接：https://blog.csdn.net/am_xiao_hui/article/details/128202611

版权

前端小记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

CSS3选择器的介绍通过下面这个例子来分析：

<style>
      div {
           display: flex;
           background: beige;
       }
      h1, h2,h3,h4,h5,p,a {
           display: block;
           margin: 5px;
           font-weight: 400;
       }
       input {
           height: 10px;
           width: 10px;
       }
</style>
<body>
    <div class="text">
        <h1>我是h1</h1>
        <span class="shuxingvalue">
            <h3>我是h3</h3>
            <h4>我是h4</h4>
            <h5>我是h5</h5>
            <h5>我是h5</h5>
        </span>
        <h4>我是h4</h4>
        <h5>我是h5</h5>
        <h5>我是h5</h5>
        <span class="valueshuxing">
            <h4>我是h4</h4>
            <h4>我是h4</h4>
            <h4>我是h4</h4>
            <h4>我是h4</h4>
        </span>
        <span class="only">
            <h5>我是h5</h5>
        </span>
        <span></span>
        <a href="#text1">text1-a</a>
        <p id="text1">text1-p</p>
        <input type="text" disabled="true">
        <input type="text">
        <input type="checkbox">
    </div>
</body>

在这里插入图片描述

一、符号选择器

1、a ~ b（波浪号）
（1）a和b必须在同一父级下；
（2）会覆盖所有的b；

h1 ~ h5 { color: pink; } //表示在同一父级下的h1后面的所有h5标签。

在这里插入图片描述

2、a + b（加号）
（1）a和b必须在同一父级下；
（2）b必须是和a挨着的元素；
（3）只覆盖一个b；

h4 + h5 { color: pink; }//表示紧邻在h4后面的h5标签，作用于所有满足条件的元素

在这里插入图片描述

3、a > b（大于号）
（1）a必须是b的父级；
（2）b必须是a的下一级元素，对下二级元素不生效；
（3）会覆盖所有下一级的b；

.test > h4 { color: pink; }//.text是父级，则选中的是第一层子级的h4

在这里插入图片描述

二、属性选择器

注：E为元素，属性名为 attr ，若无E标签，则作用于全局。

1、E[attr^=“value”]
表示属性arr的属性值以“value”开头的E元素;

span[class^="shuxing"] { color: pink; }//表示类名以“shuxing”开头的span标签的元素

在这里插入图片描述
2、E[attr$=“value”]
表示属性arr的属性值以“value”结尾的E元素;

span[class$="shuxing"] { color: pink; }//表示类名以“shuxing”结尾的span标签的元素

在这里插入图片描述
3、E[attr=“value”]*
表示属性arr的属性值中包含“value”的E元素;

span[class*="sh"] { color: pink; }//选中的是类名中包含“sh”的span标签的元素

在这里插入图片描述

三、伪类选择器

注：在伪类选择器中的n代表的是父级内的子集顺序，E不必须是一个标签，也可以是一个类名。
1、E:nth-child(n)
（1）表示在E元素的父元素内的第n个E元素；
（2）E元素在父元素的位置顺序必须是n，二者是必须是相对应的；
（3）n的取值也可以代表选中的奇偶数:
E:nth-child(odd)或E:nth-child(2n+1)：选中在E的父元素内的顺序为奇数的E元素；
E:nth-child(even)或E:nth-child(2n)：选中在E的父元素内的顺序为偶数的E元素；

.shuxingvalue h4:nth-child(2) { color: pink; }//表示在.shuxingvalue元素内第二个孩子h4

在这里插入图片描述
2、E:nth-last-child(n)
和E:nth-child(n)同理，只不过它是从后面开始。

 .shuxingvalue h5:nth-last-child(2) { color: pink; }//表示在.shuxingvalue元素内倒数第二个孩子h5

在这里插入图片描述
3、E:nth-of-type(n)
（1）表示元素类型是E的第n个元素；
（2）和nth-child一样，n可以写成奇偶值；

.text h4:nth-of-type(1) { color: pink; }//表示在.text元素内的所有的层级内第一个元素类型是h4的元素；

在这里插入图片描述
4、E:first-of-type、E:last-of-type、E:only-of-type
（1）E:first-of-type：表示E元素所在的父元素内第一个元素类型是E的元素；
（2）E:last-of-type：表示E元素所在的父元素内最后一个元素类型是E的元素；
（3）E:only-of-type：表示E元素所在的父元素内只有一个元素类型是E的元素；

h4:first-of-type { color: pink; }//表示h4所在的父元素内的第一个元素类型为h4标签的元素

在这里插入图片描述
5、E:last-child、E:only-child
（1）E:last-child：表示E元素所在的父元素内最后一个孩子是E的元素；
（2）E:only-child：表示E元素所在的父元素内只有一个孩子是E的元素；

h4:last-child { color: pink; }//表示h4所在的父元素内最后一个孩子是h4的元素

在这里插入图片描述
6、:root
表示文档的根节点，对页面所有都生效；

:root { color: pink; }

在这里插入图片描述
7、E:empty
表示标签内容为空的元素。

:empty {
   width: 20px;
   height: 20px;
   background: pink;
}

在这里插入图片描述
8、E:target
该选择器选择的是一个 id 与当前 url 匹配的元素。

:target { color: pink; }//点击1之后2就变成粉色

在这里插入图片描述
9、E:not(s)
表示所有E元素中不符合参数选择器 s 描述的元素。

span:not(.shuxingvalue) { color: pink; }

在这里插入图片描述
10、E:enabled 、E:disabled、E:checked
（1）E:enabled：表示E元素不禁用时；
（2）E:disabled：表示E元素禁用时；
（3）E:checked：表示E元素点击时，一般用于 radio-button 或 checkbox；

input:disabled { background: pink; }

在这里插入图片描述

尤记昨日书

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端小记】-- CSS--1.一些好用的CSS3选择器

一、符号选择器**1、a ~ b（波浪号）**（1）a和b必须在同一父级下；（2）会覆盖所有的b；```cssh1 ~ h5 { color: pink; } //表示在同一父级下的h1后面的所有h5标签。```![在这里插入图片描述](https://img-blog.csdnimg.cn/958a1e9ddc8047d984dd1886801872ea.png)**2、a + b（加号）**（1）a和b必须在同一父级下；（2）b必须是和a挨着的元素；（3）只覆盖一个b；```c
复制链接

扫一扫