CSS选择器

今天用到选择器，有些老是记不住或者混乱，再一次搜了阮一峰老师CSS选择器笔记看
看了好多次已经，还是决定还是自己手动写一写过一遍比较好

---

以下均为具体的例子举例

• 基础选择器
  
  • *（通用元素选择器，匹配任何元素）
  • div （标签选择器，匹配所有对应的div元素）
  • .info（class选择器，匹配所有的class包含info的元素）
  • #info（id选择器，匹配id=‘info’的元素）
• 组合选择器
  
  • span,p（多元素选择器，匹配所有的span和p标签）
  • div span（后代选择器，匹配所有属于div后代的span）
  • div>span（子元素选择器，匹配所有div的子元素span）
  • span+span（毗邻元素选择器，匹配所有紧跟着div的同级元素span）
• 属性选择器（CSS2.1）
  
  • checkbox[checked]（匹配所有具有“checked”属性的checkbox元素。checkbox此处可以省略，改写为：[checked]，以下同）
  • div[class=error]（匹配所有class为‘error’的div，div可省略）
  • div[class~=error]（匹配class 有多个值且其中有个值为‘error’的div，div可省略）
  • p[lang|=en]（匹配所有lang属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以”en”开头的p元素，主要用于lang属性，比如”en”、”en-us”、”en-gb”等等）
• 伪类（CSS2.1）
  
  • div:first-child（匹配父元素div的第一个子元素）
  • a:link（匹配所有未被点击的a）
  • a:visited（匹配所有已被点击的a）
  • a:active（匹配鼠标已经在其身上按下，但是还没有释放的a）
  • a:hover（匹配鼠标悬停其上的a）
  • a:focus（匹配获得焦点的a）
  • p:lang(sv)（匹配lang属性等于sv的p）
• 同级元素通用选择器（CSS3）
  
  • p~ul（匹配任何p元素后的同级ul元素）
• 属性选择器（css3）
  
  • div[id^=’nav’]（匹配id以‘nav’开头的div）
  • div[id$=’nav’]（匹配id以‘nav’结尾的div）
  • div[id*=’nav’]（匹配id包含‘nav’的div）
• 与用户界面有关的伪类（CSS 3）
  
  • input[type=”text”]:disabled（匹配禁用的text）
  • input[type=”text”]:enabled（匹配激活的text）
  • input[type=”radio”]:checked（匹配选中的radio）
  • input[type=”section”]:selection（匹配用户当前选中的section的值）
• 结构性伪类（CSS3）
  
  • div:root（匹配文档的根元素，对于HTML文档，根元素就是）
  • div:nth-child(n) （匹配div的第n个子元素，第一个为1）
  • div:nth-last-child(n)（匹配div的倒数第n个子元素）
  • div::nth-of-type(n)（匹配div的第n个同类型子元素，即第n个子div）
  • div::nth-last-of-type(n)（匹配div的倒数第n个同类型子元素）
  • div:last-child（匹配div的最后一个子元素，相当于div:nth-last-child(1)）
  • div:first-of-type（匹配div的第一个同类型子元素，等同于div:nth-of-type(1)）
  • div:last-of-type（匹配div下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)）
  • div:only-child（匹配div下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)）
  • div:only-of-type（匹配div下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)）
  • div:empty（匹配一个不包含任何子元素的div，注意，文本节点也被看作子元素）
• 反选伪类（CSS3）
  
  • :not(p) （匹配不是p的任何元素）
• target伪类（CSS3）
  
  • ：target（匹配文档中特定“id”点击后的效果）