CSS基础--选择器

选择器

• 元素选择器

  格式：标签名{}

• 类选择器

  在CSS中，类选择器以一个点号显示：

  	.center{text-align: center;}
  	<p class="center"> 这个段落将会居中</p>
  

• ID选择器

  id选择器以"#"来定义

  	#red{color: red;}
  	<p id="red">这个段落是红色</p>
  

• 关系选择器

  包含选择器

  格式：父元素/祖先元素 族元素
  例如：div a / .nav a

  父子选择器

  格式：父元素>子元素
  例如：box>a

  相邻选择器

  格式：e+f
  表示紧贴在e元素后的f元素

  兄弟选择器

  格式：e~f
  表示e元素后面所有的兄弟元素f

• 属性选择器

  e[attr]：选择具有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元素
  e[att*=“val”]：选择具有att属性且属性值为包含val的字符串的e元素
  e[att|=“val”]：选择具有att属性且属性值为以val开头且用连接符"-"分隔的字符串的e元素

• 伪对象选择器

  e:first-letter 设置对象内的第一个字符的样式
  e:first-line 设置对象内的第一行的样式
  e:before 设置在对象前发生的内容。用来和content属性一起使用
  e:after 设置在对象后发生的内容。用来和content属性一起使用
  e:selection 设置对象被选择时的颜色

• 结构伪类选择器

  ：root 根选择器
  e:first-child 第一个子元素e
  e:last-child 最后一个子元素e
  e:only-child 唯一的一个子元素e
  e:nth-child(n) 第n个子元素e n=odd even 数字 公式
  e:nth-last-child(n) 倒数第n个子元素e
  e:first-of-type 第一个同类型元素
  e:last-of-type 最后一个同类型元素
  e:only-of-type 唯一同类型元素
  e:nth-of-type（n） 第n个同类型元素e n=odd even 数字 公式
  e:nth-last-of-type(n) 倒数第n个同类型元素e
  e:empty 空元素