CSS選擇符總結(Selectors)

時間 2019-11-12

標籤 css 選擇總結 selectors 欄目 CSS 简体版

原文原文鏈接

一.通配選擇符(Universal Selector):

語法：*

說明：1.*表示通配符,表示全部的
2.格式:*{樣式列表}
3.用於整個頁面或網站字體、邊距、背景等

例子：除了規定div標籤內包含的元素使用div大括號內指定的樣式，其它的都使用*大括號內指定的樣式。

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>通配選擇符</title>
 6 <style type="text/css">
 7 *
 8 {/**定義網頁中全部元素字體、邊距樣式*/
 9  margin:0px;
10  font-size:28px;
11  font-family: "華文彩雲";
12 }
13 div  *
14 {/**定義div中全部元素字體、邊距樣式*/
15 margin:10px;
16 color:#FF0000;
17 }
18 </style>
19 </head>  
20 <body>
21 普通文本
22 <p>段落文本</p>
23 <span>span內聯文本</span>
24 <div>div文本
25       <div>div子div元素中的文本</div>
26       <p>div中段落文本</p>
27       <span>div中span內聯文本</span>
28 </div>
29 </body>
30 </html>

輸出以下：css

二. 類型選擇符（Type Selectors）：

語法：E1

說明：1.類型選擇符用於設定特定HTML元素樣式
2.元素名稱不區分大小寫
3.格式:HTML元素名{樣式列表}

例子：p指定了大括號內的樣式，那麼下面標籤類型爲p的都是用它的樣式；同理下面的div也是。

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>類型選擇符</title>
 6 <style type="text/css">
 7 p
 8 {
 9 font-size:1cm;
10 font-style:oblique;
11 }
12 div
13 {
14 color:#FFFF00;
15 font-family:"方正黃草簡體";
16 font-size:1in;
17 }
18 </style>
19 </head>
20 <body>
21 <p>類型選擇符</p>
22 <div>類型選擇符</div>
23 </body>
24 </html>

輸出以下：html

三.屬性選擇符（Attribute Selectors）：

語法：1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]

說明：用於定義特定屬性值的HTML元素樣式.
例子：咱們看到下面的例子裏面第一個屬性爲type的，那麼下面屬性爲type的就使用它指定的樣式，同理button，有的人就問了，在button的前面不是也有type類型的嗎，在這種狀況下，取後面的標籤樣式，等同於覆蓋了同括號內前面的type，後來者居上。

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>屬性選擇符</title>
 6 <style type="text/css">
 7 input[type]
 8 {
 9 border:2px solid #E81D2B;
10 }
11 input[name='button']
12 {
13 border:1px solid  #868686;
14 height:25px;
15 width:60px;
16 }
17 </style>
18 </head>
19 <body>
20 <form action="#">
21 <div>用戶名:<input type="text"  name="name"/></div>
22 <div>密碼:<input  type="password"  name="password"/></div>
23 <div>確認密碼:<input  type="password"  name="confirmPWD"/></div>
24 <div>電子郵箱:<input  type="text"  name="email"/></div>
25 <div><input  type="submit"  value="用戶註冊" name="button"/>&nbsp;
26 <input  type="reset"  value="從新填寫" name="button"/></div>
27 </form>
28 </body>
29 </html>

輸出以下：字體

四.包含選擇符（Descendant Selectors）：

語法： E1 E2
說明：1.用於子元素對父元素樣式的擴展

2. 格式:父選擇符子選擇符{樣式列表}

3.注意HTML元素包含關係

例子：包含選擇符簡單，以下面的span是包含在p內的，可是span裏面的元素選擇的就是div p span 指定的樣式，p裏面的元素選擇的就是div p 指定的元素，這就是就近原則。

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>包含選擇符</title>
 6 <style type="text/css">
 7 div p
 8 {
 9 font-size:32px ;
10 font-weight:lighter;
11 }
12 div p span
13 {
14 color:#FF0000 ;
15 text-shadow: 20px 10px 2px #E81D2B;  
16 }
17 </style>
18 </head>
19 <body>
20     <p>包含選擇符</p>
21     <div>
22         <p> 包含選擇符
23          <span>包含選擇符</span>
24         </p>
25     </div>
26 </body>
27 </html>

輸出以下：網站

五.子對象選擇符（Child Selectors）：

語法： E1>E2

說明：1.用於子對象元素對父對象元素樣式擴展
2. 格式:父對象選擇符>子對象HTML元素名稱{樣式列表}

3.注意和包含選擇符的區別

4.使用狀況較少,一般能夠用包含選擇符取代

例子：子對象選擇符其實和本來標籤使用順序沒有什麼變化，如<ul><li>,,,</li></ul>. li裏面定義的是什麼樣式，那麼下面的<li>裏面的內容就是什麼的樣式.

 1 <!DOCTYPE html >
 2 <html >
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4 <title>子對象選擇符</title>
 5 <style type="text/css">
 6 /**
 7 經常使用子對象選擇符
 8 table>tbody>tr>td
 9 ul>li
10 ol>li
11 div>子div
12 dl>dt
13 dl>dd
14 form>input
15 */
16 ul > li
17 {
18 font-size:18px;
19 color:#4F87C2;
20 }
21 table>td
22 {
23 font-style:italic;
24 font-weight:bolder;
25 }
26 dl>dd
27 {
28 font-weight:bolder;
29 }
30 div >div{
31 font-weight:bolder;
32 }
33 form> input
34 {
35 border:2px solid #4F87C2;
36 }
37 </style>
38 </head>
39 <body>
40 水果列表
41 <ul >
42 <li>香蕉</li>
43 <li>蘋果</li>
44 <li>桃子</li>
45 </ul>
46 <table > 
47   <tr>
48   <td>單元格一</td>
49   <td>單元格一</td>
50   </tr>
51 </table>
52 三大球類運動
53 <dl>
54  <dt>足球</dt>
55  <dd>全世界第一大球類運動</dd>
56  <dt>籃球</dt>
57  <dd>全世界第二大球類運動</dd>
58  <dt>排球</dt>
59  <dd>全世界第三大球類運動</dd>
60 </dl>
61 <div>第一層div<div>第二層div</div></div>
62 <form>
63 <input type="button" value="普通按鈕"/>
64 </form>
65 
66 </body>
67 </html>

輸出以下：ui

六.ID選擇符（ID Selectors）：

語法： #sID
說明：1.用於定義惟一ID屬性值元素樣式

2. 格式:#選擇符名稱{樣式列表}

3.選擇符名稱必須和元素ID屬性值完成相同,且區分大小寫

例子：ID選擇符標籤以#開頭，那麼下面ID的內容和#後面相同的就使用該定義下的樣式，如name。

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>ID選擇符</title>
 6 <style type="text/css">
 7 #name
 8 {
 9 border:2px solid #4F87C2;
10 width:200px;
11 height:30px;
12 }
13 </style>
14 </head>
15 <body>
16 <form  action="#">
17  文本框一:
18  <input type="text" name="name" id="name"/>
19  文本框二:
20  <input type="text" name="address"/>
21 </form>
22 </body>
23 </html>

輸出以下：spa

七.類選擇符（Class Selectors）：

語法：E1.className
說明： 1.用於選擇特定類選擇符

2. 能夠選擇一個或以上的類選擇符

3.區分大小寫

例子：以點.開頭的標籤訂義下的樣式，下面class後面的內容和前面點後面的同樣的話就使用該樣式。

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>類選擇符</title>
 6 <style type="text/css">
 7 .myButton
 8 {
 9 border:2px solid #4F87C2;
10 width:200px;
11 height:30px;
12 }
13 </style>
14 </head>
15 <body>
16 <form  action="#">
17  文本框一:
18  <input type="text" name="name" class="myButton"/>
19  文本框二:
20  <input type="text" name="address"  class="mybutton"/>
21 </form>
22 </body>
23 </html>

輸出以下：3d

八.（選擇符混合使用）選擇符分組（Grouping）：

語法：E1.E2.E3
說明： 1.常見的有類型選擇符與類選擇符；格式:html元素名.類選擇符名稱,中間不能有空格

2.其它選擇與包含選擇符；最多見使用方式

例子：顧名思義就是混亂在一塊兒使用，規則仍是那樣。

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>選擇符混合使用</title>
 6 <style type="text/css">
 7 p.bigFont
 8 {
 9 font-size:36px;
10 font-family:"微軟雅黑"；
11 }
12 p#colorFont
13 {
14 color:#FF0000;
15 } 
16 .div1 span, #div1 span, div div p
17 {
18 color:#FF00FF;
19 font-weight:lighter;
20 }
21 </style>
22 </head>
23 <body>
24 <p>普通文字<div>11</div></p>
25 <p class="bigFont">放大文字</p>
26 <div class="bigFont">div放大文字</div>
27 <p id="colorFont">彩色字體</p>
28 <div class="div1">
29 <span>div中的span文字</span>
30 </div>
31 <div><div><p>子DIV中的段落文字</p></div></div>
32 </body>
33 </html>

輸出以下：code

常見的三種樣式表：

一.內嵌樣式表：內嵌樣式表其實就是把樣式放在<head>,,,,</head>內部。

例子：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>內嵌樣式表</title>
 6 <head>
 7 <!-- 定義在頭部標籤裏面-->
 8 <style type="text/css">
 9 p
10 { font-family:"隸書";
11   font-size:28px;
12  color:#FF0000;
13 }
14 </style>
15 </head>
16 <body>
17 <h1>靜夜思</h1>
18 <h2>做者李白</h2>
19 <p>牀前明月光，</p>
20 <p>疑是地上霜.</p>
21 <p>我是郭德剛，</p>
22 <p>低頭思故鄉.</p>
23 </body>
24 </html>

輸出以下：orm

二.行內樣式表：其實就是把樣式放在<body>,,,,,,,,</body>內部。

例子：

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>行內樣式表</title>
 6 </head>
 7 <body>
 8 <div style="float:right" >
 9     <h1>靜夜思</h1>
10     <h2>做者李白</h2>
11     <div style="font-family:'隸書';font-size:28px;color:#FF0000;">
12         <p>牀前明月光，</p>
13         <p>疑是地上霜.</p>
14         <p>我是郭德剛，</p>
15         <p>低頭思故鄉.</p>
16     </div>
17 </div>
18 </body>
19 </html>

輸出以下：xml

三.連接外部樣式表：樣式放在連接的css/demo.css那個文檔裏，而連接放在<head>,,,,,,,,,,,</head>內部。

例子：

 1 <!DOCTYPE html >
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>連接外部樣式表</title>
 6 <link href="css/demo.css" type="text/css"   rel="stylesheet"/>
 7 </head>
 8 <body>
 9 <h1>靜夜思</h1>
10 <h2>做者李白</h2>
11 <p>牀前明月光，</p>
12 <p>疑是地上霜.</p>
13 <p>我是郭德剛，</p>
14 <p>低頭思故鄉.</p>
15 </body>
16 </html>

輸出以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。