CSS的三种基本选择器

最新推荐文章于 2024-10-02 23:10:13 发布

齐天大荒

最新推荐文章于 2024-10-02 23:10:13 发布

阅读量2.2k

点赞数

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

本文链接：https://blog.csdn.net/qq_47897078/article/details/121998936

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Css的三种基本选择器

1.标签选择器

格式 ：标签{}

特点

作用域为全局同类标签
无法针对同类标签中个别标签区别处理

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种基本选择器</title>
    <!--标签选择器-->
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
</body>
</html>

2.class（类）选择器

格式：.类名{}

特点

作用域为全局同类名标签
可将标签分类化区别处理

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
     .t{
         color: red;
     }
    </style>
</head>
<body>
<h1 class="t">标题1</h1>
<h1 class="t2">标题2</h1>
<h1>标题3</h1>
<h2 class="t">标题4</h2>
</body>
</html>

3.id选择器

格式：#id名{}

特点

id名具有全局唯一性
仅对同id名标签生效

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #t3{
            color: yellow;
        }
    </style>

</head>
<body>
<h1 class="t">标题1</h1>
<h1 class="t2">标题2</h1>
<h1 id="t3">标题3</h1>
<h2 class="t">标题4</h2>
</body>
</html>

三种基本标签优先级

id选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种基本选择器</title>
    <style>
<!--1.标签选择器
h1{
   color:red;
   }
-->

<!--2.class选择器
.two{
    color:yellow;
    }
-->

<!--3.id选择器 全局唯一
#three{
      color:red;
}
-->
    </style>
</head>
<body>
<h1>标题1</h1>
<h1 class="two" id="Two">标题2</h1>
<h1 id="three">标题3</h1>


</body>
</html>