CSS选择器

最新推荐文章于 2022-08-19 16:03:39 发布

原创最新推荐文章于 2022-08-19 16:03:39 发布 · 5.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#标签 #选择器 #伪类 #伪元素

html/css 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了CSS中的各类选择器，包括元素选择器、ID选择器、类选择器、属性选择器及关系选择器等，并解释了它们的工作原理及使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器：

描述后面的样式然后施加给一些目标。
根据选择依据的不同，产生了各种选择器。

元素选择器根据标签元素名进行选择，通常选择一般所有的相同元素都有的样式比如下面的例子就是所有的div背景色都是黑色

div{
    background-color:#000;
}

id选择器通过元素的id来选择样式，只能施加给一个，因为id只能有一个。比如下面的例子就是id为id1的标签字体大小为22px

 #id1{
    font-size:22px;
}

类选择器选择元素的类名来选择样式，通常给所有的相同类的元素施加样式。比如下面的例子就是所有类名包括class1的元素的字体都为红色

.class1{
    color:red;
}

属性选择器根据元素属性来选择样式，其实他包含了id和类属性。

常用的书写格式为
（1）选择所有包含title属性的元素

[title]{
    border:1px solid yellow;
}

（2）选择title属性为tt的元素

[title="tt"]{
    border:1px solid yellow;
}

(3)选择title属性以tt开头的元素

[title^="tt"]

(4)选择title属性以tt结尾的元素

[title$="tt"]

(5)选择title属性包含完整的tt单词的元素

[title~="tt"]

(6)选择title属性包含tt的元素

[title*="tt"]

关系选择器
（1）后代选择器：选择所有该元素的后代，例如下面的例子中类名为div1的所有包含的div的背景颜色都为红色

.div1 div{
    background-color:red;
}

（2）父子选择器：只选择自己的孩子。例如下面的例子就只有div2能够选中

.div1>div{
    background-color:red;
}
<body>
    <div class="div1">
        <div class="div2">
            <div class="div3"></div>
        </div>
    </div>
</body>

（3）相邻选择符，只选择自己旁边的元素下面的例子就只选中了div2

.div1 + div{
    background-color:red;
}
<body>
    <div class="div1"> </div>
    <div class="div2"> </div>
    <div class="div3"></div>
</body>

(4)兄弟选择器，选择自己所有的兄弟例如下面的例子div2和div3都被选中

.div1 ~ div {
    background-color:red;
}
<body>
    <div class="div1"> </div>
    <div class="div2"> </div>
    <div class="div3"></div>
</body>

伪类其效果与增加一个类来实现效果等价，所以称之为伪类
常用的伪类有
这里写图片描述图片来自w3cshcool
这个伪类属性的顺序是有规定的一般为 l h a v

a:link{
          text-decoration: none;
}
a:hover{
    color: red;
    text-decoration: dashed;
}

a:active{
    color: yellow;
}
a:visited{
    color: blue;
}