CSS3选择器及权重

一、普通选择器

      1、 标签选择器

        p{

        }

      2、类选择器

        .red{

        }

     3、id选择器

        #pink{

        }

     4、通配符选择器

        *{

                padding:0;

                margin:0;

        }

      5、属性选择器（新增）

       

  /* 具有value属性的input */

        input[value] {

            color: red;

        }

        /* type值为passw的 */

        input[type=password] {

            color: aqua;

        }

        /* class属性中有icon开头的 */

        div[class^=icon] {

            color: aqua;

        }

 

        section[class$=data] {

            color: rgb(179, 116, 116);

        }

        /* 所有class中含icon */

        section[class*=icon] {

            color: brown;

        }

二、伪类选择器

   1、链接伪类选择器

        

        a:link    /* 访问所有未被访问过的链接 */

        a:visited     /*访问所有已被访问过的链接 */

        a:hover       /* 选择指针位于其上的链接 */

        a:active       /* 选择活动链接（鼠标按下位弹起的链接） */

注意：使用上述选择器时，a标签需要单独指定样式

  2、focus伪类选择器

        用于选取获得焦点（即光标）的表单元素

        input:focus {

            background-color: pink;

        }

  3、结构伪类选择器

       主要根据文档结构来选择元素。常用语根据腹肌选择器选择里面的子元素

        

         a:first-child{

        }

        父元素中第一个a的样式

        ul  :first-child{

        }

        ul的第一个子元素的样式   注意冒号前面的空格

        

         nth-child（n）{}与nth-of-type（n）{}的区别

        /* 先给孩子排序，第一个孩子是p不符合div，不选择 */

        section div:nth-child(1) {

            background-color: red;

        }

        /* 先选出div,再排序 */

        section div:nth-of-type(1) {

            background-color: blue;

        }

    4、伪元素选择器

        利用CSS创建新标签元素。无需使用HTML标签，简化结构

注意：伪元素默认是行内元素，设置宽高无效，要用display:block;

三、权重 

1、层叠

相同样式存在执行里标签最近的颜色

2、继承：

子标签继承副标签某些属性（文字相关text fone linie color）

3、优先级

   选择器相同，执行层叠性

   选择器不同，根据权重执行

属性选择器的权重也是0010

权重有四位组成，但永远不会进位

继承的权重是0.  继承的不具有优先性（先看是否是直接定义

权重有叠加性只累计不进位

        /* 权重0001+0001 */

        ul li{

            color:aliceblue;

        }

        /* 0010+0001 */

        .nav li{

            color: azure;

        }

        /* 0001 */

        li{

            color: pink;

        }