1. 程式人生 > >Div的幾種選擇器

Div的幾種選擇器

屬性選擇器 lin htm spa pass 能力 blog span css

Div 是一個html標簽,一個塊級元素(單獨顯示一行),單獨使用沒有意義,需要結合CSS來使用,主要用於頁面的布局。

div選擇器:

1.元素選擇器:

 1     <style>
 2                 div{
 3             font-size: 5px; 
 4             color: red;
 5          }            
 6     </style>
 7     <body>
 8         <div >
 9             你停在了那條我們熟悉的街。
10 </div> 11 </body>

2.類選擇器:

 1     <style>
 2                 .div2{
 3             font-size: 5px; 
 4             color: red;
 5          }            
 6     </style>
 7     <body>
 8         <div  class="div2">
 9             你停在了那條我們熟悉的街。
10         
</div> 11 </body>

3.id選擇器:

 1     <style>
 2                 #div3{
 3             font-size: 5px; 
 4             color: red;
 5          }            
 6     </style>
 7     <body>
 8         <div  id="div3">
 9             你停在了那條我們熟悉的街。
10         </div>
11 </body>

4.層級選擇器

 1     <style>
 2                div  font{
                font-size: 40px; 
                color:brown;
            }           
 6     </style>
 7     <body>
 8             <div>
            把你準備好的臺詞全念一遍。
            <font> 愛你到最後 不痛不癢</font>
        </div>
11     </body>

5.屬性選擇器:

 1     <style>
 2               input[type = ‘text‘]{
            font-size: 40; 
                color: yellow;
            }           
 6     </style>
 7     <body>
 8            <div>
            我們的愛 <input type="text" name="password" />
        </div>
11     </body>

6.行內引入:

1 <div style="color: orange; font-size:20px ;">
2 怪我沒能力跟隨。
3 </div>

7.外部引入

style1.css文件中
     div{
             font-size: 5px; 
             color: red;
           } 

利用link導入:
<html>
    <head>
        <meta charset="UTF-8">
        <title> div選擇器</title>
            <link rel="stylesheet" href="style1.css" type="text/css"/>
    </head>
    <body>
        <div>
            你還要我怎樣
        </div>
    </body>
</html>

Div的幾種選擇器