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;}
网友评论