CSS3 选择器
各种选择器你都知道吗?下面一一为你罗列一下。
1.标签选择器
例如 如下p标签即可直接选择
<style>
p{
height:100px;
border:1px solid red;
}
</style>
<p>one</p>
<p>two</p>
<p>three</p>
2.类选择器
例如 如下class里面的类
<style>
.first{font-weight: bold;}
.done {text-decoration: line-through;}
</style>
<ul>
<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>
<li class="third done">Link them all together</li>
</ul>
3.ID选择器
例如 如下id选择
<style>
#polite { font-family: cursive;}
#rude { font-family: monospace;
text-transform: uppercase;}
</style>
<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>
4. 普遍选择器
例如 如下选择的就是left-nav的所有子元素
<style>
.left-nav > * { width:200px; background-color:#fafafa}
</style>
<article class="left-nav">
<dl>
<dt>推荐</dt>
<dd class="current"><
i class="icon-music"></i>发现音乐</dd>
</dl>
<dl>
<dt>我的音乐</dt>
<dd><i class="icon-cloud-download">
</i>下载的音乐</dd>
</dl>
</article>
5.层次选择器
- 5.1后代选择器
- 5.2子代选择器
- 5.3相邻同胞选择器
- 5.4一般同胞选择器
6.属性选择器
属性选择器有以下几种
例如如下,就是选择button中具有name属性的元素并且name的值为del的元素
<style type="text/css">
button[name=del]{
border: 2px dotted #ccc;
}
</style>
<div class="container">
<button class="addBtn" name="add">添加</button>
<button class="delBtn" name="del">删除</button>
<button class="updBtn" name="upd">更新</button>
<button>搜索</button>
</div>
7.伪类选择器
- 7.1表示子元素
- 7.2 与状态相关