Css(2)

通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页
面中所有的元素。其基本语法格式如下：

// * {属性1：属性值1; 属性2：属性值2; ...}
//使用通配符选择器定义CSS样式，清除所有HTML元素的
默认边距。
* { margin: 0; /*定义外边距*/ 
* padding: 0; /*定义内边距*/ }

伪类选择器

  伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效
    果，比如可以选择第1个，第n个元素。   伪类选择器使用“:”冒号来表示，比如 :link{}

书写方式：按照 l o v e h a t e来记忆

<style> 
a:link { /*未访问的链接*/
font-size: 16px; 
color: grey;
font-weight: 700; }
a:visited { /*已访问的链接 表示已经点击过一次的状态*/
font-size: 16px; 
color: orange;
font-weight: 700; }
a:hover { /*鼠标移动到链接上*/
font-size: 16px; color: red;
font-weight: 700; }
a:active { /*选定的链接 鼠标点击不松开的状态*/
font-size: 16px; color: blue;
font-weight: 700; }
 </style>

结构伪类选择器

:first-child 获取第一个子元素 :last-child 获取最后一个子元素。注意：IE8不支持X:last-child。 :nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用
数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n 从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元
素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字
（even偶数、odd奇数）或公式（n从0开始）。

p:first-child { /*第一个子元素*/ color: red; }


p:nth-last-child(2) { /*倒数第2个子元素*/ color: pink;
}

:first-of-type 选择特定元素的第一个子元素
:last-of-type 选择特定元素的最后一个子元素
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个
元素的最后一个元素开始获取

p:first-of-type { /*第一个p元素*/ color: red; }
p:last-of-type { /*最后一个p元素*/ color: green; }
p:nth-of-type(2) { /*第2个p元素*/ color: red; }
p:nth-last-of-type(2) { /*倒数第2个p元素*/ color: red; }

:only-child 选择的元素是他父元素的唯一一个元素
:only-of-type 选择的元素是他上级元素的唯一一个相同类型的子元素
:empty 现在的元素里面没有任何的内容或子节点
:root 匹配文档的根节点

li:only-child { /*匹配父元素中只有一个子元素*/ color: blue; }
p:only-of-type { 
/*匹配父级中唯一的子元素，如整个文档只有一个p元 素*/ 
color: green; 
}
div:empty { /*匹配没有内容和子节点的元素*/
 width: 100px;
  height: 50px;
  background-color: red; }
  :root { /*匹配文档的根元素*/
   background-color: #dde6ef; 
   }

CSS的结构伪类选择器归为四类：

1. 通用子元素（不同类型）过滤器：:nth-child(n)（顺序过滤）和 :nth- last-child(n)（逆序过滤）
2. 通用子类型元素（同一类型）过滤器：:nth-of-type(n)（顺序过滤）和
   :nth-last-of-type(n)（逆序过滤）
3. 特定位置的子元素：:first-child, :last-child, :first-of-type, :last-of-type
4. . 特定状态的元素：:root（根节点）、:only-child（独子元素）、:only- of-type（独子类型元素）、:empty（孤节点）