|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 1.标签名选择器 */ div{ width: 100px; height: 100px; background-color: red; }
/* 2.id选择器 */ #fir{ background-color: cyan; }
/* 3.类选择器 */ .p1,.p3,.p5{ background-color: #ADFF2F; }
/* 后代选择器 */ /* 先写父级 空格 要找的子元素的标签名*/ 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 是标签的唯一标识,不要用数字开头,标识尽量有含义--> <h1 id="fir">我是标题</h1> <h1 class="p1">我还是标题</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> |
|
|
来自： 才子傲 > 《HTML学习总结》
