CSS常用选择器

诗霖雪

已于 2023-10-12 17:06:39 修改

阅读量133

点赞数

文章标签： css 前端 html

于 2023-10-11 20:57:00 首次发布

本文链接：https://blog.csdn.net/m0_56713342/article/details/133777996

版权

本文详细介绍了CSS选择器的各种类型，包括标签选择器、ID选择器、类选择器、复合选择器（交集和并集）、关系选择器（子代、后代、相邻和普通兄弟）、属性选择器、伪类选择器（如:hover和:first-child）以及伪元素选择器和额外的选择器如:empty和:target。

摘要由CSDN通过智能技术生成

CSS选择器（CSS selector）是一种用于选择HTML或XML文档中特定元素的模式或规则。它允许您根据元素的类型、属性、位置等条件来选择一个或多个元素，然后将样式规则应用于这些选定的元素。适用场景 CSS选择器允许开发者选择和定制HTML或XML文档中的元素，以控制页面的样式和布局。

一、css常用选择器

1、标签（元素）选择器

   作用：通过对应的标签名选中内容
   语法：标签名 { }
   注意：会波及其他的同标签名的内容

2、id选择器

   作用：通过id属性值，选中对应的内容
   语法：#id属性值 { }
   注意：id属性值不能以数字，汉字开头，而且id属性值不能复用

3、class选择器

作用：通过对应class属性值选中内容，跟id选择器很像，不同的是class属性值可重复使用
语法：.class属性值
注意：最常用的选择器

4、通配选择器

作用：选中页面中所有的标签
语法：*{ }

二、css复合选择器

1、交集选择器

作用：同时符合选择器1选择器2···对应的内容
语法：选择器1选择器2····{}
注意：如果选择器中有标签选择器，那么标签选择器必须放在第一位

2、并集选择器（群组选择器）

在选择器1或者选择器2或者····里面的内容
语法：选择器1,选择器2,····{}

三、关系选择器

1、子代选择器

子代选择器：选择的是父级标签里面直系第一代的子标签

作用：通过指定的父元素找到指定的子元素
语法：父元素 > 子元素 { }

2、后代选择器

后代选择器：选择的是父级标签里面所有符合条件的子标签

作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素后代元素 { }

3、相邻兄弟选择器（紧挨着我的）

作用：通过指定的兄弟找到紧挨弟弟
语法：兄 + 弟 { }

4、普通兄弟选择器（通用兄弟选择器）

语法：兄 ~ 弟{ }

四、属性选择器

语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择指定属性以指定属性值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素

五、伪类选择器

   :first-child 第一个元素
   :last-child 最后一个元素
   :nth-of-child 选中第几个元素

       特殊实参值：
                           2n / even 偶数
                            2n+1 / odd 奇数

是按照所有子元素的排列顺序

   :first-of-type 第一个元素
   :last-of-type 最后一个元素
   :nth-of-type( )   选中第几个元素

   特殊实参值：
                            2n / even 偶数
                            2n+1 / odd 奇数

是按照同类型的子元素排序

六、a元素的伪类

1、:link 用来表示未访问过的链接（正常链接）
2、:visited 用来表示访问过的链接
   由于隐私的原因，所以visited只能改颜色
   注意：:link,:visited 是超链接独有的
3、:hover 用来表示鼠标移入的状态
4、:active 鼠标点击后的状态
   :hover :active 适用所有的标签

七、伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
before和after必须要结合content使用

八、额外的选择器

1、否定选择器

 <style>

        /* ul li:not(.first+li)这种写法也是可以的的 选择的是第1  3li标签 否定的是第二个li标签 */

        
        /* 否定选择器 这里选择的是ul父级标签里面除去.first标签的其他所有li标签 */
        ul li:not(.first){
            /* background-color: green; */
            color: red;
        }

    </style>
</head>
<body>
    <ul>
        <li class="first">我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
    </ul>
</body>

2、empty空选择器

 <style>
        /* :empty空选择器 选择的是没有内容的标签 */

        /* 这里选择的是没有内容的p标签 */
        p:empty{
            height: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    <p>我是有内容的</p>
    <p></p>
    <h3></h3>
</body>

3、：target选择器

:target选择器可用于选取当前活动的目标元素

 <style>
        /* :target选择器可用于选取当前活动的目标元素
        给a标签的锚链接标签加样式 */
        :target{
            /* 边框   1个像素  实线  红色 */
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p> <a href="#bj">电影八角笼中</a></p>
    <p> <a href="#fs"> 封神第一部：朝歌风云</a></p>

    <p id="bj">八角隆重电影简介</p>
    <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
    <p id="fs">封神电影简介</p>
</body>

4、：root根选择器

： root根选择器相当于选中html标签对本文档内所有元素生效

 <style>
        /* root根选择器 相当于选中html标签 对本文档内所有元素生效。*/
       :root{
            color: red;
        }
        
    </style>
</head>
<body>
    <span>我是span标签</span>
    <p>我是p标签</p>
</body>