css的高级选择器使用

小康代码

已于 2023-12-20 15:51:43 修改

阅读量687

点赞数 14

文章标签： css 前端 html html5 开发语言青少年编程

于 2023-12-16 09:49:27 首次发布

本文链接：https://blog.csdn.net/h3197/article/details/135028748

版权

CSS高级选择器是一种用于选择特定元素的方法。它们允许我们根据元素的特定属性、层次关系、状态等进行选择。

下面是一些常用的CSS高级选择器：

CSS层次选择器是一种CSS选择器，用于选择HTML文档中特定的元素，其选择器由两个或多个选择器组合而成，中间用空格隔开。

1.层次选择器：

后代选择器：通过元素的后代关系进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>p段落</p>
</div>
</body>
</html>

效果图：
在这里插入图片描述

子元素选择器：通过父元素与子元素的直接关系进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div > p{
            color: orange;
        }
    </style>
</head>
<body>
<div>
    <p>p段落</p>
</div>
</body>
</html>

效果图：
在这里插入图片描述

相邻兄弟选择器：通过相邻兄弟元素的关系进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1+p{
            color: skyblue;
        }
    </style>
</head>
<body>
<div>
    <p>p段落</p>
    <p class="p1">p1</p>
    <p>p2</p>
</div>
</body>
</html>

效果图：
在这里插入图片描述

通用兄弟选择器：通过兄弟元素的关系进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1~p{
            color: pink;
        }
    </style>
</head>
<body>
<div>
    <p>p段落</p>
    <p class="p1">p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</div>
</body>
</html>

效果图：
在这里插入图片描述

2.结构伪类选择器：

CSS结构伪类选择器用于根据元素在文档树中的位置来选择元素。以下是一些常用的CSS结构伪类选择器：

:first-child：选择作为其父元素的第一个子元素的元素。

E F:first-child--->(父元素E下面的第一个子元素F)

效果图：
在这里插入图片描述

:last-child：选择作为其父元素的最后一个子元素的元素。

E F:last-child--->( 父元素E下面的最后一个子元素F)

效果图：
在这里插入图片描述

:nth-child(n)：选择作为其父元素的第n个子元素的元素，n是一个整数。

E F:nth-child--->( 父元素E下面的第n个子元素F)

效果图：
在这里插入图片描述

:first-of-type：选择作为其父元素的特定类型的第一个子元素的元素。

E F:first-of-type--->(父元素E下面第一个类型为F的子元素)

效果图：
在这里插入图片描述

:last-of-type：选择作为其父元素的特定类型的最后一个子元素的元素。

E F:last-of-type--->(父元素E下面最后一个类型为F的子元素)

效果图：
在这里插入图片描述

:nth-of-type(n)：选择作为其父元素的特定类型的第n个子元素的元素，n是一个整数。

E F:nth-of-type(n)--->(父元素E下面n个类型为F的子元素)

效果图：
在这里插入图片描述

3.属性选择器：

CSS属性选择器是一种CSS选择器，它允许选择具有特定属性和属性值的元素。属性选择器使用方括号（[]）来选择具有特定属性值的元素。

属性选择器：[attribute] 选择具有指定属性的元素。

E[F]-->在E标签里面有F属性，就可以被选择

效果图：
在这里插入图片描述

属性值选择器：[attribute=value] 选择具有指定属性值的元素。

E[F="val"]-->在E标签里面不仅有F属性， 而且F属性值为val，就可以被选择

效果图：
在这里插入图片描述

后缀匹配属性选择器：[attribute$=value] 选择属性值以指定值结尾的元素。

E[F$="v"]-->在E标签里面不仅有F属性， 而且F属性值结尾为v，就可以被选择

效果图：
在这里插入图片描述

子串匹配属性选择器：[attribute*=value] 选择属性值中包含指定值的元素。

E[F*="v"]-->在E标签里面不仅有F属性， 而且F属性值包含为v的，就可以被选择

效果图：
在这里插入图片描述

前缀匹配属性选择器：[attribute^=value] 选择属性值以指定值开头的元素。

E[F^="v"]-->在E标签里面不仅有F属性， 而且F属性值开头为v，就可以被选择

效果图：
在这里插入图片描述

class选择器	class选择器
class选择器	.class{}
id选择器	#id{}
后代选择器	E F{}
子代选择器	E>F{}
相邻选择器	E+F{}
通用选择器	E~F{}
E F:first-child	(父元素E下面的第一个子元素F)
E F:last-child	( 父元素E下面的最后一个子元素F)
E F:nth-child	( 父元素E下面的第n个子元素F)
E F:first-of-type	(父元素E下面第一个类型为F的子元素)
E F:last-of-type	(父元素E下面最后一个类型为F的子元素)
E F:nth-of-type	(父元素E下面n个类型为F的子元素)

这些结构伪类选择器可以用来更精确地选择HTML元素，使得CSS样式能够更好地应用于特定位置的元素。

小康代码

关注

14
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
css的高级选择器使用

CSS高级选择器是一种用于选择特定元素的方法。它们允许我们根据元素的特定属性、层次关系、状态等进行选择。下面是一些常用的CSS高级选择器：CSS层次选择器是一种CSS选择器，用于选择HTML文档中特定的元素，其选择器由两个或多个选择器组合而成，中间用空格隔开。
复制链接

扫一扫