CSS常用选择器

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

1.元素选择器
作用:通过元素选择器,可以选择页面中的指定元素。
语法:标签名{}

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style type="text/css">  
  p{  
        color:red;  
  }  
    </style>  
</head>  
<body>  
 <p>锄禾日当午</p>  
</body>  
</html>

2.id选择器
作用:通过元素的id属性值,选中唯一的一个元素。
语法:#id属性值{}

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style type="text/css">  
 #p1{  
        color:red;  
  }  
    </style>  
</head>  
<body>  
 <p>锄禾日当午</p>  
 <p id="p1">锄禾日当午</p>  
</body>  
</html>

3.类选择器
作用:通过元素的class属性值选中一组元素
语法: .class属性值{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .p2{
        color:greenyellow;
    }
    </style>
</head>
<body>
    <p>锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
</body>
</html>
<p class="p2 hello">happy new year</p>

4.选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素。
语法: 选择器1,选择器2,选择器N{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    #p1,.p2,h1{
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1>悯农</h1>
    <p>锄禾日当午</p>
    <p id="p1">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
</body>
</html>

5.通配选择器
作用:可以用来选中页面中的所有元素
语法:*{}

*{
    color:red;
}

6.复合选择器(交集选择器)
作用: 可以选中同时满足多个选择器的元素
语法: 选择器1选择器2选择器N{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    /* 
     * 为拥有class p3 的span元素设置背景颜色为黄色
     */
    span.p3{
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1>悯农</h1>
    <p class="p3">锄禾日当午</p>
    <span class="p3">锄禾日当午</span>
</body>
</html>

注意:对于id选择器来说,不建议使用复合选择器。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看