03-CSS样式选择器

1、基础选择器

• 标签（元素）选择器

• 类选择器（.）

• id选择器（#）

• 通配符选择器（*）

  • 表示选中页面中所有的元素

2、复合选择器

• 后代选择器（空格）

• 子代选择器（>）

• 兄弟选择器/并集选择器（，）

  • 通常用于集体声明

• 伪类选择器（：状态），表示元素的一种状态

  • 链接伪类选择器（：link/:visited/:hover/:active)

  • 表单伪类选择器（input:focus {}选出获取光标的表单元素）

3、CSS3新增选择器

（1）属性选择器

• E[att]：表示具有att属性的E元素

• E[att="val"]：表示att属性值为val的E元素

• E[att^="val"]：表示att属性以val属性值开头的E元素

• E[att$="val"]：表示att属性以val属性值结尾的E元素

• E[att*="val"]：表示att属性的属性值含有val的E元素

（2）子代伪类选择（结构伪类选择器）

• E：first-child、匹配父元素中的第一个子元素E

• E：last-child、匹配父元素中的最后一个子元素E

• E：nth-child(n)、匹配父元素中的第n个子元素E

• E：first-of-type、指定类型E的第一个

• E：last-of-type、指定类型E的最后一个

• E：nth-of-type(n)、指定类型E的第n个

• 注意：n可以为数字，关键字，公式

  <ul>
      <li></li>
      <li></li>
       <li></li
  </ul>
  可以用ul :first-child {} 
  也可以用ul li:first-child {}
  关键字：odd\even
  公式：2n\zn+1\5n\n+5\-n+5

（3）否定伪类选择器

• E：not（选择器）

• 可以从已经选择的选择器中删除掉某些元素

（4）伪类元素选择器

• E::after （在E元素的内部的最后面添加，相对于在后面添加子元素）

• E::before （在E元素的内部的最前面添加，相当于在父元素里面最前面添加子元素）

• 以上创建的都是行内元素，且必须有content属性，表示标签里面的内容

• E：first-letter（表示选中元素E的第一个字符）

• E：first-line（表示选中元素E的第一行/首行）

(5)兄弟元素选中器

• 后一个兄弟选择器

  • span+p {写入样式}，span后面的第一个p标签

• 后面所有的兄弟选择器

  • span~p{写入样式}，span后面所有的p标签

4、选择器的权重优先fi级问题

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重来执行

• 没有设置选择器，则样式依据继承性（注意：大部分只有跟文字相关的样式才有继承性）

• 权重只有相加，没有进位

  选择器	权重（优先级）
  通配符/继承样式	0
  标签选择器	1
  类选择器/伪类选择器	10
  id选择器	100
  内联样式	1000
  ！important	无穷大，最高权重