css之选择器

CSS（Cascading层叠 Style样式 sheets表），是用来为网页添加样式的代码。
css选择器的作用是用于选中元素，以便为其添加样式
1.基础选择器

• 通用元素选择器（*），通常用于取消浏览器自带的样式，不常用
• id选择器（#id）
• class类选择器（.class）
• 标签选择器（p）

2.组合选择器
组合选择器，E,F表示基础选择器
E,F 多元素选择器，用逗号分割。同时匹配元素E和元素F
E F 后代选择器，用空格分割。选择E元素所有的后代中满足F选择器条件的元素（不只是子元素，子元素所有的后代）
E>F "子元素选择器，用>分割。
选择E元素所有的直接子元素中满足F条件的元素"
E+F "直接相邻选择器，用+分割。
选择E元素之后相邻的下一个兄弟元素F，但要处于同一个父元素内"

E~F "普通相邻选择器（弟弟选择器）。
选择E元素之后的元素F（无论直接相邻与否），但要处于同一个父元素内"

3.属性选择器
html由元素组成，元素由标签（p/div等标签），内容和属性（例如class属性，class="haha"表示class属性的值为haha）组成。


可以通过标签的属性来选择元素

<input type="password">
input[type=password]{
width:30px;}

[href^="http://"] {
  background-color: #f0ad4e;
}

[src$="gif"] {
  border: 1px solid #ccc;
}

4.伪类选择器
常用的

• E:link 匹配E所有未被点击的链接

• E:visited 匹配E所有已经被点击的链接

• E:active 匹配鼠标已经其上按下，还没有释放的E元素

• E:hover 匹配鼠标悬停其上的E元素

//a标签设置伪类时的顺序比较重要，会产生样式覆盖。
//如果a：visited的样式，放在最后，a链接被点击之后，再hover或者active都不会生效。
            a{
                color:red;
            }
            a:visited{
                color:blue;
            }
            a:hover{
                color:green;
            }
            a:active{
                color:yellow;
            }

• E：focus 匹配处于焦点的元素

点击输入框等元素当光标闪烁可以输入内容时，就说明输入框处于焦点状态

• E:enabled 匹配表单中可用的元素

• E:disabled 匹配表单中禁用的E元素

• E:checked 匹配表单中，被选中的radio或者checkbox元素

• E::selection 匹配用户鼠标当前选中的元素，注意这里是由两个冒号的

::selection{
color:red;
} //被鼠标选中的文字会变红

• E:first-child 匹配其父元素E的第一个子元素
• E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
• E:nth-child(n) 匹配其父元素的第N个子元素，第一个标号为1，相当于E:first-child
• E:nth-last-child(n) 匹配其父元素的倒数第N个子元素，第一个编号为1

小tip：先找到E的父元素，再选择它父元素下面第n个元素

• E:nth-of-type(n) 选择满足E选择器的元素的父元素内，满足E选择器条件的子元素中不同种类型（类型是指标签，如p标签和div标签是不同种类型）第N个子元素

小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再选择这些元素同种类型的第N个

• E:nth-last-of-type(n) 与nth-of-type(n) 作用类似，但是倒着匹配的

小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再倒着选择这些元素同种类型的第N个

• E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

• E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

5.伪元素选择器
伪元素选择器前面有两个冒号（::），可以添加到选择器的末尾以选择元素的某个部分。

• E::first-line 匹配E元素内容的第一行

• E::first-letter 匹配E元素内容的第一个字母

• E::before 在E元素内部首位生成一个伪元素，插入生成的内容

可用于清除浮动，主要是简化标签

div::before{
content:"aa";
width:0px;
}

• E::after 在E元素内部最后生成一个伪元素，插入生成的内容

6.选择器优先级

• 普通场景

1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式

.child{
color:red !important;
}

2、作为style属性写在元素标签上的内联样式

3、id选择器

4、类选择器

5、伪类选择器

6、属性选择器

7、标签选择器

8、通配符选择器

9、浏览器自定义

• 复杂场景下：

标记为ABCD

1.  行内样式:<div style="xxx"></div>     ==>a
           2.  id选择器:                            ==>b
           3.  类，属性选择器和伪类选择器              ==>c
           4. 标签选择器和伪元素选择器                ==>d

然后根据选择器去分类计算，最后先比较a的值，a相同就比较b，以此类推。数值更高，优先级更高！例如：

*       {}  /a=0 b=0 c=0 d=1/-> /0,0,0,1/
            p       {}  /a=0,b=0,c=0,d=1/-> /0,0,0,1/
            a:hover {}  /a=0,b=0,c=1,d=1/-> /0,0,1,1/
            ul li   {}  /a=0,b=0,c=0,d=2/-> /0,0,0,2/
            h1+input[type=hidden]{} /a=0,b=0,c=1,d=2/-> /0,0,1,2/
            ul ol li.active  {}  /a=0,b=0,c=1,d=3/->/0,0,1,3/
            #ct .box p {}  /a=0,b=1,c=1,d=1/-> /0,1,1,1/
            div#header:after {}  /a=0,b=1,c=0,d=2/-> /0,1,0,2/
            style=""    /a=1,b=0,c=0,d=0/ ->/1,0,0,0/

7.例子

<style>
        .box:first-child {
         color: red;
        /* 输出第一个div.box变红 */
       }
       .box:first-of-type {
         background: blue;
         /* 第一个div标签的div.box 、p.box变蓝背景 */
       }
       .box :first-child {
         font-size: 30px;
         /* .box后代第一个孩子div.item变成3opx */
       }
       .box :first-of-type {
         font-weight: bold;
         /* .box后代第一个div和p类型div.item和p.item变成粗体 */
       }
        </style>
         <div class="container">
           <div class="box">div.box</div>
           <p class="box">p.box</p>
           <div class="box">div.box</div>
           <div class="box">
             <div class="item">div.item</div>
             <p class="item">p.item</p>
           </div>
           <p class="box"></p>
         </div>
       
    
</body>