前端之选择器

m0_74242675

已于 2024-02-04 20:33:23 修改

阅读量708

点赞数 16

分类专栏：前端 HTML css js 文章标签：前端开发语言笔记学习 html5 css3

于 2024-02-03 18:33:48 首次发布

本文链接：https://blog.csdn.net/m0_74242675/article/details/136011711

版权

前端 HTML css js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在CSS（Cascading Style Sheets）中，ID和类（class）是两种用于选择器来定义样式的主要方式。它们都可用于标记HTML元素并应用相应的样式规则。

1. CSS ID

- 语：在HTML中，ID通过`id`属性为元素指定唯一的标识符，例如 `<div id="myID">...</div>`。
- 在CSS中，使用井号（#）表示ID选择器，如 `#myID { ... }`。
- 特点：
- 每个ID在一个文档中只能使用一次，因此具有唯一性。
- ID选择器的优先级高于类选择器和其他类型的选择器（除内联样式外），这意味着如果有多个样式作用于同一元素时，ID样式将优先生效。
- 通常用于页面上关键或独一无二的元素，比如导航栏、页脚或者特定的重要内容区块。

2. **CSS 类**

- 语法：在HTML中，类通过`class`属性为元素分配一个或多个类名，可以重复使用，例如 `<div class="myClass anotherClass">...</div>`。
- 在CSS中，使用点（.）表示类选择器，如 `.myClass { ... }` 或 `.anotherClass { ... }`。
- 特点：
- 同一类名可以在多个元素上复用，允许创建一组可重用的样式规则。
- 类选择器可以应用于任何数量的元素，提供了样式重用性和灵活性。
- 当需要对具有相似样式的多个元素进行分组时，类选择器非常有用。

总结来说，ID主要用于独一无二的元素，并且拥有最高的选择器优先级；而类则更倾向于复用，适合于实现模块化设计和提供通用样式。在实际开发中，建议尽量避免过度依赖ID选择器，而是采用类选择器结合语义化的HTML标签来编写可维护、易于扩展的CSS代码。

CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML文档或XML（包括如SVG、MathML等XML方言）文档的呈现。它提供了丰富的视觉格式化模型和布局机制，使得开发者能够控制网页上的内容表现，如字体、颜色、大小、间距、布局等。

CSS的主要作用是将内容与表现形式分离，增强了网页设计的灵活性和可维护性。通过CSS，开发者可以为不同的元素定义样式规则，这些规则可以根据元素类型、ID、类名、属性值等进行选择，并按照一定的优先级层叠应用到相应的HTML元素上。

CSS（层叠样式表）是一种用来控制网页样式和布局的语言。通过使用CSS，可以改变网页的颜色、字体、大小、间距、背景等，从而使网页更加美观和易读。

使用CSS的步骤如下：

1. 创建一个CSS文件，可以使用任何文本编辑器创建一个以.css为后缀的文件。

2. 在HTML文件的<head>标签中，使用<link>标签将CSS文件链接到HTML文件中。

例如：

  <link rel="stylesheet" type="text/css" href="style.css">

这将把名为style.css的CSS文件链接到HTML文件中。

3. 在CSS文件中编写样式规则。样式规则由选择器和声明组成。选择器指定要应用样式的HTML元素，声明指定要应用的样式属性和值。例如：

   p {
     color: red;
     font-size: 20px;
   }

这将把所有的<p>元素的文本颜色设置为红色，字体大小设置为20像素。

以上是CSS的基本使用方法

例如，在一个简单的CSS片段中：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      /* 如果给某一个标签加样式，直接写标签的名字 */
     body {
    background-color: #f0f0f0; /* 页面背景色 */
    font-family: Arial, sans-serif; /* 文本字体设置 */
}

      /* 如果给某一个标签加样式，直接写标签的名字 */
      h1 {
    color: blue; /* 文字颜色设置为蓝色 */
    
    /* 将 h1 标题元素中的文本内容居中对齐，以增强页面布局的视觉平衡感和中心性。 */
    text-align: center;
}

      /* id用#表示 */
     #header {
    background-color: black; /* 背景颜色设为黑色 */
    color: white; /* 文字颜色设为白色 */
    padding: 20px; /* 添加四周内边距均为20像素 */
}

      /* class用.表示 */
      .navbar a {
    color: darkgreen; /* 链接文字颜色设为深绿色 */
    text-decoration: none; /* 取消链接的下划线 */
}
   </style>
</head>

<body>
   <p id="header">一个网页</p>
   <p class="navbar">
      <a href="#">首页</a>
      <a href="#">关于我们</a>
      <a href="#">服务</a>
      <a href="#">联系方式</a>
   </p>
</body>

</html>

1.下面用例子介绍一些css

p {
    color: red; /* 文本颜色设为红色 */

    /*
      将段落字体大小设置为12像素，
      这可以调整页面内容的可读性，并控制整体布局和设计的一致性。
    */
    font-size: 12px;
}

标签选择器

在CSS中用于根据HTML元素的标签名称来选中并设置样式。通过标签选择器，您可以为页面上所有具有特定标签类型的元素应用统一的样式。

例如，在CSS中，使用以下规则：


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

这里，`p` 是一个标签选择器，它会匹配HTML文档中的所有 `<p>` 标签（段落元素）。当浏览器解析到这个CSS规则时，页面上的所有段落文本都会被设置为蓝色字体，并且字体大小为16像素。

标签选择器是最基础的选择器类型之一，其优先级相对较低，若其他更具体的选择器（如类选择器、ID选择器或属性选择器）也对同一个元素设置了样式，则更具体的选择器将覆盖由标签选择器设定的样式。

总的来说，标签选择器提供了简单而直接的方法，让我们能够批量地对网页中某一类型的元素进行样式的修改和控制。

类选择器

是CSS中用于根据HTML元素的class属性值来选中并设置样式的机制。通过类选择器，您可以为页面上具有特定类名的所有元素应用样式，而不论这些元素的具体类型。

在HTML中，给元素添加类名的方式是在标签的class属性中指定一个或多个以空格分隔的类名：


<p class="highlight important">这是一个高亮且重要的段落</p>

对应的CSS类选择器规则如下：

.highlight {
    background-color: yellow;
}

.important {
    font-weight: bold;
}

在这个例子中：
- `.highlight` 是一个类选择器，它会匹配所有class属性包含 "highlight" 的元素，并给它们设置黄色背景。
- `.important` 同样是一个类选择器，它会匹配所有class属性包含 "important" 的元素，并将文本设置为粗体。

类选择器的一个重要特点是灵活性，它可以应用于任何类型的HTML元素，并且允许单个元素同时拥有多个类，从而实现更丰富的样式组合和复用。与ID选择器不同的是，类选择器可以重复应用于多个元素，而ID则要求每个ID在整个文档中都是唯一的。

ID选择器

在CSS中是一种非常强大的选择器类型，它根据HTML元素的id属性来精确地选中并设置样式。每个HTML元素的id属性值在整个文档中必须是唯一的，因此ID选择器具有最高的优先级，可以用来为页面上的特定、独一无二的元素指定样式。

在HTML中，给元素添加id的方式是在标签的id属性中指定一个唯一的名称：

<p id="uniqueParagraph">这是一个具有唯一ID的段落</p>

对应的CSS ID选择器规则如下：

#uniqueParagraph {
    color: red;
    font-size: 24px;
}

在这个例子中：
- `#uniqueParagraph` 是一个ID选择器，它会匹配id属性值为 "uniqueParagraph" 的元素，并将其文本颜色设为红色，字体大小设为24像素。

由于ID的唯一性限制，ID选择器通常用于页面中的关键布局元素或需要特别控制样式的组件上，而不是用在多个重复出现的元素上。尽管ID选择器具有极高的优先级，但在实际项目开发中，更推荐使用类选择器进行复用和模块化设计，而将ID更多地用于JavaScript与DOM元素交互时的定位标识。

接下来写一个例子

用类选择器画三个颜色的盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 定义一个红色盒子样式 */
        .box-red {
            width: 100px; /* 设置盒子宽度为100像素 */
            height: 100px; /* 设置盒子高度为100像素 */
            background-color: red; /* 设置背景色为红色 */
            margin-bottom: 10px; /* 设置下边距为10像素，以便和其他盒子之间有间隔 */
        }
        
        /* 定义一个绿色盒子样式 */
        .box-green {
            width: 100px; /* 设置盒子宽度为100像素 */
            height: 100px; /* 设置盒子高度为100像素 */
            background-color: green; /* 设置背景色为绿色 */
            margin-bottom: 10px; /* 设置下边距为10像素，确保与下一个盒子间有一定间距 */
        }
        
        /* 定义一个蓝色盒子样式 */
        .box-blue {
            width: 100px; /* 设置盒子宽度为100像素 */
            height: 100px; /* 设置盒子高度为100像素 */
            background-color: blue; /* 设置背景色为蓝色 */
        }
    </style>
</head>
<body>

    <div class="box-red"></div>
    <div class="box-green"></div>
    <div class="box-blue"></div>

</body>
</html>

以上是我分享的一点css的知识

后续内容：请点击

最后求点赞，求分享，求抱抱...