1.子选择器
复制代码
代码如下:
<style
type="text/css">
#pic>img{
//
使用
>
号，让选择器只选择直接的子类，width:200px
height:200px
}
</style>
<div
id="pic">
<img
src="1.jpg"
alt="photo"
/>
<span><img
src="btn"
alt="点击大图"
/></span>
</div>
2.相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent
sibling
selector）。
例如，如果要增加紧接在
h1
元素后出现的段落的上边距，可以这样写：
h1
+
p
{margin-top:50px}
这个选择器读作：“选择紧接在
h1
元素后出现的段落，h1
和
p
元素拥有共同的父元素”。
3.包含选择器
复制代码
代码如下:
#header
p{font-size:14px}
#main
p
{font-size:12}
定义<div
id
=
"header">包含框里的段落字体大小为14像素
定义<div
id
=
"main">包含框里的段落字体大小为12像素.
4.多层选择器嵌套
复制代码
代码如下:
#wrap
#header
h2
span
{font-size:24px}
#wrap
#main
h2
span
{font-size:14px}
5.属性选择器
（1）匹配属性名选择器
div[class]
{font-size:24px}
使该选择器能够匹配div中设置了class属性的对象定义格式
（2)匹配属性值选择器
img[alt="图像"][title="图像"]
{border：solid
2px
red}：
给<img
src="images/pic1.jpg"
alt="图像"
title=“图像”>定义样式
(3)模糊匹配属性值选择器
6.伪选择器和伪元素选择器
复制代码
代码如下:
<style
type
="text/css">
a:link{color:#FF0000}
/*正常链接状态下样式*/
a:visited{color:#0000FF}
/*被访问之后的样式*/
a:hover{color:#00FF00}
/*鼠标经过的样式*/
a:active{color:#FF00FF}
/*超链接被激活的样式*/
</style>
选择器
body >div 只操作body下级的div。
div1 + div2 只选择div1 同级 随后 相邻最近 的div2
div1 ~ p 选择div1下所有的p
属性选择器
[attr]{} 例：[class]{color:red} [class = "text"]{color:red}
[class |= "nav"]{color:red} 选择所有class属性，并且属性值 唯一 为 nav- 开头的元素
[class ~= "nav"]{color:red} 选择所有class属性，并且包含 单个 完整 的nav属性值的元素
[class1][class = "text"]{color:red} 选择具有class1属性，并且具有class属性且属性值唯一为text的元素
