常用选择器

最新推荐文章于 2022-12-04 15:21:30 发布

每天都是努力学习的一天

最新推荐文章于 2022-12-04 15:21:30 发布

阅读量242

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/weixin_45958029/article/details/120530372

版权

常用选择器：

常用选择器有通配选择器、id选择器、元素选择器、类选择器、复合选择器、选择器分组。

通配选择器：

通配选择器
作用：选中页面中的所有元素


*{
   margin: 0 ;
   padding: 0;

}

元素选择器：

元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{}

<!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>
        p{
            color: cadetblue;
        }
        h1{
            color: chartreuse;
        } 
    </style>
</head>
<body>
    <h1>标题</h1>
   <p>老大徒伤悲</p>
    
</body>
</html>

id选择器：

id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}

<!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>
       #red{
           color: red;
       }
    </style>
</head>
<body>
    <div id="red">儿童相见不相识</div>
    
</body>
</html>

注：html中的id不允许重复

类选择器

类选择器
作用：根据元素的class属性值旋转一组元素
语法：class属性值

<!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>
       .blue{
           color: blue;
           font-size: 14px;
       }
    </style>
</head>
<body>
    <div class="blue">秋水共长天一色</div>
    
</body>
</html>

复合选择器

交集选择器

作用：选中同时复合多个条件的元素

表达：选择器1选择器2选择器3选择器n{}

注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

<!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>
        /* 将class为red的元素设置为） */
       .red{
           color: skyblue;
       }
       div.red{
           font-size: 20px;
       }
    
    </style>
</head>
<body>
    <div class="red">落霞与孤鹜齐飞</div>
    <p class="red">秋水共长天一色</p>
   
</body>
</html>

选择器分组

选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3，选择器n{}

#b1,.p1,h1,span{}
<!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>
         h1,span{
           color: green;
       }
    </style>
</head>
<body>
    <h1>ddd</h1>
   <span>sss</span>
    
</body>
</html>

每天都是努力学习的一天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常用选择器

常用选择器：通配选择器：通配选择器作用：选中页面中的所有元素*{ margin: 0 ; padding: 0;}元素选择器：元素选择器作用：根据标签名来选中指定的元素语法：标签名{} 例子：p{} h1{} p{ color: cadetblue; } h1{ color: chartreuse;
复制链接

扫一扫