1、元素/標簽/類型選擇器
以標簽作為選擇器
<head>
? ? ?<style>
? ? ? ? ? p{color:#f00;}
? ? ? ? ? div{background-color:#ff0;}
? ? ?</style>
</head>
<body>
? ? ? <p>XXXX</p>
? ? ? <div>XXXXX</div>
</body>
2、ID選擇器
id 屬性只能在每個 HTML 文檔中出現一次。
<head>
? ? ?<style>
? ? ? ? ? ? #yanse{color:#fff;}
? ? ?<style>
</head>
<body>
? ? ? ? ? ?<p id="yanse">XXXX</p>
</body>
2、類選擇器
head中
<style>
.footer{background-color:#ff0;}
</style>
body中
<div class="footer">XXX</div>
3、屬性選擇器
<head>
? ? ?<style>
? ? ? ? p[title="myname"]{color:#f00;}
? ? ?</style>
</head>
<body>
? ? ? ?<p title="my">魔法</p>
? ? ? ?<p title="name">魔仙</p>
? ? ? ?<p title="myname">巴拉巴拉</p>
</body>
顯示結果如下：
4、派生/后代/包含選擇器
<head>
? ? ? <style>
? ? ? ? ? ? div p{color:#1814c8;}
? ? ? ? ? ?.footer p{color:#c814b9;}
? ? ? ? ? ?p.news{color:#18c814;} /*p和.news中間沒有空格*/
? ? ? </style>
</head>
<body>
? ? ? <div>
? ? ? ? ? ?<p>改變div下面的p標簽里面的內容樣式</p>
? ? ? <div>
? ? ? <div class="footer">
? ? ? ? ? ?<p>類型是footer的div標簽下面的p標簽中的內容樣式</p>
? ? ? </div>
? ? ? <p class="news">改變所有p標簽中類型是news的p標簽里的內容樣式</p>
? ? ? <p>樣式</p>
</body>
顯示結果如下：
5、群組選擇器
.font1,.font2,.font3,font4{font-size:50px;}
6、通配選擇器
*{color：#f00;}
