1、元素/標(biāo)簽/類型選擇器
以標(biāo)簽作為選擇器
<head>
? ? ?<style>
? ? ? ? ? p{color:#f00;}
? ? ? ? ? div{background-color:#ff0;}
? ? ?</style>
</head>
<body>
? ? ? <p>XXXX</p>
? ? ? <div>XXXXX</div>
</body>
2住拭、ID選擇器
id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。
<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>
顯示結(jié)果如下：
4、派生/后代/包含選擇器
<head>
? ? ? <style>
? ? ? ? ? ? div p{color:#1814c8;}
? ? ? ? ? ?.footer p{color:#c814b9;}
? ? ? ? ? ?p.news{color:#18c814;} /*p和.news中間沒(méi)有空格*/
? ? ? </style>
</head>
<body>
? ? ? <div>
? ? ? ? ? ?<p>改變div下面的p標(biāo)簽里面的內(nèi)容樣式</p>
? ? ? <div>
? ? ? <div class="footer">
? ? ? ? ? ?<p>類型是footer的div標(biāo)簽下面的p標(biāo)簽中的內(nèi)容樣式</p>
? ? ? </div>
? ? ? <p class="news">改變所有p標(biāo)簽中類型是news的p標(biāo)簽里的內(nèi)容樣式</p>
? ? ? <p>樣式</p>
</body>
顯示結(jié)果如下：
5炒辉、群組選擇器
.font1,.font2,.font3,font4{font-size:50px;}
6锤灿、通配選擇器
*{color：#f00;}
