CSS中的三种基础选择器及优先级

weixin_62198635

于 2024-08-30 13:54:19 发布

阅读量309

点赞数 2

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_62198635/article/details/141690449

版权

三种基础选择器是：id选择器、类选择器、标签选择器

1.标签选择器：通过标签名找到对应元素，属性名和属性值是可以重复的，

标签名{

属性名：属性值；

...

}

使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   div{
        color: pink;
    }
</style>
<body>
    <div >这是一段粉色的字</div>
    <div >这是一段粉色的字</div>
    <div>这是一段粉色的字</div>
</body>
</html>

运行结果：

2.类选择器：通过类名找到对应元素

.类名{

属性名：属性值；

...

}
比如：.changered

使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .changered{
        color: red;
     }
</style>
<body>
    <div class="changered">这是一段红色的字</div>
    <div class="changered">这是一段红色的字</div>
    <div class="changered">这是一段红色的字</div>
</body>
</html>

运行结果：

3.id选择器：通过id名找到对应元素

#id名{

属性名：属性值；

...

}

例如：colorID

使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     #colorID{
        color: green;
     }
</style>
<body>
    <div class="changegreen" id="colorID">这是一段绿色的字</div>
    <div class="changegreen" id="colorID">这是一段绿色的字</div>
    <div class="changegreen" id="colorID">这是一段绿色的字</div>
</body>
</html>

运行结果：

优先级：id选择器>类选择器>标签选择器

4.将id选择器和类选择器放在一起比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     #colorID{
        color: green;
     }
     .changeprink{
        color: pink;
     }
</style>
<body>
    <div class="changeprink" id="colorID">我想让它变成粉色，但是失败了，因为id选择器>类选择器</div>
    <div class="changegreen" id="colorID">这是一段绿色的字</div>
    <div class="changegreen" id="colorID">这是一段绿色的字</div>

</body>
</html>

运行结果

5.将类选择器和标签选择器放在一起比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     div{
        color: #0f1bc1;
     }
     .changeprink{
        color: pink;
     }
</style>
<body>
    <div class="changeprink" >我想让它变成粉色，成功了，因为类选择器>标签选择器</div>
    <div class="changeprink" >这是一段粉色的字</div>
    <div class="changeprink" >这是一段粉色的字</div>

</body>
</html>

运行结果