CSS 三种基本选择器

标签选择器

格式 ：标签{}

实例

<!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>

在这里插入图片描述

特点

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

类选择器

格式：.类名{}

实例

<!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>

在这里插入图片描述

特点

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

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>

在这里插入图片描述

特点

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

三种基本标签优先级

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

版权声明：本文为weixin_45672377原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。