CSS选择器

分类：
      1. 核心选择器
           id选择器      利用了html元素的id属性，唯一
          #one {}    选中id为one的元素
            class选择器   利用html元素的class属性，非唯一
          .box {}    选中class为box的元素
            标签选择器     利用标签名进行选择
          div {}     选中所有的div元素
            并且选择器
          div.box {} 选中div元素，并且这个div的class为box
            和选择器
          div,.box{} 选中div元素和class为box的元素
           普遍选择器
          * {}       选中所有元素

      2. 层次选择器( 两个选择器配合使用)
        子选择器    通过父元素选择子元素
          >
          .menu > li {} ，此时只选.meaud的子元素，两个li（红色）
        后代选择器
          空格
          .menu li {}，此时选的是.meau的后代，不只是儿子，而且还有孙子，绿色数字标的4个后代
          <ul class="menu">
          1.  <li></li>
           2. <li>
              <ul>
               3. <li></li>
                4.<li></li>
              </ul>
            </li>
          </ul>
        兄弟选择器
          ~ 当前元素之后的所有兄弟
          ul.rank > li:nth-child(2) ~ *{}
            第二个li之后的所有li
          + 当前元素之后的下一个兄弟
          ul.rank > li:nth-child(2) ~ +{}
            第三个li
      3. 属性选择器(属性过滤器)，一般应用在表单元素

        input[name]   
          具有name属性input元素
        input[name='username'] 
          具有name属性，并且name属性值为username的input元素
        input[name^='u']
          具有name属性，并且name属性值以'u'作为开始
        input[name*='u']
          具有name属性，并且name属性值包含'u'
        input[name$='u']
          具有name属性，并且name属性值以'u'作为结尾
      4. 伪类选择器(伪类过滤器)
        :first-child
        :last-child
        :nth-child(n) 第n个孩子阶段 

        :visited      访问过的
        :hover        光标悬浮上去
      5. 伪元素选择器
        ::after
        ul.menu::after {

        }
        在class为menu的ul元素中追加一个子元素
          <ul class="menu">
            <li>one</li>
            <li>two</li>
            ::after
          </ul>

        ul.menu::before {

        }
        在class为menu的ul元素中插入一个子元素
          <ul class="menu">
            ::before
            <li>one</li>
            <li>two</li>
          </ul>

注意：伪元素是在该元素里的元素用伪元素，例如：ul.menu::before是在ul里的元素 li 前面用before

 其中，可用伪元素设置content为空值去除子元素浮动而使父元素高度为0（即没有东西填充）的影响。

分析：display：block，此时将伪元素设置为块级元素，clear：both清除浮动影响，即使伪元素去浮动，在下一行显示，content（内容）为空，也就没有高度

从而达到去浮动效果

 权重（积分）
        1000  style
        100   id
        10    class、伪类
        1     元素选择器、伪元素

计算权重例子：  1+10 + 1 + 10 + 1+ 10 + 1
        ul.menu > li.menu_item > ul.sub_menu > li {
          color: lightcyan; /* 34*/
        }
        #introduce {
          color:lightcoral    /*100*/
        }
        .si {
          color: gray !important;
        }
      2. 顺序（排名）
        当权重值相同的情况下，后者覆盖前者
      3. 特权（!important）
        脱离了权重和顺序规则