一、选择器种类

  1.1 基本选择器
  ①标签选择器：  p {...};
  ②类选择器：    .cls {...}; 选择结果不唯一
  ③id选择器：    #id {...}; 独一无二，选择结果唯一
  ④通配符选择器： * {...}; 所有标签

  1.2 复合选择器
  ①交集选择器：   p.one {...} 选择类名为one的p标签
  ②并集选择器：  .one, p {...}; 选择类名为one和p标签
  ③后代选择器：   one p {...}; 类名为one的所有后代p标签
  ④子代选择器：   one>p {...}; 类名为one的所有子代p标签
  ⑤伪类选择器：   :hove {...}; link-visited-hover-active等

  1.3 css3新增选择器
  ①结构伪类选择器：

li:first-child { /*  选择第一个孩子 */
                color: pink; 
            }
li:last-child {   /* 最后一个孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
                color: skyblue;
            }
li:nth-last-child(4) {   /* 选择倒数第4个孩子  从后往前数 */ 
                color: skyblue;
            }

  ②目标伪类选择器：:target目标伪类选择器

<a href = '#f'  >ABC</a> //#f:target可以用来设置a标签跳转时目标元素的样式

  ③属性选择器： 选取标签带有某些特殊属性的选择器 我们成为属性选择器

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 class属性以font 开始的标签 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示class属性以footer 结束的标签  */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示class属性含有tao的标签 */
            color: green;
        }

  ④伪元素选择器： ::是伪元素，:是伪类

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

二、CSS三大特性

   2.1 层叠性：样式冲突，遵循的原则是就近原则。 执行后定义的样式。
   2.2 继承性：指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。
   2.3 优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。计算权重如下：

计算权重
  tips：1数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。