Css选择器种类以及优先级

元素选择器

以标签名开头，选择所有span元素

 /* 元素选择器 */
      span {
        margin: 0;
        padding: 0;
      }

id选择器

给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘p1’”的元素

 /* id选择器 */
      #p1 {
        margin: 0;
        padding: 0;
      }

类选择器

给标签取class名，以点.加class名开头，选择所有该class名的元素

 /* 类选择器 */
      .span1 {
        margin: 0;
        padding: 0;
      }

后代选择器

以空格隔开包含关系的元素,查找以class=‘content’的父元素下所有的p标签（包含孙子元素
）

 /* 后代选择器 */
      .content p {
        margin: 0;
        padding: 0;
      }

子代选择器

以>隔开包含关系的元素,查找以class=‘content’的父元素下所有的class=‘span1’的儿子元素

 /* 子代选择器 */
      .content > .span1 {
        margin: 0;
        padding: 0;
      }

兄弟选择器

以波浪号隔开兄弟关系的元素(修饰前一个选择器往下的所有兄弟选择器)

 /* 兄弟选择器 */
      #p1 ~ p {
        margin: 0;
        padding: 0;
      }

相邻选择器

以+隔开相邻关系的元素(修饰前一个选择器往下的相邻的选择器 只能一个)

 #p1 + .span1 {
        background-color: aqua;
      }

群组选择器

以，分隔(逗号分隔开需要修饰的选择器)

 /* 群组选择器 */
      p,
      span {
        margin: 0;
        padding: 0;
      }

全局选择器

以*开头,查找body下所有标签

/* 全局选择器 */
      * {
        margin: 0;
        padding: 0;
      }

属性选择器

以[ ]修饰，查找属性type=text的元素

 /* 属性选择器 */
      input[type="text"] {
        background-color: aquamarine;
      }

伪类选择器

以：为修饰符，修饰前一个选择器，比如‘button:hover’表示当鼠标放在button元素上面时，设置字体颜色为浅蓝色

/* 伪类选择器 */
      button:hover {
        color: aqua;
      }

选择器优先级

先不讨论多个选择器嵌套的情况

• css优先级: !important>行间样式> ID选择器>属性选择器&&伪类选择器&&类选择器>元素选择器
  具体：
• a:行内样式:优先级1000
• b:ID选择器:优先级100
• c:类选择器:优先级10 (伪类属性优先级10 ）
• d:元素选择器:优先级1
  注意：! important:优先级最大10000 (用了后就不能修改慎用)

具体例子：
span 优先级1
div span 优先级1+1
div:first-child == 1+10
.p1 span 优先级10+1.
#divI span 优先级100+1