CSS基础选择器(标签、类、id、交集、后代、并集、子代)

2021-08-29 11:04:34

1.标签选择器

直接以html标签的名称作为选择器名称

2.类选择器

在标签中以class="名称”的方式自定义样式名称，在style标签中以.名称的方式定义样式

3.id选择器

在标签中以id="名称”的方式自定义样式名称，在style标签中以#名称的方式定义样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS选择器</title>
    <style>
        /* 标签选择器 */
        h2{
            font-size: 24px;
            color: red;
        }
        
        p{
            font-family: "微软雅黑";
            font-size: 16px;
        }
        
        /* 类选择器 */
        .p_content{
            font-weight: bold;
            color: green;
            }
            
        /* id选择器 */
        #p_id{
             color: blueviolet;
             font-style: italic;
             text-decoration:underline;
            }
        
        #p_id_2{
             color: skyblue;
            
            }    
    </style>
</head>
<body>
    <h2>今天是女神节</h2>
    <p>享有购物5折优惠，快来购买</p>
    <p class="p_content">lily,伊芙丽,优衣库等品牌</p>     
    <p id="p_id">满600减100元，满1000减200元</p>
    
    
    <!-- id选择器和类选择的区别
     同一个标签的id选择器名称不能重复，一个页面中只能有一个，但是同名称的类选择器可以有多个，可以重复使用
     -->
     <p class="p_content">lily,伊芙丽,优衣库等品牌</p>     
     <p id="p_id_2">满600减100元，满1000减200元</p>
</body>
</html>

View Code

4.交集选择器

由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或者id选择器，两个选择器之间没有空格。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p{
                color: blue;
            }
            
            .special{        
                color: red;
            }
            
            /* 交集选择器，标签和类之间没有空格 */
            p.special{
                color: purple;
            }
        </style>
    </head>
    <body>
        <p>普通段落文本<p>
        <p class="special">添加了指定样式的普通段落文本<p>        
        
        <h3 class="special">我是标题标签</h3>
        <div class="special">我是块标签</div>
    </body>
</html>

View Code

5.后代选择器，选择元素的后代子元素，中间有空格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p{
                color: blue;
                font-size: 30px;
            }
            
            strong{
                background-color: aquamarine;
            }
            
            
            /* 后代选择器，有空格，表示标签嵌套的其他元素 */
            p strong{
                color: red;
            }
            
            p strong strong{
                color: palegoldenrod;
            }
        </style>
    </head>
    <body>
        <strong>普通段落文本</strong>
        <p>添加了指定样式的普通<strong>段落<strong>文本</strong></strong><p>        
    </body>
</html>

View Code

6.并集选择器，多种标签使用同一种样式，用,号隔开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            strong,p,h4{
                color: indianred;
                font-size: 19px;
            }
        </style>
    </head>
    <body>
        <strong>普通段落文本</strong>
        <p>添加了指定样式的普通<strong>段落<strong>文本</strong></strong><p>        
        <h4>我是标题</h4>
    </body>
</html>

View Code

7.子代选择器，只选择某个元素的子元素，即只选择儿子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            
            /* 选中p标签的所有后代元素strong*/
            p strong{
                color: green;
            }
            /* 选中p标签的子元素strong,儿子元素 */
            p>strong{
                color: red;
            }
            
        </style>
    </head>
    <body>
        <p>这是一个<strong>子元素<strong>选择器</strong>的案例1</strong></p>
        <p>这是一个<em>子元素<strong>选择器</strong>的案例2</em></p>
    </body>
</html>

View Code

CSS基础选择器(标签、类、id、交集、后代、并集、子代)

码农公寓

相关文章