CSS3 的强大选择器

关系选择器:

儿子元素par>son 匹配par 元素的子级son 元素 相邻元素E+F 匹配紧贴着E 元素的F 元素 兄弟元素E~F 匹配E 后面所有同级别F 元素 // 测试代码

<div> <ul> <li>1 层</li> <li> <ul> <li>2 层</li> <li>2 层</li> </ul> </li> </ul> </div> <p>p1</p> <p>p2</p> div ul { border: 1px solid blue; } div+p { border: 1px solid red; } div~p { background: gray; }

属性选择器:

E[属性名] 含有某属性的元素 E[属性名=值] 某属性=某值的元素

input[name=pwd] { background: gray; } <input type="text" name="email"> <input type="text" name="pwd">

伪类选择器:

E:first-child 匹配作为第1 个子元素的元素E E:last-child 匹配作为最后一个子元素的元素E E:nth-child(N) 匹配作为第N 个子元素的元素E

li:first-child { border: 1px solid blue; } li:last-child { border: 1px solid pink; } li:nth-child(2) { border: 1px solid red; } <ul> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ul>

伪对象选择器

E::before 设置E 元素前面的内容 E::after 设置E 元素后面的内容

a::before{ content: '^_^'; 在a标签以前添加笑脸符号，在a标签以后添加':('符号 } a::after { content: ':('; } <a href="">哲学</a>