| 选择器 | 备注 |
|---|---|
| 标签选择器 | p h1~h6等等 |
| class选择器 | . |
| id选择器 | # |
| 组合选择器 | , |
| 后代选择器 | 空格space |
| 子代选择器 | > |
| 通配选择器 | * |
| 属性选择器 | [ ] |
| 伪类选择器 | : |
通配选择器
<style>
*{
margin:0;
padding:0;
}
</style>
这里的含义是清除页面边距跟填充,相当于全局初始化
属性选择器
<style>
div[id="sun"]{
color:green;
}
</style>
<body>
<div id="sun">内容</div>
</body>
也可以将id="..."换成name="..."写法相同
其中的样式可以叠加
伪类选择器
- hover 悬浮(鼠标悬停时)
<style>
a:hover{
color:red;
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
- active 激活(鼠标点击时)
- visited 访问过(已点击,点击后)
- link 未访问(鼠标未点击)
link事件需要放在悬浮等事件位置之前,顺序不对的时候会被覆盖