CSS选择器规则结构

规则结构由两基本部分组成:选择器(selector)和声明块(declaration block)

选择器必须以字母或下划线开头,其后可以是数字、字母、下划线、中横线等,区分大小写;

  • 声明块由一个或多个声明(declaration)组成;

  • 每个声明是一个属性—值对(property-value);

  • 每个样式表由一系列的规则组成;

    h1 {font-size:14px; color:#ff0;} 这是一条简单的声明,选择所有的 h1 标签,其中:

  • h1就是选择器;

  • {}大括号里面的是声明块;

    • font-size:14pxcolor:#ff0是两个声明;

    • font-sizecolor是属性;

    • 14px#ff0是值;

基础选择器

  • .class:类选择器,必须以一个英文点( . )开始,all,0 0 1 0

      .wrapper {width: 960px; margin-left: auto; margin-right: auto}
      //选择class="wrapper"的所有元素;
    
  • .class.class2.classN:多类选择器,就是多个连续的选择器,中间不能有空格,!ie6

      p#name.select.fw400 {font-size: 14px}
      //选择id="name"class="select fw400"的p元素,必须是四个条件同时满足;
      //IE6中同类的选择器只能存在一个,且最后出现的生效;`p#name.fw400 {font-size: 14px;}`;
    
  • #id:ID选择器,必须以一个井号( # )开始,且同一个页面只能存在一个同名的ID,all,0 1 0 0

      #userId {color: #F00}
      //选择 id="userId" 的元素;
      //一般情况下不建议使用ID选择器,而应该把ID留给JS使用;
    
  • element:元素选择器,必须是合法的HTML标签,all,0 0 0 1

      p {margin-bottom: 10px}
      //选择所有的 p 元素
    
  • *:通配选择器,会选择页面中所有的元素,all, 0 0 0 0

      * {color: #333}
      //设置页面中所有元素的颜色为 #333
    

派生选择器

  • selector, selector2:群组选择器,在多个选择器的规则是相同的时候,就可以采用群组选择器,all,none

      p, .age, #userId {background-color: gray}
      //选择页面中所有的 p 元素,class="age"的元素,id="userId"的元素;
      //各选择器要用英文逗号分隔;
    
  • selector selector2:后代选择器,选择嵌套元素里的所有子孙元素,all,none

      .box div {border-bottom: 1px solid #ccc}
      //选择class="box"里所有的div元素,包括div里面的div甚至更多层的嵌套;
      //要运用这条规则,那.box必须是div的祖先元素;
    
  • selector > selector2:子选择器,元素之间必须是父子关系,!ie6,none

      .box > div {font-weight: 700}
      //选择class="box"里第一层的div元素,.box与div必须只能嵌套一层;
    
  • selector + selector2:相邻兄弟选择器,元素间必须有共同的父元素且是同级,!ie6,none

      .hd + .main {padding: 10px}
      //选择紧挨着class="hd"后面的第一个class="main"的元素;
      //.hd与.main必须有共同的父元素,且他俩必须是紧挨着的;
    
  • selector ~ selector2:元素间必须有共同父元素且是同级,!ie6,none

      .hd ~ div {color: #f00}
      //选择class="hd"后面所有的div元素;
      //.hd与div必须有共同的父元素;
    

属性选择器

属性选择器,是根据元素的属性来匹配的,其属性可以是标准属性也可以是自定义属性;!ie6,0 0 1 0

当然,也可以同时匹配多个属性;

  • [attr]

      [title] {margin-left: 10px}
      //选择具有 title 属性的所有元素;
    
  • [attr=val]

      [title = 'this'] {margin-right: 10px}
      //选择属性 title 的值等于 this 的所有元素
    
  • [attr^=val]

      [title ^= 'this'] {margin-left: 15px}
      //选择属性title的值以this开头的所有元素
    
  • [attr$=val]

      [title $= 'this'] {margin-right: 15px}
      //选择属性title的值以this结尾的所有元素
    
  • [attr*=val]

      [title *= 'this'] {margin: 10px}
      //选择属性title 的值包含 this 的所有元素
    
  • [attr~=val]

      [title ~= 'this'] {margin-top: 10px}
      //选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素,
      //即 title 的值里必须要有 this 这个单词并且this要与其他单词之间有空格分隔
    
  • [attr|=val]

      [title |= 'this'] {margin-bottom: 10px}
      //选择属性 title 的值等于this,或值以 this- 开头的所有元素
    

伪类选择器

链接伪类,只能运用于超链接元素上;而动态伪类,可以动用于所有元素;all,0 0 1 0

超链接,必须有一个 href 属性才能称之为超链接;

要注意定义时的顺序:link - visited - focus - hover - active

注:IE6不支持动态伪类

  • :link,链接伪类,指向所有未访问的链接

      a:link {text-decoration: underline; color: #333}
      //选择所有未访问的链接;
      //使用的时候最好都加上a,因为某些浏览器可能会不正确地将:link解释为指向任何超链接,包括已访问和未访问的超链接;
    
  • :visited,链接伪类,指示所有已访问的链接

      a:visited {text-decoration: underline; color: #000}
      //选择所有已访问的链接;同`:link`使用时最好加上a;
    
  • :focus,动态伪类,指示获得焦点的元素样式

      a:focus, input:focus {background-color: #efefef}
      //选择获得焦点的a元素或获得焦点的input元素;
    
  • :hover,动态伪类,指示鼠标移上去的元素样式

      a:hover, input:hover {background-color: #ccc}
      //选择鼠标移上去时的a或input;
    
  • :active,动态伪类,指示元素被激活时的样式

      a:active, input:active {border: 1px solid #f00}
      //选择被激活时的a或input
    
  • :lang(lang-val),根据元素的lang属性来设置样式,!lte IE7

      :lang(en) {color: #f00}
    

伪元素选择器

所有伪元素选择器都必须放在出现该伪元素的选择器的最后面,也就是说伪元素选择器不能跟任何派生选择器;

如:p:first-letter em {} 这就是不合法的,!ie6,0 0 0 1

  • :first-letter,设置块元素首字母样式,行内元素转换成块元素和行内块元素也支持;

      div p:first-letter {font-size: 20px}
      //选择div元素里所有的p元素的第一个字母或汉字,如果把块元素转换成行内元素则就不支持了;
    
  • :first-line,设置第一个文本行样式;

      .box .main:first-line {color: #f00}
      //只有部分属性允许first-line:所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height等支持
    
  • :before,设置之前的样式,可以插入生成的内容,并设置其样式;

      body:before {content: 'The Start:'; display: block}
      //在body元素前插入文本内容'The Start:',并设置其为块元素
    
  • :after,设置之后的样式,可以插入生成的内容,并设置其样式;

      body:after {content: 'The End.'; display: block}
      //在body元素最后插入文本内容'The End.',并设置其为块元素
    

结构性伪类选择器

HTML CODE:

1.<div class="box">
2.  <span>First span</span>
3.  <p class="ft">First p</p>
4.  <div>First div<strong class="ft">Strong text</strong></div>
5.  <p class="ft">Second p</p>
6.  <div class="ft">Second div <span>Second span</span><span>Third span</span></div>
7.</div>

结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定;

带括号的选择器,里面一定要有参数;

匹配子元素,同时也会匹配孙子元素,因为子元素是孙子元素的父元素;

  • :first-of-type,选择相对父元素里同类型子元素中的第一个,!lte8

      .box :first-of-type {color: #f00}
      //匹配2.3.4以及4里面的strong和6里面的第一个span,因为这个span是6里的第一个span子元素
      .box .ft:first-of-type {color: #ff0}
      //匹配34里面的strong,因为3是box里面的第一个p且class=”ft”,而4里只有一个strong且class=”ft”,而56虽然class=”ft”但是他们相对于box的同类型中不是第一个出现的;
    
  • :last-of-type,选择相对父元素里同类型子元素中的最后一个,!lte8

      .box :last-of-type {color: #f00}
      //匹配2.5.6以及4里的strong和6里的最后一个span
    
  • :only-of-type,选择相对父元素里同类型子元素中只有一个的元素,!lte8

      .box :only-of-type {color: #f00}
      //匹配2以及4里的strong,类为box里同类型元素只有一个的只有span
      .box .ft:only-of-type {color: #f00}
      //只匹配4里的strong
    
  • :only-child,选择的元素相对于其父元素是唯一的子元素,!lte8

      .box :only-child {color: #f00}
      //只匹配4里的strong
    
  • :nth-child(n),选择其父元素的第n个子元素或多个子元素,索引从1开始,当n用于表达式时索引从0开始!lte8

      .box :nth-child(3) {color: #f00}
      //匹配第三个子元素即这里的4
      .box :nth-child(odd) {color: #f00} 等价于 .box :nth-child(2n + 1) {color: #f00}
      //匹配奇数即这里的2.4.6以及4里的strong和6里的第一个span
      .box :nth-child(even) {color: #f00} 等价于 .box :nth-child(2n + 2) {color: #f00}和.box :nth-child(2n)
      //匹配偶数即这里的3.5以及6里的第二个span
      .box :nth-child(n + 1) {color: #f00}
      //匹配 n + 1开始的所有子元素即.box里所有的子元素以及子孙元素,因为这里n是从1开始的即:
      n = 0 ----> n + 1 = 0 + 1 = 1,即这里的2
      n = 1 ----> n + 1 = 1 + 1 = 2,即这里的3
      ... ...
      n = 4 ----> n + 1 = 4 + 1 = 5,即这里的6
    
  • :nth-last-child(n),跟:nth-child(n)使用类似,只是索引是从最后开始往前数,!lte8

      .box :nth-last-child(3) {color: #f00}
      //匹配倒数第三个子元素即这里的4
    
  • :nth-of-type(n),选择父元素的第n个或多个同类型的子元素,!lte8

      .box :nth-of-type(2) {color: #f00}
      //匹配5和6以及6里面的第二个span
    
  • :nth-last-of-child(n),同上,只是从最后开始往前数,!lte8

      .box :nth-last-of-child(2) {color: #f00}
      //匹配3和4以及6里面的第一个span
    
  • :first-child,选择父元素里的第一个子元素,!ie6

      .box :first-child {color: #f00}
      //匹配2和4里的strong以及6里的第一个span
    
  • :last-child,选择父元素里的最后一个子元素,!lte8

      .box :last-child {color: #f00}
      //匹配6和6里的最后一个span以及4里的strong
    
  • :root,选择文档的根元素,在HTML中就是指<html>标签,!lte8

  • :empty,选择没有任何内容的元素,那怕是有一个空格也不行,!lte8

      table td:empty {background-color: #ffc}
      //匹配表格里没有内容的td
    
  • :target,选择当前活动的元素,指锚点点击后跳转到的那一个元素,!lte8

  • :not(selector),选择排除selector以外的其他所有元素,!lte8

      .box *:not(div) {background-color: #ffc}
      //选择box里除div以外的所有后代元素,如果div里有其他非div元素,也会选择上,如上的HTML CODE就会选择上div里面的span和strong
    

UI元素状态伪类选择器

  • :enabled,指定元素处于可用状态时的样式

    一般用于input,select和textarea

  • :disabled,指定元素处于不可用状态时的样式

    一般用于input,select和textarea

  • :read-only,指定元素为只读状态时的样式

    FF为-moz-read-only,一般用于input和textarea

  • :read-write,指定元素为只可写状态时的样式

    FF为-moz-read-write,一般用于input和textarea

  • :checked,指定元素被选中状态时的样式

    FF为-moz-checked一般用于checkbox和radio

  • :default,指定元素默认选中的样式

    一般用于checkbox和radio

  • :indeterminate,指定默认一组单选或复选都没被选中的样式,只要有一个被选中则样式被取消

    一般用于checkbox和radio

  • ::selection,指定元素处理选中状态时的样式,可用于所有元素,上面的几个基本上只用于表单元素;!lte8

    FF为::-moz-selection,不能用群组选择器来写;

      ::selection {background-color: #ffc; color: #fff}
      ::-moz-selection {background-color: #ffc; color: #fff}