以下均为具体的例子举例

• 基础选择器
  
  • *（通用元素选择器，匹配任何元素）
  • 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”点击后的效果）

今天用到选择器，有些老是记不住或者混乱，再一次搜了阮一峰老师CSS选择器笔记看 看了好多次已经，还是决定还是自己手动写一写过一遍比较好以下均为具体的例子举例基础选择器 *（通用元素选择器，匹配任何元素）div （标签选择器，匹配所有对应的div元素）.info（class选择器，匹配所有的class包含info的元素）#info（id选择器，匹配id=‘info’的元素）... 1 div和span 1.1 div div的最重要的作用就是用来分隔文档，不要滥用，只在没有现有元素能实现区域分隔的情况下才使用div。例如，如果使用主导航列表，那么不需要将它包围在div中。 不需要将主导航列表包... 2. 行内样式（例如，style="font-size: 16px;"） 3. ID 选择 器 （例如，#example） 4. 类 选择 器 、属性 选择 器 和伪类 选择 器 （例如，.example、[type="text"]、:hover） 5. 元素 选择 器 和伪元素 选择 器 （例如，p、::before） 如果有多个 选择 器 具有相同的优先级，那么最终样式将由最后一个应用的样式决定。