CSS基本选择器及其优先级-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52808469/article/details/128938161

基本选择器

1.标签选择器：

语法：标签名 {}

2.id选择器：

语法：#id值 {}

3.类选择器：

语法：.类名 {}

4.通配符选择器:

语法：* {}

5.!important是优先级最高的选择器

基本选择器优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: red;
        }

        #one {
            color: green;
        }

        .two {
            color: blue;
        }

        * {
            color: yellow;
        }
    </style>
</head>

<body>
    <!-- 基本选择器
          1.标签选择器：
          语法：标签名 {}
          2.id选择器：
          语法：#id值 {}
          3.类选择器：
          语法：.类名 {}
          4.通配符选择器:
          语法：* {}
          5.!important是优先级最高的选择器
    -->
    <!-- 基本选择器优先级
      !important>行内样式>id选择器>类选择器>标签选择器>通配符选择器 -->
    <p>我是黄色</p>
    <p id="one">我是绿色</p>
    <p class="two">我是蓝色</p>
    <span>我是红色</span>
</body>

</html>

css基本选择器

基本选择器

1.标签选择器：

2.id选择器：

3.类选择器：

4.通配符选择器:

5.!important是优先级最高的选择器

基本选择器优先级