CSS的三种基本选择器

最新推荐文章于 2024-05-28 12:36:33 发布

齐天大荒

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量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>

齐天大荒

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS的三种基本选择器

Css的三种基本选择器1.标签选择器格式：标签{}特点作用域为全局同类标签无法针对同类标签中个别标签区别处理实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三种基本选择器</title>  <style> h1{
复制链接

扫一扫