CSS选择器学习笔记

1.CSS规则基本语法
  .selector {declaration-block}
  .selector-group {declaration-block}
注：当选择器组中任何一个选择器语法出现错误（即无效的），则整个选择器组的样式规则都是无效的，被浏览器忽略掉。
例：body { margin: 0 auto; text-align: center; }
    ul, ol { list-style-type: none; }


2.简单选择器（type、id、class选择器）
  .http://www.w3.org/TR/selectors/#selectors
  .type selector,即对应某一元素的选择器
    例：type {  }
  .id selector,首先在HTML中给某一元素添加id取值，然后在css中通过id选择器去直接选择这个元素
   每个HTML元素的id取值应该是唯一的。
    例：#id取值 {  }
  .class selector,用法和id选择器类似，但是可以对不同元素进行同一class取值，还可以对同一元素取多个class值。
    例：.class取值 {  }
   当某些元素只有一个class取值（例如<p class="outline">），而另一些元素有多个class取值时（例如<li class="outline abc">），
   此时class选择器要选择即含有"outline"又含有"abc"的class取值的元素时，写法为：.outline.abc {  }
   即： .class取值1.class取值2 {  }


tips：在CSS中添加注释：/*  ... */


3.属性选择器(attribute selectors)
总共七种类型：
      元素 [属性] {  }
      元素 [属性="特定值"] {  }
      元素 [属性~="特定值"] {  }    元素的属性取值中只要有一个值为特定值，就会被选中
      元素 [属性^="特定值"] {  }    元素的属性取值只要是以特定值为开头的字符串，就会被选中
      元素 [属性$="特定值"] {  }    元素的属性取值只要是以特定值为结尾的字符串，就会被选中
      元素 [属性*="特定值"] {  }    元素的属性取值的字符串只要任何地方出现了特定值，就会被选中
      元素 [属性|="特定值"] {  }    元素的属性取值是以特定值为开头的，并且是以连字符拼接出来的字符串，就会被选中


例子：对文档内导航功能的超链接进行属性选择器操作时，因为这些<a>元素的属性取值均以#开头，因此可以这样操作：
      a [href^="#"] {  }


4.上下文选择器(contextual selectors)
四个基本的上下文选择器：
e1   e2 {  } 即选择e1中的后代元素e2，e1和e2可以是任何的简单选择器或者属性选择器
e1 > e2 {  } 即选择e1中的子元素e2
e1 ~ e2 {  } 即选择e1中的后续兄弟元素e2
e1 + e2 {  } 即选择e1中的后续紧邻兄弟元素e2


*在选择器中表示任何元素的意思。
例：e1 > * e3 {  } 即表示选择e1的任意子元素中包含的后代元素e3


5.伪类选择器(Pseudo-classes selectors)
第一种：结构化的伪类选择器
根据元素在DOM结构中的特殊的位置来进行选取
e:first-child {  }  当e元素是其父元素的第一个子元素时，选中e元素
e:last-child  {  }  当e元素是其父元素的最后一个子元素时，选中e元素
e:nth-child(n) {  } 当e元素是其父元素的第n个子元素时，选中e元素
当要求奇数和偶数时，可以这样写：
e:nth-child(2n+1) {  }      e:nth-child(2n) {  }
最常见的应用是对表格的多行进行交替的背景色展示


一般结合上下文选择器同时使用，例如：
  ul > li:nth-child(2) {  }
  table tbody tr:nth-child(2n+1) {  }




第二种：UI伪类选择器
根据元素所具有的某些特殊的交互状态来进行选取
例如：
a:link {  }    对没有访问过的超链接<a>元素进行选中
a:visited {  } 对已经访问过的超链接<a>元素进行选中
e:hover {  }   当e元素被鼠标悬停时，e元素被选中；当鼠标从e元素离开时，e元素就没有被选中
e:active {  }  当e元素被激活(在元素上按下鼠标直到鼠标被释放的中间的状态就叫做激活状态)时，e元素就可以被选中添加样式
e:focus {  }   当e元素获得焦点（指接收键盘事件或其他用户输入）时，e元素就可以被选中添加样式
e:checked {  } 匹配用户界面上处于选中状态的 input 元素（只用于单选按钮和复选框）
e:target {  }  当e元素是通过文档内链接导航到它时，e元素被选中


注：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。


6.伪元素选择器（Pseudo-elements selectors）
selector::pseudo-element {  }
四个常见的伪元素选择器：
E::first-letter    向文本的第一个字符添加特殊样式
这里的E是一个选择器，可以是属性选择器，也可以是上下文选择器组合出来的选择器
E::first-line      向文本的首行添加特殊样式
E::before          在元素的内容的开头添加内容
例如，在每个 <h1> 元素前面插入一幅图片：
       h1:before { content:url(logo.gif); }
E::after           在元素的内容的结尾添加内容


注：添加的内容只是虚拟的内容，并没有改变html的DOM的结构和内容


7.CSS的级联Cascading和继承inherit
问题是什么？
在HTML和CSS中，很有可能同一个html元素同时被多条CSS规则选中，而每一条CSS规则都尝试对这同一个html元素的同一个样式属性进行赋值，
这时CSS就需要有一套算法来决定哪一条规则的赋值会生效。这一套算法就称为CSS的级联算法。


Cascading级联算法是什么？
  (1)重要性Importance：在规则中添加 !important 标志的属性赋值 权重高于没有加这个标志的其他规则（一般不建议大量使用）
  (2)规则的来源：Origin。来自于浏览器预设的、user style sheeet(用户设置的)、开发者开发的，如果规则没有加!important,则优先级递增。（一般都不用太考虑）
  (3)规则的选择器特指度：Specificity，即选择器的明确程度。ID>CLass>Type
特指度的计算包含有三个分量的值：I-C-T（I：id选择器的个数；C:class选择器的个数+属性选择器的个数+伪类选择器的个数；T：type选择器的个数+伪元素选择器的个数）
两个规则的选择器特指度比较时，会先比较I分量的值，I分量值大就直接胜出；I分量值相同时才会比较C分量的值，C分量值大胜出；以此类推。
  (4)规则顺序：Order。当两个规则的选择器特指度相同时，后加载到浏览器的规则胜出


继承inherit：

  当元素没有设置属性值时，则会继承父元素的属性值。前提是这个属性是可继承的。