CSS 几种常见的选择器

最新推荐文章于 2023-04-21 23:35:24 发布

Naion

最新推荐文章于 2023-04-21 23:35:24 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/Naion/article/details/127122967

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在css中，要对元素添加样式，可以使用选择器来实现。这里就来说说几种比较常见的选择器。选择器的逻辑是选中页面中指定的标签元素。要先选中元素，才能选中元素的属性。

标签选择器

标签选择器能快速为同一类的标签添加样式。

    标签 {

    }

    <style>
        p {
            color: red;
        }

        div {
            color: green;
        }
    </style>

    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <div>第一个div</div>
    <div>第二个div</div>
    <div>第三个div</div>

类选择器

上述的标签选择器会选中全部符合要求的标签。但是现在我只想把第一段给变成红色，这个时候就可以使用类选择器，差异化表示不同的标签。

    .标签 {
    
    }
    
<!--    标签中需要带class属性-->

    <style>
        .red {
            color: red;
        }
    </style>

    <p class="red">第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <div class="red">第一个div</div>
    <div>第二个div</div>
    <div>第三个div</div>

注意：

（1）类选择器使用.来开头。

（2）下方的标签必须要使用class属性来调用。

（3）一个类可以被多个标签使用，一个标签可以使用多个类，使用空格分开。

id选择器

和类选择器类似，使用#开头，标签中需要id属性来调用，id是唯一的，和类选择器的区别就是不能被多个标签使用（类似于姓名和身份证号之间的关系。姓名可以相同，但是身份证号不能相同）。

    #标签 {
    
    }
    
<!--    标签中需要带id属性-->

    <style>
        #red {
            color: red;
        }
    </style>

    <p id="red">第一段</p>
    <p>第二段</p>
    <p>第三段</p>

通配符选择器

使用*，选中所有的标签。

    <style>
        * {
            color: red;
        }
    </style>

    <p id="red">第一段</p>

    <div>第一个span</div>

    <h4>标题</h4>

以上选择器被称为基础选择器。

后代选择器

又称为包含选择器，选择某个父元素中的某个子元素。这里的后代不仅仅是儿子,也可以是孙子等等。

    元素1 元素2 {

    }

元素1和元素2之间使用空格分割。选择的结果之影响元素2。

    <style>
        /*只选中ol中的li标签*/
        ol li {
            color: red;
        }
    </style>

    <ul>
        <li>ul的li</li>
        <li>ul的li</li>
    </ul>

    <ol>
        <div>div</div>
        <li>ol的li</li>
        <li>ol的li</li>
    </ol>

可以是任意基础选择器的组合。

    <style>
        .red-ol .red-li {
            color: red;
        }
        .red-ol li {
            color: green;
        }
    </style>

    <ul>
        <li>ul的li</li>
        <li>ul的li</li>
    </ul>

    <ol class="red-ol">
        <div>ol中的div</div>
        <li class="red-li">ol的li</li>
        <li>ol的li</li>
        <li>ol的li</li>
    </ol>

子选择器

和后代选择器类似，但是只能选择亲儿子，不能选择其他的。

    元素1>元素2 { 

    }

    <style>
        .two a {
            color: red;
        }
        
        /*分别注释两个选择器，观察*/
        /*后代选择器会改变两个标签的颜色*/
        /*子选择器只会改变第一个标签的颜色*/

        .two>a {
            color: green;
        }
    </style>

    <div class="two">
<!--        亲儿子-->
        <a href="#">链接1</a>
<!--        p标签中的a标签,孙子标签-->
        <p><a href="#">链接2</a></p>

并集选择器

用于选择多组标签，通过逗号分割等多个元素，完成集体声明。

    元素1, 
    元素2 {

    }

    <style>
        p,
        div,
        h4 {
            color: red;
        }
    </style>

    <p>p标签</p>
    <div>div标签</div>
    <h4>h4标签</h4>

伪类选择器（链接伪类）

伪类选择器有很多，这里主要说说链接的伪类选择器。

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
(要注意顺序，LVHA，否则不生效)
(实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多)

        a:hover {
            color: green;
        }

        a:active {
            color: red;
        }

<!--    鼠标停在链接上,呈现绿色.按下鼠标不松手,呈现红色.-->
    <a href="#">链接1</a>

以上选择器，和基础选择器对应的，叫做复合选择器。