理解CSS选择器与优先级-优快云博客

本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/52389609

本文介绍了CSS的基础，重点在于CSS选择器的使用。内容包括选择符如何指定网页元素，声明的结构以及属性和值的关系。强调了声明中分号和换行的规范，以及选择器的优先级规则，例如ID选择器的优先级高于Class，Class高于HTML标签。通过实例展示了选择器生效的条件，并提到在实际应用中需考虑选择器的优先级问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
这里写图片描述
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下：

p{font-size:10px;color:red;}

！！！
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下：

p{
   font-size:10px;
   color:red;
}

这里写图片描述

接下来，是总体的知识结构：

举个栗子：

<!doctype>
<html>
    <head>
        <title>定义CSS样式（CSS选择器）</title>
        <meta charset="utf-8">
        <style type="text/css">
            .p{color:red; font-size:28px;}
            .pp{color:green; font-size:30px;}
            #ppp{color:yellow;}
        </style>
    </head>
    <body>
        <p class="p">我是一个段落</p>
        <div  id="ppp" class="pp">
            <p>哈哈</p>
            <p>嘻嘻</p>
        </div>
    </body>
</html>

这里写图片描述
看到结果，我们看到.pp{color:green; font-size:30px;}，这行代码似乎没有发挥作用，在这里还要考虑一个优先级的问题，ID>Class>HTML。
再举个栗子：

<!doctype>
<html>
    <head>
        <title>定义CSS样式（CSS选择器）</title>
        <meta charset="utf-8">
        <style type="text/css">
            h1,h2,h3,p{color:red;}
            a:link{ color:green; }
            a:hover{ color:blue;}
            a:active{ color:yellow;}
            a:visited{ color:red;}
        </style>
    </head>
    <body>
        <div  id="pp" class="p">
            <h1>我是标题</h1>
            <h2>我是标题</h2>
            <h3>我是标题</h3>
            <p>我是段落</p>
        </div>
        <a href="http://www.baidu.com" target="_blank" >链接1</a>
        <a href="http://www.baidu11.com" target="_blank" >链接2</a>
        <a href="http://www.baidu22.com" target="_blank" >链接3</a>
    </body>
</html>