CSS学习（二）——基本选择器

最新推荐文章于 2023-12-07 07:11:21 发布

笔锋Sharpen

最新推荐文章于 2023-12-07 07:11:21 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/weixin_52725999/article/details/114011386

版权

本文详细介绍了CSS中的基本选择器，包括标签选择器、类选择器和ID选择器的使用方法。标签选择器用于选取一类标签，类选择器可以跨标签选择具有相同类属性的元素，而ID选择器则确保了全局唯一性。此外，还探讨了这三种选择器的优先级：ID选择器优先级最高，其次是类选择器，最后是标签选择器。通过实例展示了优先级的决定因素并不遵循就近原则。

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

基本选择器

标签选择器

选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择页面上所有的标签*/
        h1{
            color: #347e6f;
        }
        p{
            font-size:8px ;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<p>Hello word</p>
</body>
</html>

类选择器 class

选择所有class属性一样的标签，可以跨标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的样式，.class的名称{},好处
        好处：
        可以多个相同的标签或不同的标签归类，是同一个class，可以复用

        */
        .fir{
            color: orangered;
        }
        .sec{
            color: aqua;
        }
    </style>

</head>
<body>
<h1 class="fir">类选择器1</h1>
<h1 class="sec">类选择器2</h1>
<h1>类选择器3</h1>
<p  class="fir">Hello word</p>
</body>
</html>

id选择器

全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器: id必须保证全局唯一
           #id名称{}
         */
        #number1{
            color: blueviolet;
        }
    </style>
</head>
<body>
<h1 id="number1">id选择器</h1>
<h1 id="number2">id选择器</h1>
<h1>id选择器</h1>

</body>
</html>

这三个选择器优先级

id选择器>class选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        优先级
        不遵循就近原则，id选择器>class选择器>标签选择器
         */
        #no1{
            color: #347e6f;
        }
        .firc{
            color: blueviolet;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<h1 id="no1" class="firc">谁会优先呢？动手试一试吧</h1>
<h1 class="firc">谁会优先呢？动手试一试吧</h1>
<h1 class="firc">谁会优先呢？动手试一试吧</h1>
<h1 >谁会优先呢？动手试一试吧</h1>
<h1 >谁会优先呢？动手试一试吧</h1>
</body>
</html>