CSS选择器的常见用法

璃月港老大爷

于 2024-07-06 12:03:19 发布

阅读量702

点赞数 27

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_49817511/article/details/140225614

版权

正文：

1.标签选择器

标签选择器是最简单的选择器之一，通过元素的标签名称来选取HTML元素。

使用格式：

elementname { ... }

下面是一段html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签选择器示例</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <div>
    <p>This is another paragraph inside a div.</p>
    <span>Span element</span>
  </div>
</body>
</html>

现在，我们来为这些元素应用一些样式，比如改变文本颜色和字体大小。我们可以使用标签选择器来实现这个效果。

h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: green;
  font-size: 16px;
}

div {
  background-color: #f0f0f0;
}

span {
  font-style: italic;
}

通过上述代码，我们成功使用标签选择器为不同类型的元素应用了不同的样式，实现了对页面中各个标签元素的定制化样式设定。

2.class选择器

Class选择器是CSS中用来选择带有特定类名的HTML元素的一种选择器。通过为HTML元素添加class属性，我们可以为这些元素定义特定的样式，并通过class选择器来选择这些元素并应用相应的样式。

使用格式：

.classname {
  /* 样式规则 */
}

下面有一段html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Class Selector Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="main-title">欢迎来到我的网站</h1>
  <p class="text">这是一个普通段落。</p>
  <p class="text highlight">这是一个高亮段落。</p>
  <div class="container">
    <p>这个段落也在容器内。</p>
  </div>
</body>
</html>

我们可以通过class选择器对页面的样式进行修改：

/* 类选择器示例 */
.main-title {
  color: navy;
  font-size: 24px;
}

.text {
  color: green;
  font-family: Arial, sans-serif;
}

.highlight {
  background-color: lightgray;
  padding: 5px;
  border-radius: 5px;
}

.container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #000;
}

需要注意的是一个类可以被多个标签使用, 一个标签也能使用多个类。

3.id选择器

ID选择器是CSS中用来选择具有特定id属性的HTML元素的一种选择器。每个HTML元素都可以拥有唯一的id属性，通过为元素添加id属性，我们可以为这些元素定义特定的样式，并通过ID选择器来选择这些元素并应用相应的样式。

使用格式：

#idname {
  /* 样式规则 */
}

下面是一段html的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ID Selector Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header id="main-header">
    <h1>我的网站</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  <div id="main-content">
    <p>这是主要内容区域。</p>
  </div>
  <footer id="main-footer">
    <p>版权所有 © 2024</p>
  </footer>
</body>
</html>

现在，我们使用id选择器来为这些具有不同id的元素应用样式。

/* ID选择器示例 */
#main-header {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
}

#main-content {
  margin: 15px 0;
  border: 1px solid #ccc;
  padding: 20px;
}

#main-footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

每个ID在一个页面中只应该使用一次，确保了选择器的精确性。 ID选择器的特异性高于类选择器、属性选择器和标签选择器，因此它在样式冲突时具有更高的优先级。

4.复合选择器

复合选择器（Compound Selector）是将多个选择器组合在一起使用，以选择特定的元素集合。这种选择器的组合可以提高选择元素的精确度，并且可以创建更具体的样式规则。复合选择器可以包括以下几种组合方式：

1.后代选择器（Descendant Selector）：用空格分隔两个选择器，表示选择所有符合第二个选择器条件的元素，且其祖先元素是符合第一个选择器条件的元素，不管它们的嵌套级别有多深。后代选择器会匹配被指定元素内部的所有后代元素。。

.main-content p {
    color: red;
}

上面的示例中，选择了所有在类名为main-content的元素内部的 p 元素，并将它们的文本颜色设置为红色。

2.子元素选择器（Child Selector）：使用">"符号表示选择某个元素的直接子元素，即子元素而不是后代元素。子选择器只会匹配被指定元素的直接子元素，不包括孙子元素及更深层级的后代元素。

ul > li {
    list-style: none;
}

这个示例会选择所有直接包含在 ul 元素内部的 li 元素，并将它们的列表样式设为无。

3.描述符组合选择器：是将多个不同类型的选择器组合在一起，以更精确地选择页面上的元素。这种组合可以包括类选择器、ID选择器、属性选择器和伪类选择器等，与标签选择器结合使用。

1. 类和标签的组合（Class and Type Selector）

语法：element.class
作用：选择具有指定类名的所有指定类型的元素。

示例：

div.highlight { background-color: yellow; }

这将选择所有<div>元素，且这些元素具有class="highlight"。

2. ID和标签的组合（ID and Type Selector）

语法：element#id
作用：选择具有指定ID的所有指定类型的元素。
示例：
```
section#main-content { padding: 20px; }
```
这将选择所有<section>元素，且这些元素具有id="main-content"。

3. 属性和标签的组合（Attribute and Type Selector）

语法：element[attr]
作用：选择具有指定属性的所有指定类型的元素。
示例：
```
a[href] { color: blue; }
```
这将选择所有具有href属性的<a>元素。

4. 类和ID的组合（Class and ID Selector）

语法：#id.class
作用：选择具有指定类名的指定ID的元素。
示例：
```
#header.menu { background-color: green; }
```
这将选择具有id="header"且同时具有class="menu"的元素。

5.通配符选择器

通配符选择器是CSS选择器中最简单且最常见的一种选择器，用来匹配文档中的所有元素。通配符选择器使用一个星号（*）表示，可以选择页面内的所有元素，并将样式应用于这些元素。

使用格式：

* {
    /* CSS样式 */
}

示例：

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

/* 这个选择器会将页面中的所有元素的内外边距设为0，并且使用border-box盒模型 */

通配符选择器会匹配文档中的所有元素，无论元素类型、类别或者位置，一般情况下会作为默认样式或者重置样式的一部分使用。可以用于将所有元素的默认样式设置为统一的基础样式，方便开发人员在构建页面时重置浏览器的默认样式。

6.选择器的优先级

在CSS中，选择器的优先级规则是用来确定当多个选择器同时应用到同一个元素时，哪一个样式规则会被应用的规则。CSS选择器的优先级是由四个不同部分组成的：

内联样式（Inline Styles）：直接在HTML元素中使用style属性设置的样式具有最高的优先级，会覆盖其他任何样式。
```
<h1 style="color: red;">Hello, World!</h1>
```
ID选择器（ID Selectors）：ID选择器具有比类选择器或元素选择器更高的优先级。
```
#main-title {
    color: blue;
}
```
类选择器（Class Selectors）：类选择器比元素选择器优先级更高。
```
.intro {
    font-size: 16px;
}
```
元素选择器（Element Selectors）：元素选择器具有最低的优先级。
```
.intro { font-size: 16px; }
```

如果多个选择器具有相同的优先级，CSS规则会根据这些规则来应用样式：