CSS选择器

CSS选择符

​ 最近重新学习CSS相关知识，发现CSS选择器还是功能很强大的，合理的利用CSS选择符能帮助我们省时省力，所以在这里跟大家分享一下常用的一些CSS选择符。

1. 子选择符，合同辈选择符，一般同辈组合子
   1. 子选择符
      1. 选择一个元素的直接后代，而在嵌套列表的列表项则不会受影响
   2. 相邻同辈选择符
      1. 表示h2标签之后与h2元素拥有共同父元素的第一个p标签
   3. 一般同辈组合子
      1. 选择h2元素后面所有p元素
2. 通用选择符则是我们常用的将padding和margin置为0的选择器
   1. * {padding:0; margin:0}
3. 属性选择器就比较多样，功能也很强大
   1. abbr[title]{...} 带有title属性的abbr元素添加样式
   2. a[href^="http:"] 匹配以http:开头的属性值
   3. img[src$=".jpg"] 匹配以.jpg结尾的属性值
   4. a[href*="/about/"] 匹配包含/about/的属性值
   5. a[rel~=next] 匹配以空格分隔的字符串中的属性值
4. 伪元素：
   1. 伪元素需要主要用双冒号来表示，避免与伪类混淆
   2. 常用的有::after ::berfore，而且千万记得要加上content，不然显示不出来
   3. 还用一些用的少的比如
      1. ::first-letter 来选择一段文字的第一个字符
      2. ::first-line 来选择一段文字的第一行
5. 伪类：
   1. 伪类需要用单冒号来表示
   2. 常见是用于超链接的使用
      1. 链接未访问时未蓝色
         1. a:link{color: blue;}
      2. 访问过的链接未绿色
         1. a:visited{color: green;}
      3. 链接在鼠标悬停及获取键盘焦点时为红色
         1. a:hover,a:focus{color: red;}
      4. 活动状态为紫色
         1. a:active{color: purple}
6. 结构化伪类：
   1. css3新增了一批与文档结构相关的新伪类，其中最常用的就是nth-child选择符
      1. li:nth-child(odd)
         1. odd表示第奇数个；even表示第偶数个
      2. li:nth-child(3n+4)
         1. 表示会匹配第4,7,10等等行
7. 表单伪类：
   1. 这种伪类会根据用户与表单控件交互的方式，来反映表单控件的某种状态
   2. 比如想让必填的input控件有高亮边框
   3. 
   4.