三种基本的选择器

最新推荐文章于 2024-10-13 20:52:25 发布

网虫外外

最新推荐文章于 2024-10-13 20:52:25 发布

阅读量115

点赞数

文章标签： css3 html css

本文链接：https://blog.csdn.net/qq_45326705/article/details/120981030

版权

本文介绍了CSS选择器的优先级规则，从高到低依次为ID选择器、类选择器和标签选择器。示例中展示了如何使用这些选择器来设置元素样式，包括颜色属性。通过实例，读者能理解不同选择器的权重差异及其在实际应用中的影响。

摘要由CSDN通过智能技术生成

关于优先级 id选择器 > class选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /*标签选择器：会选择所有的相同属性的元素*/
        h1{
            /*使用标签+{}进行定义*/
            color: #2323d9;
        }
    </style>
</head>
<body>
<h1>我是标签</h1>
<h1>俺也一样</h1>
<p>张飞说：俺也一样</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*类选择器：可以多个标签归类，实现复用功能，可以跨标签使用 */
        .class1{
        /*使用.+类名+{}进行定义*/
            color: red;
        }
        .class2{
            color: #2323d9;
        }
    </style>
</head>
<body>
<h1 class="class1">标签1</h1>
<h1 class="class2">标签2</h1>
<h1 class="class1">标签3</h1>
<p class="class2">这是一句话</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id选择器：id必须是唯一值；*/
        #id1{
            /*使用#+id名+{}定义*/
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 id="id1">标题1</h1>
<h1 id="id2">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
</body>
</html>
关于优先级 id选择器 > class选择器 > 标签选择器