CSS选择器

下雨的清晨

已于 2024-08-21 18:28:02 修改

阅读量1.2k

点赞数 51

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

于 2024-08-20 01:32:24 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79155654/article/details/141338312

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

选择器

为网页上的内容设置样式，首先需要做的就是选中对应的内容，才能够将样式信息与相对应的内容联系起来。

而完成这个任务的，就是选择器。

选择器能够选择相对应的HTML内容从而为其设置样式信息。

注意，虽然选择器的样式很丰富，但是要尽量避免使用复杂的选择器以保证网页加载效率和代码复用率

一般在CSS文件中，满足选择器后接大括号，大括号内为对应样式的格式：

选择器{
    样式一:值一;
    样式二:值二;
}

基本选择器（元素、类、ID选择器）

通配符选择器

以通配符*作为选择器，将能够选中所有的HTML元素。

常用于重置或规范化样式，或者清除浮动，全局调整透明度等

关于浮动会在后文中加以说明。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

类型选择器

类型选择器是最基础的选择器，用于选中所有的这一类型的HTML元素。

例如：

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例文档</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
  <h1>这是第一个标题</h1>
  <h1>这是第二个标题</h1>
  <h1>这是第三个标题</h1>
  <h1>这是第四个标题</h1>
  <h1>这是第五个标题</h1>
</body>
</html>

CSS文件：

h1{
    color : red;
    font-size:30px;
}

在CSS文件中，h1就是选中了所有的这几个标题，在h1选择器后的大括号内的内容会对所有的h1标签生效。

类选择器

类型选择器属于先天地将所有同类型标签区分在一起，划分为很多HTML元素全体的子集，我们可以对对应的某一个子集来对应样式。

同样地，CSS还允许我们自主地选择元素划分为一个子集来统一的定义他们的样式，这一功能通过class属性来实现。

我们可以自主的取一个类名，然后在想要选中的元素中添加属性class:类名来将这个元素划分到这个类中。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例文档</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
  <h1 class="title">这是第一个标题</h1>
  <h2 class="title">这是第二个标题</h2>
  <h3 class="title">这是第三个标题</h3>
  <h4 class="title">这是第四个标题</h4>
  <h5 class="title">这是第五个标题</h5>
</body>
</html>

CSS文件：

.title{
    color : red;
    font-size:30px;
}

在CSS中使用这个类选择器时，选择器格式为“."后加上类名，即.类名，如例子所演示的那样。

ID选择器

除却将一堆元素划分为不同的集合然后通过类型选择器或类选择器来进行选择之外，还可以通过ID选择器来实现单独地选取某一个元素。

ID选择器与类选择器的不同在于，很多个HTML元素可以具有同一个类，一个HTML元素也可以具有多个类，但是一个HTML元素只能有一个ID，一个ID也只能够对应一个HTML元素，也就是说，ID与某一个HTML元素是一一对应的。

不过，一个HTML元素可以同时具有多个类和一个ID，也就是说，类和ID的划分是分别进行的，对类的区分不会影响到ID，为元素取ID也不会影响到类的划分。

在HTML元素中，可以加上id属性为该元素取ID,而在CSS语法中，则通过#ID名来实现对对应ID的元素的选取。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例文档</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
  <h1 id="title1">这是第一个标题</h1>
  <h2 id="title2">这是第二个标题</h2>
  <h3 id="title3">这是第三个标题</h3>
</body>
</html>

CSS文件：

#title1{
    color : red;
    font-size:30px;
}

#title2{
    color : blue;
    font-size:30px;
}

#title3{
    color : green;
    font-size:30px;
}

效果：

在这里插入图片描述

组合选择器（群组、后代、子、相邻兄弟选择器）

组合选择器用于更精确地选择特定的元素。通过组合基本选择器，可以选择某个上下文中的元素，从而实现更灵活的样式应用。

群组选择器

群组选择器用于对多个选择器应用相同的样式。通过将选择器用逗号分隔开来，群组选择器可以对多个元素或类同时应用相同的样式。

示例：

h1, h2, h3 {
    color: blue;
    font-family: Arial, sans-serif;
}

上面的样式会对所有的h1、h2、h3标签应用相同的字体和颜色。

后代选择器

后代选择器用于选择某个元素的所有后代元素，而不论它们在层次结构中处于何种深度。用空格分隔两个选择器，前一个选择器选中父元素，后一个选择器选中父元素的后代。

示例：

div p {
    color: red;
}

上面的样式会将div元素中的所有p元素的文本颜色设置为红色。

子选择器

子选择器与后代选择器相似，但它只选择直接子元素。使用大于号（>）表示子选择器。

示例：

ul > li {
    list-style-type: none;
}

上面的样式会移除ul元素的直接子元素li的项目符号，但不会影响li的子元素li。

相邻兄弟选择器

相邻兄弟选择器用于选择紧跟在另一个特定元素后的兄弟元素。使用加号（+）表示相邻兄弟选择器。

示例：

h1 + p {
    margin-top: 0;
}

上面的样式会将紧跟在h1之后的p元素的上边距设为0。

普通兄弟选择器

普通兄弟选择器选择所有在特定元素之后的兄弟元素，而不限于紧邻的一个。使用波浪号（~）表示普通兄弟选择器。

示例：

h1 ~ p {
    color: gray;
}

上面的样式会将所有在h1之后的p元素的文本颜色设置为灰色。

伪类选择器

伪类选择器用于选择那些处于特定状态的元素，例如被鼠标悬停的链接，或者被用户访问过的链接。伪类选择器通常使用冒号（:）后跟伪类名称来表示。

常见伪类选择器示例：

:hover - 选择鼠标悬停在其上的元素。
:focus - 选择获得焦点的元素，例如用户点击文本框时。
:nth-child(n) - 选择父元素的第n个子元素，n可以是具体数字或关键词如odd、even。
:first-child - 选择父元素的第一个子元素。
:last-child - 选择父元素的最后一个子元素。

示例：

a:hover {
    color: orange;
}

上面的样式会将鼠标悬停在链接上的文本颜色改为橙色。

伪元素选择器（::before, ::after等）

伪元素选择器用于选择并样式化元素的特定部分。伪元素通常使用双冒号（::）表示。

示例：

p::before {
    content: "Note: ";
    font-weight: bold;
    color: red;
}

上面的样式会在每个p元素的内容之前插入“Note: ”，并使其加粗且为红色。

常见伪元素选择器：

::before - 在元素内容之前插入内容。
::after - 在元素内容之后插入内容。
::first-letter - 选择元素中的第一个字母。
::first-line - 选择元素中的第一行文本。

关于伪类和伪元素，什么意思呢？

比方说，网页中常见的操作是为鼠标悬停的链接上改变链接文字颜色，此时就可以将该链接元素添加伪类选择器:hover并在选择其中添加样式；那么什么是为元素呢？如果我们不仅仅希望文字的颜色发生改变，还希望在文字后浮现新的内容，然后在悬停状态取消时隐藏内容，就可以用到伪元素选择器::after，并在选择器中设置样式，当然不一定必须是文本，实际上可以是任何的HTML元素都可以具有这样的特性。

关于伪类和伪元素的使用，伪类支持链式拼接，比如选择器:hover:last-child选择器对选中元素的最后一个子元素的鼠标悬停情况下的样式分析就实现了，而且可以在伪类选择器后面直接添加伪元素选择器来实现前面说的悬停下增加元素的效果。

但是伪元素并不支持链式写法。

但是伪元素不仅仅只有刚才说的一种用法，实际上，伪元素常用于包括插入装饰符号、自定义列表项符号、创建复杂背景和边框、定制首字母和首行样式，以及在空元素中添加占位内容等等。

属性选择器

属性选择器用于选择具有特定属性或属性值的元素。它通过方括号（[]）表示，并且可以根据属性的存在或属性值的内容来进行选择。

常见属性选择器示例：

[attribute] - 选择具有某个属性的所有元素。
[attribute=value] - 选择具有特定属性值的所有元素。
[attribute^=value] - 选择属性值以特定字符串开头的所有元素。
[attribute$=value] - 选择属性值以特定字符串结尾的所有元素。
[attribute*=value] - 选择属性值中包含特定字符串的所有元素。

示例：

input[type="text"] {
    border: 1px solid #000;
}

上面的样式会将所有类型为text的输入框的边框设置为1px的黑色实线。

在上面的实例中，如果去掉input，那么就会选中文档中所有的具有"text"属性值的type属性的元素，当然，对于这行代码来说，加与不加的效果是一样的，因为只有input元素的type属性才具有"text"属性值，但是对于其他的属性值，我们可以通过这一写法来选定某一类标签的属性值的元素。