CSS选择器（属性选择器，关系选择器，伪类选择器，伪元素选择器）

最新推荐文章于 2022-03-31 17:07:06 发布

别Null.了

最新推荐文章于 2022-03-31 17:07:06 发布

阅读量1.2k

点赞数

分类专栏： css学习文章标签： css

本文链接：https://blog.csdn.net/TangJing_/article/details/117999756

版权

css学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。（常用在input中）

类别

(1)E[att^=value] ：是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。

例如：
p[id^='yuan']{    /*表示匹配包含id属性，且p标签的id属性值是以'yuan'开头的*/
     color: red;
}

(2)E[att$=value] ：是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。

例如：
p[id$='chao']{   /*表示p标签的id属性值是以'chao'结尾的*/
    color: blue;
}

(3)E[att*=value] ：用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。


例如：
p[class*='shi']   /*表示p标签的class属性值中包含'shi'字符串*/
{
     font-size: 35px;
}

应用

<html>
<style>
     p[id^='beautiful']{    /*表示p标签的id属性是以you开头的 */
        color:red
    }

    p[id$='people']{      /*表示p标签的id属性是以people结尾的*/
        color:blue
    }

    p[class*='you']{      /*表示p标签的class属性中包含有you*/
        font-size: 35px;
    }
</style>
<body>
    <p id="beautiful">你是世界上最美丽的人</p>
    <p id="cutepeople">你是最可爱的人</p>

    <p clss="yousmart">你是最智慧的人</p>
    <p class="youcool">你是最酷的人</p>
</body>
</html>

结果展示：

关系选择器

关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。

子元素选择器

子元素择器主要用来选择某个元素的第一级子元素。

例如：希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong。

临近兄弟选择器

选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，且第二个元素必须紧跟第一个元素。

例如：

.p1+#p2{    /*关系选择器的临近兄弟选择器*/
    font-size: 35px;  /*选择器选择的p1和p2有同一个父亲div*/
} 
<div>
    <p class="p1">web前端开发</p>
    <p id="p2">Java后台开发</p>
    <p>大数据分析</p>
</div>

普通兄弟选择器

使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，且第二个元素不必紧跟第一个元素。

伪类选择器

:root 选择器：用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。

:not 选择器：如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。

:only-child 选择器：用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。

:first-child和:last-child 选择器：分别用于为父元素中的第一个或者最后一个子元素设置样式。

:nth-child(n)和:nth-last-child(n) 选择器：分别表示选择第几个子元素或者倒数第几个子元素。

:nth-of-type(n)和:nth-last-of-type(n) 选择器：用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素。

:empty 选择器：用来选择没有子元素或文本内容为空的所有元素。

举例：

<html>
<body>
    <style>
        div p:first-child{      /*父类中的第一个子元素*/
            color:red
        }

        div p:last-child{      /*父类中的最后一个子元素*/
            color:blueviolet
        }

        div p:nth-child(3){      /*父类中的第几个子元素，此处为3*/
            font-size: 35px;
        }

        div p:nth-last-child(2){      /*父类中的倒数第几个子元素，此处为2*/
            color:palevioletred
        }
    </style>
    <div>
        <p>拼搏白天</p>
        <p>我要上</p>
        <p>清华大学</p>
        <p>距离很远的</p>
        <p>西安邮电大学</p>
    </div>
</body>
</html>

实现结果：

伪元素选择器

所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器。

:before选择器

:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。

<元素>:before
{
	content:文字/url();
}

:after伪元素选择器

:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。

别Null.了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS选择器（属性选择器，关系选择器，伪类选择器，伪元素选择器）

属性选择器属性选择器可以根据元素的属性及属性值来选择元素。CSS3中新增了3种属性选择器。
复制链接

扫一扫

专栏目录