CSS03：三种基本选择器

一个优雅的搬砖人

于 2022-02-10 16:47:03 发布

阅读量405

点赞数 1

分类专栏： # CSS 文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_48306950/article/details/122864155

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中的基本选择器，包括标签选择器、类选择器和ID选择器的使用方法，以及它们在页面元素选取中的作用。同时，讨论了选择器的优先级，明确了ID选择器>类选择器>标签选择器的优先级规则，帮助理解CSS样式的应用和覆盖原则。

摘要由CSDN通过智能技术生成

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

标签选择器

使用标签作为选择器：标签 {} ，这种选择器会选择到页面上所有是这个标签的元素

其中 * {} 代表通配选择器，选择页面上所有的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        /* 标签选择器，会选择到页面上所有的这个标签的元素 */
        h2 {
            color: #ef6969;
        }
    </style>
</head>
<body>
<h2>好好学习</h2>
<p>天天向上</p>
<h2>学java</h2>
</body>
</html>

类选择器

也可以叫 class 选择器

在标签上定义属性 class ，使用时的格式为： .class的名称 {}

好处：可以多个标签归类，使用同一个 class ，可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 类选择器的格式 .class的名称{}
           好处：可以多个标签归类，是同一个class，可以复用
        */
        .one {
            color: gold;
        }
        .two {
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1 class="one">标题1</h1>
<h1 class="two">标题2</h1>
<h1>标题3</h1>
<p class="one">段落P</p>
</body>
</html>

id 选择器

在标签中定义属性 id，使用的格式为： #id的名称 {}

注意：id 的名称必须保证全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器 : id 必须保证全局唯一
           #id名称 {}
        */
        #biaoti1 {
            color: #ff008a;
        }
    </style>
</head>
<body>
<h1 id="biaoti1">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
</body>
</html>