相信各位如我一样的“抠图崽”和前端大佬们，在写网页样式的实话，总是免不了写下各种各样的选择器，再给选择的元素写入样式。最基本的元素选择器、class选择器、ID选择器等就不再过多的说了，相信大家都熟的不能再熟了，本文就对一些伪类和属性选择器惊醒一些基本的介绍。
1、子元素选择器
div>P{ text-align:center; }
选择父元素为 <div> 元素的所有 <p> 元素（不包括孙子P元素）
2、相邻兄弟选择器
1 div+p{ 2 text-align:center; 3 }
“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素（必须有共同的父元素）
3、属性选择器
- 【attribute】
1 a[target]{ 2 color:red; 3 }
选择带有target属性的a元素
- 【attribute=value】
1 a[target="_blank"]{ 2 color:red; 3 }
选取所有targht属性值为_blank的a元素
- 【attribute~=value】
1 p[class~="red"] { 2 color: red; 3 }
选择 class 属性中包含 red 的p元素（只需要匹配其中一个值就可以）
子串匹配属性选择器
- 【attribute^=value】
1 img[src="head"]{ 2 width:200px; 3 }
选择src属性值以“head”开头的img元素
扫描二维码关注公众号，回复：
992815 查看本文章
- 【attribute$=value】
1 a[href$=".pdf"]{ 2 color:red; 3 }
选择href属性值以“.pdf”结尾的a元素
- 【attribute*=value】
1 img[src*="abc"]{ 2 height:300px; 3 }
选择src属性值中包含“abc”的img元素
2、伪类选择器
2.1动态伪类
动态伪类，顾名思义，只有在网页发生交互时，才会发挥作用的伪类，主要包括两种，第一种就是我们常用的超链接中的锚点伪类，如“:link”等
1 a:link {color:blue;}/*链接没有被访问时前景色为蓝色*/ 2 a:visited{color:orange;}/*链接被访问过后前景色为橙色*/ 3 a:hover{color:red;}/*鼠标悬浮在链接上时前景色为红色*/ 4 a:active{color:green;}/*鼠标点中激活链接那一下前景色为绿色*/
对于这四个伪类，使用时要特别注意其顺序，必须准守Link--visited--hover--active，不然容易出现不可描述的错误。
另外一种动态伪类称之为用户伪类，其主要在用户发生某些行为后才会体现，如“:hover”，“:active”和“:focus”
- :hover 用于用户将鼠标移到该元素上面时的效果
- :active 用于用户点击元素那一下发生的效果（只发生在点的一下，鼠标松开后效果就不存在了）
- :focus 常用于表单填写，当用户鼠标点击聚焦在某输入框时候的效果
3、CSS3 :nth选择器各种子元素选择
- :first-child选择某个元素的第一个子元素；
- :last-child选择某个元素的最后一个子元素；
- :nth-child()选择某个元素的一个或多个特定的子元素；
- :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
- :nth-of-type()选择指定的元素；
- :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
- :first-of-type选择一个上级元素下的第一个同类子元素；
- :last-of-type选择一个上级元素的最后一个同类子元素；
- :only-child选择的元素是它的父元素的唯一一个了元素；
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
- :empty选择的元素里面没有任何内容。