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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM