HTML中选择器的使用及优先级比较

1.id选择器,其中每个标签的id选择器的值是唯一的

<div id="text1">

css中用  #text1{    }

2.类选择器(class),可以有多个

<div class="text1"></div>

<div class="text1 text2"></div>

css中用  .text{}

3.后代选择器

比如要是选定<li></li>则

            <ul>
                <li></li>
            </ul>

css中用: ul li{  }

4.子元素选择器,还是上个列子(注意只能找下一级,不能找下下级)

css中用 ul>li{  }

5.交集选择器

            <ul>
                <li class="text"></li>

                <li></li>
            </ul>

css中用:   li.text{}

6.并集选择器

<div></div>

<p></p>

css中用:  div,p{ }

优先级:

行内样式>id选择器>类选择器>标签选择器

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             .box1{color: aqua;}
 8             #box2{ color: blueviolet;}
 9             .box3 p .box4{color: blue;}
10             div>h3{color: darkslategray;}
11         </style>
12     </head>
13     <body>
14         <div class="box1">类选择器测试</div>
15         <div id="box2">id选择器测试</div>
16         <div class="box3"> 
17             <p><span class="box4">后代选择器</span></p>
18             <h3> 子元素选择器</h3>
19         </div>
20         </body>
21 </html>

猜你喜欢

转载自www.cnblogs.com/chen-wei123/p/12520995.html