一.通配選擇符(Universal Selector):
文法：*
說明：1.*表示萬用字元,表示所有的
2.格式:*{樣式列表}
3.用於整個頁面或網站字型、邊距、背景等
例子：除了規定p標籤內包含的元素使用p大括弧內指定的樣式，其它的都使用*大括弧內指定的樣式。
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>通配選擇符</title><style type="text/css">*{/**定義網頁中所有元素字型、邊距樣式*/ margin:0px; font-size:28px; font-family: "華文彩雲";}div *{/**定義div中所有元素字型、邊距樣式*/margin:10px;color:#FF0000;}</style></head> <body>普通文本<p>段落文本</p><span>span內聯文本</span><div>div文本 <div>div子div元素中的文本</div> <p>div中段落文本</p> <span>div中span內聯文本</span></div></body></html>
輸出如下：
二. 類型選擇符（Type Selectors）：
文法：E1
說明：1.類型選擇符用於設定特定HTML元素樣式
2.元素名稱不區分大小寫
3.格式:HTML元素名{樣式列表}
例子：p指定了大括弧內的樣式，那麼下面標籤類型為p的都是用它的樣式；同理下面的p也是。
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>類型選擇符</title><style type="text/css">p{font-size:1cm;font-style:oblique;}div{color:#FFFF00;font-family:"方正黃草簡體";font-size:1in;}</style></head><body><p>類型選擇符</p><div>類型選擇符</div></body></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，後來者居上。
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>屬性選擇符</title><style type="text/css">input[type]{border:2px solid #E81D2B;}input[name='button']{border:1px solid #868686;height:25px;width:60px;}</style></head><body><form action="#"><div>使用者名稱:<input type="text" name="name"/></div><div>密碼:<input type="password" name="password"/></div><div>確認密碼:<input type="password" name="confirmPWD"/></div><div>電子郵箱:<input type="text" name="email"/></div><div><input type="submit" value="使用者註冊" name="button"/> <input type="reset" value="重新填寫" name="button"/></div></form></body></html>
輸出如下：
四.包含選擇符（Descendant Selectors）：
文法：E1 E2
說明：1.用於子項目對父元素樣式的擴充
2. 格式:父選擇符子選擇符{樣式列表}
3.注意HTML元素內含項目關聯性
例子：包含選擇符簡單，如下面的span是包含在p內的，但是span裡面的元素選擇的就是p p span 指定的樣式，p裡面的元素選擇的就是p p 指定的元素，這就是就近原則：
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>包含選擇符</title><style type="text/css">div p{font-size:32px ;font-weight:lighter;}div p span{color:#FF0000 ;text-shadow: 20px 10px 2px #E81D2B; }</style></head><body> <p>包含選擇符</p> <div> <p> 包含選擇符 <span>包含選擇符</span> </p> </div></body></html>
輸出如下：
五.子物件選擇符（Child Selectors）：
文法：E1>E2
說明：1.用於子物件元素對父物件元素樣式擴充
2. 格式:父物件選擇符>子物件HTML元素名稱{樣式列表}
3.注意和包含選擇符的區別
4.使用方式較少,通常可以用包含選擇符取代
例子：子物件選擇符其實和原本標籤使用順序沒有什麼變化，如<ul><li>,,,</li></ul>. li裡面定義的是什麼樣式，那麼下面的<li>裡面的內容就是什麼的樣式.
<!DOCTYPE html ><html ><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>子物件選擇符</title><style type="text/css">/**常用子物件選擇符table>tbody>tr>tdul>liol>lidiv>子divdl>dtdl>ddform>input*/ul > li{font-size:18px;color:#4F87C2;}table>td{font-style:italic;font-weight:bolder;}dl>dd{font-weight:bolder;}div >div{font-weight:bolder;}form> input{border:2px solid #4F87C2;}</style></head><body>水果列表<ul ><li>香蕉</li><li>蘋果</li><li>桃子</li></ul><table > <tr> <td>儲存格一</td> <td>儲存格一</td> </tr></table>三大球類運動<dl> <dt>足球</dt> <dd>全世界第一大球類運動</dd> <dt>籃球</dt> <dd>全世界第二大球類運動</dd> <dt>排球</dt> <dd>全世界第三大球類運動</dd></dl><div>第一層div<div>第二層div</div></div><form><input type="button" value="普通按鈕"/></form></body></html>
輸出如下：
六.ID選擇符（ID Selectors）：
文法：#sID
說明：1.用於定義唯一ID屬性值元素樣式
2. 格式:#選擇符名稱{樣式列表}
3.選擇符名稱必須和元素ID屬性值完成相同,且區分大小寫
例子：ID選擇符標籤以#開頭，那麼下面ID的內容和#後面相同的就使用該定義下的樣式，如name。
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>ID選擇符</title><style type="text/css">#name{border:2px solid #4F87C2;width:200px;height:30px;}</style></head><body><form action="#"> 文字框一: <input type="text" name="name" id="name"/> 文字框二: <input type="text" name="address"/></form></body></html>
輸出如下：
七.類選擇符（Class Selectors）：
文法：E1.className
說明： 1.用於選擇特定類選擇符
2. 可以選擇一個或以上的類選擇符
3.區分大小寫
例子：以點.開頭的標籤定義下的樣式，下面class後面的內容和前面點後面的一樣的話就使用該樣式。
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>類選擇符</title><style type="text/css">.myButton{border:2px solid #4F87C2;width:200px;height:30px;}</style></head><body><form action="#"> 文字框一: <input type="text" name="name" class="myButton"/> 文字框二: <input type="text" name="address" class="mybutton"/></form></body></html>
輸出如下：
八.（選擇符混合使用）選擇符分組（Grouping）：
文法：E1.E2.E3
說明： 1.常見的有類型選擇符與類選擇符 ；格式:html元素名.類選擇符名稱,中間不能有空格
2.其它選擇與包含選擇符；最常見使用方式
例子：顧名思義就是混亂在一起使用，規則還是那樣。
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>選擇符混合使用</title><style type="text/css">p.bigFont{font-size:36px;font-family:"微軟雅黑"；}p#colorFont{color:#FF0000;} .div1 span, #div1 span, div div p{color:#FF00FF;font-weight:lighter;}</style></head><body><p>普通文字<div>11</div></p><p class="bigFont">放大文字</p><div class="bigFont">div放大文字</div><p id="colorFont">彩色字型</p><div class="div1"><span>div中的span文字</span></div><div><div><p>子DIV中的段落文字</p></div></div></body></html>
輸出如下：
常見的三種樣式表：
一.內嵌樣式表：內嵌樣式表其實就是把樣式放在<head>,,,,</head>內部。
例子：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>內嵌樣式表</title><head><!-- 定義在頭部標籤裡面--><style type="text/css">p{ font-family:"隸書"; font-size:28px; color:#FF0000;}</style></head><body><h1>靜夜思</h1><h2>作者李白</h2><p>床前明月光，</p><p>疑是地上霜.</p><p>我是郭德剛，</p><p>低頭思故鄉.</p></body></html>
輸出如下：
二.行內樣式表：其實就是把樣式放在<body>,,,,,,,,</body>內部。
例子：
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>行內樣式表</title></head><body><div style="float:right" > <h1>靜夜思</h1> <h2>作者李白</h2> <div style="font-family:'隸書';font-size:28px;color:#FF0000;"> <p>床前明月光，</p> <p>疑是地上霜.</p> <p>我是郭德剛，</p> <p>低頭思故鄉.</p> </div></div></body></html>
輸出如下：
三.連結外部樣式表：樣式放在連結的css/demo.css那個文檔裡，而連結放在<head>,,,,,,,,,,,</head>內部。
例子：
<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>連結外部樣式表</title><link href="css/demo.css" type="text/css" rel="stylesheet"/></head><body><h1>靜夜思</h1><h2>作者李白</h2><p>床前明月光，</p><p>疑是地上霜.</p><p>我是郭德剛，</p><p>低頭思故鄉.</p></body></html>
輸出如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
