【15】CSS基础（2）——选择器①基础选择器

最新推荐文章于 2024-10-05 20:33:02 发布

原创最新推荐文章于 2024-10-05 20:33:02 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端基础专栏收录该内容

79 篇文章

订阅专栏

本文详细介绍了CSS中的基础选择器，包括标签选择器、ID选择器、类选择器和通配符选择器。标签选择器用于选择同名标签，ID选择器基于唯一ID选取元素，类选择器通过class属性选择多个元素，通配符选择器作用于所有标签。文章探讨了各类选择器的特点和适用场景，强调了在实际工作中类选择器用于样式设置，ID选择器用于JavaScript交互的使用规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一、选择器是什么？

在内嵌式和外联式CSS中，要想将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素，这时需要用CSS 中的选择器。**
选择器：选择要添加样式的 HTML 标签的一种方法、模式。

二、选择器有哪些？

首先学习 css2.1 版本的七种选择器：
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器；
高级选择器：后代选择器、交集选择器、并集选择器。

基础选择器

（一）标签选择器

1.含义及示例：

通过标签名去选择标签元素；
书写方式：标签名；
选择范围：选中的是HTML文件中所有的同名标签。
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
示例1其中<table> <td> 都是标签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table {
            width: 810px;
            height: 810px;
        }
        td {
            text-align: center;
        }
    </style>
</head>

示例2其中<p> 是标签名

p { width: 300px; font-size: 14px; }

2.特点：

优点:以选中所有的同名标签，设置所有同名标签的公共样式。
缺点:只能实现全选，不能对局部的标签添加特殊样式。

（二）id 选择器

1.含义及示例：

通过标签上的 id 属性去选择标签;
书写方式：#id 属性值;
选择范围：只能选中一个标签.
id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
★注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。
示例

<DOCTYPE html>
<html>
    <head>
       <title>id选择器示例</title>
       <style>
           #name1{
                color: red;
                font-weight: bold;
                font-size: 24px;
            }
       </style>
    </head>
    <body>
       <p id="name1" >今天真开心</p>
       <p>学习使我快乐</p>
       <p>继续加油</p>
    </body>
</html>
</html>

在这里插入图片描述

2.特点：

缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。所以实际应用中很少用。

（三）类选择器

1.含义及示例：

通过标签的 class 属性去选择标签；
书写方式：.class属性值
选择范围：是页面中所有 class 属性值相同的标签；（id唯一，属性值却可以相同）
★ class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写；
★class 属性值可以与其他的class相同；
多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中；即：一个选择器可以选中多个标签，只要这个class属性在多个标签中都有；（如示例1）
一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同个标签；即：多个选择器也可以选中一个标签,只要多个class属性都在这个标签里。（如示例2）
示例1


<DOCTYPE html>
<html>
    <head>
       <title>类选择器示例</title>
       <style>
           .v1 {
               color: blueviolet;
           }
           .v2 {
               font-size: 26px;
           }
           .v3 {
               font-weight: bold;
           }
           
       </style>
    </head>
    <body>
       <p class="v1" >今天真开心</p>
       <p class="v1 v2 v3">学习使我快乐</p>
       <p class="v1" >继续加油</p>
    </body>
</html>

在这里插入图片描述

示例2

<DOCTYPE html>
<html>
    <head>
       <title>类选择器示例</title>
       <style>
           .v1 {
               color: blueviolet;
           }
           .v2 {
               font-size: 26px;
           }
           .v3 {
               font-weight: bold;
           }
       </style>
    </head>
    <body>
       <p>今天真开心</p>
       <p class="v1 v2 v3">学习使我快乐</p>
       <p>继续加油</p>
    </body>
</html>

在这里插入图片描述

2.类选择器的特殊应用

★原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。
比如：上示例1 中的v1 就是原子类

3.特点：

优点：通过一个类选择器进行多选，选中多个标签，添加公共样式；一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。
★ 实际工作中，通常我们有一个使用规律“类上样式(CSS)，id 上行为(JavaScript)”
（解释：设置样式时，常用类选择器，设置交互行为的时用id选择器）

（四）通配符选择器

1.含义及示例：

通过一个特殊符号选择页面内所有的标签；
书写方式：*
选择范围：包含 <html>标签在内的所有标签。
示例


<DOCTYPE html>
<html>
    <head>
       <title>通配符选择器示例</title>
       <style>
           * {
               color: blueviolet;
           }
       </style>
    </head>
    <body>
       <p>今天真开心</p>
       <p>学习使我快乐</p>
       <p>继续加油</p>
    </body>
</html>