|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 1.標(biāo)簽名選擇器 */ div{ width: 100px; height: 100px; background-color: red; }
/* 2.id選擇器 */ #fir{ background-color: cyan; }
/* 3.類選擇器 */ .p1,.p3,.p5{ background-color: #ADFF2F; }
/* 后代選擇器 */ /* 先寫父級(jí) 空格 要找的子元素的標(biāo)簽名*/ div p{ color: aqua; }
/* 群組選擇器 */ #div1,.p1,em{ background-color: slateblue; font-size: 100px; }
</style> </head> <body> <div>1</div> <div id="">2</div> <div class="">3</div> <div>4</div> <div>5</div> <div> <div>6</div> </div>
<!--id 是標(biāo)簽的唯一標(biāo)識(shí),不要用數(shù)字開頭,標(biāo)識(shí)盡量有含義--> <h1 id="fir">我是標(biāo)題</h1> <h1 class="p1">我還是標(biāo)題</h1>
<p class="p1">1</p> <p>2</p> <p class="p3">3</p> <p>4</p> <p class="p5">5</p>
<!--后代選擇器舉例--> <div> <p>A</p> <dov> <p>B</p> </dov> </div> <br /> <br /> <br /> <br /> <br /> <br /> <!--群組選擇器舉例--> <div id="div1">A</div> <p class="p1">B</p> <p class="p1">C</p> <em>你好</em>
</body>
</html> |
|
|
