选择器 - 简书

选择器

<!-- 
1.常用选择器
 
 1）标签选择器（元素选择器） -  直接将标签名作为选择器，选中当前页面中所有指定的标签
 
 2)id选择器 - 在id属性值前加#号作为一个选择器，选中当前页面中id值指定的标签（id一般是唯一的）
 
 3）类选择器（class选择器） -  在class属性之前加.作为一个选择器，选中当前页面中所有class值是指定的值的标签
 注意：不同的标签的class值可以相同，同一个标签可以同时拥有多个不同的class值
 
 4)后代选择器 - 将多个独立的选择器用空格隔开，作为一个选择器
 
 5)父子选择器 - 将多个独立的选择器用>隔开，作为一个选择器
 
 6)群组选择器 - 将多个独立的选择器用逗号隔开作为一个选择器，同时选中每个选择器选中的标签
 
 7)通配符 - 将*作为选择器，选中当前页面中所有的标签
 

 
 -->


<!DOCTYPE html>

<html>
    
    <head>
        
        <meta charset="utf-8">
        
        <title></title>
        
        <style type="text/css">
            
            /* 标签选择器 */
/*          p{
                color: aquamarine;
            } */
            
            
            /* id选择器 */
/*          #p1{
                color: gold;
            } */
            
            
            /* 类选择器 */
/*          .p1{
                color: seagreen;
            }
            .p2{
                background-color: #FFE4C4;
            } */
            
            
            /* 后代选择器 */
/*          div #p5{
                color: firebrick;
            } */
            
            
            /* 父子选择器 */
/*          div>#p4{
                color: skyblue;
            } */
            
            
            /* 群组选择器 */
/*          #p4,.p1,a{
                color: coral;
            } */
            
            
            /* 通配符选择器 */
/*          *{
                color: deeppink;
            } */
            
        </style>
        
    </head>
    
    <body>
        
        <h1 id="h1">标题一</h1>
        
        <p class="p1">段落1</p>
        
        <a id="a1" href="www.baidu.com">百度</a>
        
        <p class="p2 p1">段落二</p>
        
        <div id="div1">
            
            <p class="p2">段落三</p>
            
            <h2 class="p1">标题二</h2>
            
            <p id="p4">段落四
                <p id="p5">段落五</p>
            </p>
            
        </div>
        
    </body>
</html>

选择器的优先级

<!-- 选择器的优先级
 选择器的优先级看选择器的权重值，谁的权重值大，谁的优先级就高，如果权重级一样，那谁后写谁优先级高，内联样式表的优先级最高
 
 标签选择器：1
 class选择器：2
 id选择器：4
 后代选择器：求各个选择器的和
 可以在某个属性后面加！important 让当前属性的有限级最高，内联也比不了！
 
 -->



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <style type="text/css">
            
            
            .c2{
                color: mediumaquamarine;
            }
            
            
            #p1{
                color: plum;
            }
            
            
            p{
                color: gray;
            }
            
            
        </style>
    </head>
    <body>
        
        <div id="div1" class="c1">
            
            <p class="c2" id="p1">标题1</p>
            
        </div>
        
    </body>
</html>