CSS-选择器

CSS选择器详解

原创已于 2022-12-28 14:09:57 修改 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2022-12-27 14:35:25 首次发布

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文详细介绍了CSS中的各类选择器，包括通用、标签、类、ID、多元素等选择器的使用方法及其语法，并探讨了后代、子元素、相邻元素及伪类选择器的应用场景。

1.含义

根据一定的语法规则，可以选中页面的指定元素并设置样式

2.类型

选择器分为通用选择器、标签选择器、类选择器、ID选择器等

（1）通用选择器：即通配选择器，给所有的标签设置样式，所有都会生效，一般不会使用，语法如下：

*{ 属性：值；}

（2）标签选择器：即元素选择器，通过标签来选定指定的元素，语法如下：

标签名 {属性：值；}

<head>
    <style>
        p{
           font-style: oblique;
         }
    </style>
</head>
<body>
    <p>本句话字体为倾斜体</p>
</body>

（3）类选择器：给class属性class可以重复使用，可以根据class属性为元素分组，一个元素可以有多个class，之间用空格隔开，语法如下：

.class属性值{属性：值；}

<head>
    <style>
        .box{
           background-color:skyblue;
          }
    </style>
</head>
<body>
    <p class="box">这是天蓝色的一句话</p>
</body>

（4）ID选择器：根据id属性值选择，语法如下：

#id属性值{属性：值；}

<head>
     <style>
        /* p{color: red;} */
    #p1{
        color: slateblue;
    }
    </style>
</head>
<body>
    <p id="p1">只是一句紫色的语句</p>
</body>

（5）多元素选择器：可以同时匹配选择器，之间用逗号分隔开，语法如下：

选择器1，选择器2{属性：值；}

（6）后代元素选择器：后代元素是指直接或间接包含被祖先元素包含的元素，子元素也是后代元素，之间通过空格分隔开，语法如下：

元素1 元素2{属性：值；}

（7）子元素选择器：子元素是指直接被父元素包含的元素，匹配元素1的所有子元素2，匹配所有元素1的元素2，语法如下：

元素1>元素2{属性：值；}

（8）相邻元素选择器：匹配所有元素1相邻的同级元素2，语法如下：

元素1+元素2{属性：值；}

（9）伪类选择器：选择器的特殊状态，可对链接的状态进行设置

选择器	描述
clink	设置正常状态下，向未被访问的链接样式。
visited	设置已经访问后的链接样式。
:hover	设置鼠标悬停在链接上的样式
:active	设置点击链接但未松开时的样式

（10）属性选择器：通过标签的属性名和属性值来匹配元素。其中attr是指“attribute”，“属性”属性名；val是指“value”，“值”属性值

属性	描述
[attr]	匹配所有具有该attr的元素
[attr=val]	匹配所有attr等于val的所有元素
[attr*=val]	匹配至少一个以上的属性中val的元素
[attr^=val]	匹配所有attr以val开头的所有元素
[attr$=val]	匹配所有attr以val结尾的所有元素