复习
div>p: 子代
div+p：div后面相邻的第一个p
div~p: div后面所有的兄弟p
属性选择器
标志：[]；区别于id选择器：#，区别于类名选择器：.
特殊符号：^：开头 $：结尾 *：包含
E[title] : 选中页面的E元素，并且E需要带有title属性
E[title="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值为abc
E[title^="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值以abc开头
E[title$="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值以abc结尾
E[title*="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值包含abc
结构伪类选择器
E：first-child 选中父元素中的第一个子元素
E：last-child 选中父元素中的最后一个子元素
E：nth-child(n) 属于其父元素中的第n个子元素，E是子元素
n: 0,1,2,3,4..... 偶数： 2n(even) 奇数：2n-1 (odd) 前5个： -n+5 7的倍数：nth-child(7n)
E：nth-last-child(3)，从后向前选择， 选中倒数第3个
E：empty 表示元素为空的状态
E:target：表示元素被激活的状态 要配合锚点使用
注意：所选到的元素的类型 必须是指定的类型E,否则选择无效；
伪元素
通过css模拟出html效果
E::before
E::after
注意：必须有content 属性
伪元素选择器
E::first-letter：选中第一个字母
E::first-line：选中第一行
E::selection：表示选择的区域 通过设置 color background
首字母下沉
<style> /*选中第一个字,加上左浮动，文字就会环绕，有下沉效果*/ p:first-child::first-letter{ font-size:40px; color:red; float: left; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav { position: fixed; top: 150px; left: 50px; } ul { list-style: none; } li { width: 50px; height: 30px; border: 1px solid #000; background-color: pink; text-align: center; font: 400 15px/30px "simsun"; margin-top: 20px; color: red; } .box { width: 600px; height: 700px; margin: 20px auto; background-color: pink; font: 600 30px/700px "simsun"; text-align: center; color: green; } /*target 伪类 要配合锚点使用 表示被激活的状态*/ .box:target { background-color: #ccc; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#yf1">上衣</a></li> <li><a href="#yf2">下衣</a></li> <li><a href="#yf3">内衣</a></li> <li><a href="#yf4">外衣</a></li> </ul> </div> <div class="box" id="yf1">上衣</div> <div class="box" id="yf2">下衣</div> <div class="box" id="yf3">内衣</div> <div class="box" id="yf4">外衣</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div::before { content: ""; display: inline-block; width: 50px; height: 50px; background-color: red; } </style> </head> <body> <div>你好吗？</div> </body> </html>
参考：CSS3选择器手册