【前端CSS】CSS中所有类型的选择器汇总

努力奋斗的张同学

已于 2023-12-23 21:11:46 修改

阅读量1.6k

点赞数 18

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

于 2023-12-23 21:11:00 首次发布

本文链接：https://blog.csdn.net/AiryCloud/article/details/134962295

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

一、CSS基本元素选择器

CSS基本选择器按照优先级分为四类：

1.id选择器

#id名 {

......

}

2.类选择器

.类名{

}

3.元素选择器

元素标签名{

....

}

4.通配选择器

* {

.....

}

二、CSS其他选择器

5.交集选择器

交集（∩）选择器：相当于和，无需用任何符号相隔两个条件选择，把条件顺着写就行，需要同时具有两个或者多个条件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        .copy.two{
            color: aqua;
        }
         p.copy {
            color: red;
        }
        /* 交集选择器 */
        p {
            color: lightslategray;
        }
        h1 {
            font-size: 20px;
            color: red;
        }
        h2 {
            font-size: 15px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>热搜：Lorem ipsum dolor sit amet.</h1>
    <h2>2023/1/1 20:12:32</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione doloribus, accusantium eos excepturi temporibus sed cum, sit unde eaque sunt laudantium deleniti accusamus hic incidunt. Non quam recusandae aspernatur eos.</p>
    <p class="copy">&copy; xxxxx xxxx</p>
    <p class="copy two">交集选择器</p>
</body>
</html>

6.并集选择器

并集（∪）选择器:相当于或，也就是具备两个或多个条件性质都可以，不需要同时满足用，","把这些性质相隔，可以在设置相同样式的时候不需要重写相同样式代码，避免代码冗余。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        h1,
        h4,
        p {
            color: red;
            font-size: 15px;
            background-color: gray;
            width: 150px;
        }
    </style>
</head>
<body>
    <h1>A</h1>
    <h4>B</h4>
    <p>C</p>
</body>
</html>

7.后代选择器

后代选择器：用于选择某个元素的后代元素。后代元素是指在某个元素内部的所有（区别于子类选择器的直接子元素）层级中的元素，在标签嵌套的场景，可以用后代选择器来选嵌套中的标签，可用空格分隔两个条件。

div p {
  /* CSS样式 */
}

这样就会将所有<div>元素内部的<p>元素应用相同的CSS样式。

8.子（儿子）代选择器

子代选择器：用于选择某个元素的直接子元素。直接子元素是指在某个元素内部的第一层级的元素。(这里区别于后代选择器)

子代选择器的语法为：

父元素 > 子元素

其中，父元素为需要选择的元素，子元素为父元素的直接子元素。（区别于后代选择器，注意：后代选择器是层级元素）

例如，如果想选择父元素的直接子元素，可以使用子代选择器：

父元素 > 子元素 {
  /* CSS样式 */
}

下面是一个示例，选择所有<ul>元素内部的直接子元素<li>元素：

ul > li {
  /* CSS样式 */
}

这样就会将所有<ul>元素内部的直接子元素<li>元素应用相同的CSS样式。

9.兄弟选择器

兄弟选择器分为相邻兄弟选择器和后续兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）使用 + 符号分隔两个元素，只会选择紧接在第一个元素后的第二个元素，且二者有相同的父元素。1 例如，h1 + p 选择器将选择紧接在 h1 元素后的 p 元素，但不会选择其他的 p 元素。

后续兄弟选择器（Subsequent sibling selector）使用 ~ 符号分隔两个元素，会选择第一个元素之后的所有第二个元素，且二者有相同的父元素。2 例如，p ~ span 选择器将选择 p 元素之后的所有 span 元素，无论它们是否相邻。

案例效果：

/* 相邻兄弟选择器 */
h1 + p {
  color: blue;
}

/* 后续兄弟选择器 */
p ~ span {
  color: red;
}


<h1>这是一个标题</h1>
<p>这是一个蓝色的段落</p>
<span>这是一个普通的 span</span>
<p>这是一个普通的段落</p>
<span>这是一个红色的 span</span>
<span>这是另一个红色的 span</span>

10.属性选择器

属性选择器可以根据元素的属性和属性值来选择元素，属性选择器有以下类型：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /* 第一种写法：选定有title属性的元素 */
        [title] {
            color: red;
        }
        /* 第二种写法：需要指定titile 属性的值*/
        [title="java"] {
            color: green;
        }
        /* 
        第三种写法：找出title属性以a开头的值
        */
        [title^="s"] {
            color: blue;
        }
        /* 
        第四种写法：选中具有title属性，且属性值以字母d结尾的元素
        */
        [title$="d"] {
            color: yellow;
        }
        /* 第五种写法：选中title的值中具有I的元素 */
        [title*="I"] {
            color: aqua;
        }
    </style>
</head>
<body>
    <div title="sgg">ssg</div>
    <div title="java">Java</div>
    <div title="UI">UI</div>
    <div title="spring">Spring</div>
    <div title="md">md</div>
</body>
</html>

11.伪类选择器

伪类（pseudo-class）是CSS中的一个概念，它表示一种特殊的选择器，用于选择元素的特定状态或者位置。这些状态或位置是在用户与页面交互过程中才会发生的，因此被称为伪类。

11.1 动态伪类

动态伪类（Dynamic pseudo-class）是指在CSS选择器中用来匹配特定条件下发生变化的元素的伪类。它们与元素当前的状态或上下文相关联，可以根据用户的互动或元素的状态进行样式的控制。

常见的动态伪类包括：

:link：当链接没有被激活的时候的样式
:visited - 当链接被访问过时应用样式。
:hover - 当鼠标悬停在元素上时应用样式。
:active - 当元素被激活（例如鼠标点击没有抬起）时应用样式。
:focus - 当元素获取焦点（例如用户点击或通过键盘导航）时应用样式。

演示代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态伪类</title>
    <style>
        /* 选中的是没有访问过的a元素 */
        a:link {
            color: red;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color: yellow;
        }
        /* 
        选中悬浮的时候的颜色
        */
        a:hover {
            color: black;
        }
        /* 
        激活鼠标的时候但是没有抬起时候
        */
        a:active {
            color: aliceblue;
        }
        input {
           background-color: red;
           color: aliceblue;
        }
        input:focus {
            color: orange;
            background-color: white;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <div>
        <input type="text">
    </div>
</body>
</html>

11.2 结构伪类

结构伪类是CSS中的一种选择器，用于根据元素在其结构中的位置或关系来选择元素。结构伪类通常用于选择特定位置的子元素或根据元素在其兄弟元素中的位置来应用样式。

以下是一些常见的结构伪类选择器：

:first-child：选择作为其父元素的第一个子元素的元素。
:last-child：选择作为其父元素的最后一个子元素的元素。
:nth-child(n)：选择作为其父元素的第n个子元素的元素。
:nth-last-child(n)：选择作为其父元素的倒数第n个子元素的元素。
:only-child：选择作为其父元素唯一子元素的元素。
:nth-of-type(n)：选择作为其父元素的第n个相同类型子元素的元素。
:nth-last-of-type(n)：选择作为其父元素的倒数第n个相同类型子元素的元素。
:first-of-type：选择作为其父元素的第一个相同类型子元素的元素。
:last-of-type：选择作为其父元素的最后一个相同类型子元素的元素。

通过使用这些结构伪类选择器，可以更精确地选择并应用样式于特定位置或关系的元素。

11.3 否定伪类

否定伪类用于选择不符合特定条件的元素。它们的语法是通过在伪类名称前加上冒号和关键字not来实现。

例如：

:not()：使用这个伪类可以排除一个或多个选择器所匹配的元素。例如，:not(.class)会选择所有不包含指定class的元素。
:not(selector)：使用选择器作为参数，可以排除匹配该选择器的元素。例如，:not(p)会选择除了<p>元素之外的所有元素。
:not(:empty)：选择所有非空的元素。
:not(:first-child)：选择除了第一个子元素之外的所有子元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14_否定伪类</title>
    <style>
        /* 选中的是div的儿子元素，但是排除类名为fail的元素 */
        /* div>p:not(.fail) {
            color: red;
        } */
        /* 排除title属性值为4和5的 */
        div>p:not([title="4"],[title="5"]) {
            background-color: red;
        }
        
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p class="fail" title="4">4</p>
        <p class="fail" title="5">5</p>
    </div>
</body>
</html>

11.4 UI伪类

在前端开发中，UI伪类（User Interface pseudo-classes）是一种用于选择元素在特定用户交互状态下的CSS伪类。它们可以用于在用户与页面交互时样式化特定的元素。

UI伪类是通过在伪类名称前加上冒号来定义的。以下是一些常见的UI伪类：

:checked：用于选择已被选中的复选框或单选按钮。
:disabled：用于选择被禁用的表单元素。
: enabled： 用于选择没有被禁用的表单元素

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI伪类</title>
    <style>
        /* 选中的是勾选的复选框或单选按钮 */
        input:checked {
            width: 100px;
            height: 100px;
        }
        /* 选中的是被禁用的是input */
        input:disabled {
            background-color: gray;
        }
        /* 选中的是可用的input元素 */
        input:enabled {
            background-color: green;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="gender">
    <input type="radio" name="gender" id="">
    <input type="text">
    <input type="text" disabled>
</body>
</html>

11.5 目标伪类

目标伪类（:target）是CSS中的一种伪类选择器，用于选择当前页面URL中指定的锚点目标元素。

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标伪类</title>
    <style>
        div {
            background-color: red;
            height: 300px;
        }
        /* 当div被描点选中时候的效果 */
        div:target {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#one">看1</a>
    <a href="#two">看2</a>
    <a href="#three">看3</a>
    <a href="#four">看4</a>
    <div id="one">1</div><br>
    <div id="two">2</div><br>
    <div id="three">3</div><br>
    <div id="four">4</div><br>
    <div>5</div><br>
    <div>6</div><br>
    <div>7</div><br>
    <div>8</div><br>
    <div>9</div><br>
    <div>10</div><br>
</body>
</html>

11.6 语言伪类

在CSS中，语言伪类（:lang）用于根据指定的语言属性选择元素并应用样式。

案例效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语言伪类</title>
    <style>
        div:lang(en) {
            color: red;
        }
        div:lang(zh-CN) {
            color: blue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div lang="en">china</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</body>
</html>