web7. css选择器

选择器使用经验：

        遵守CSS书写规范

        使用合适的命名空间

        合理的复用class

一：class和id的使用场景：

如果页面上的元素有共同的特征，可以给它们加上同一个class

页面上的元素是独一无二的 用id，一个页面上不要出现相同的id

二：选择器类型：1.基础选择器 2.组合选择器 3.属性选择器 4.伪类选择器 5.伪元素选择器

基础选择器：*                   通用元素选择器，匹配页面任何元素（很少使用）

                        #id              id选择器                匹配特定id的元素

                        .class         类选择器                匹配class包含（不是等于）特定类的元素

                        element     标签选择器

组合选择器： E,F 多元素选择器，用，分隔，同时匹配元素E和F  比如

.p1,.p2{    color: red;}

                        E F 后代选择器，用空格分隔，匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F

                        嵌套很多层也可以选中

#ct .p2{    color: blue;}

                       E>F 子元素选择器 匹配E元素所有的直接子元素

#ct.p3{    color: blue}

只能选中第一层级的元素，嵌套里面的选不到

                       E+F 直接相邻选择器   匹配E元素之后的相邻的同级元素F

.p1+p{    color: red;}

                       E~F 普通相邻选择器   匹配E元素之后的所有的同级元素F

.p1~p{    color: red;}

                      .class1.class2    代表既又，选中同时拥有这两个的元素（中间没有逗号）

id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素，选中

同时拥有这两个特性的元素

h2.p2{    color: red;}

.p2.active{    color: red;}

    element#id 同理 一般用的很少

                      

属性选择器    E[attr]   匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div   

                      E[attr=value]     匹配属性attr值为value的元素，div[id=test],匹配id=test的div

                      E[attr~=value]  匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素

                      E[attr^=value]  匹配属性attr的值以value开头的元素

                      E[attr$=value]  匹配属性attr的值以value结尾的元素

                      E[attr*=value]   匹配属性attr的值包含value的元素

伪类选择器    表示另外一种状态

                    E:first-child  匹配元素E的第一个子元素

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

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

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

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

                    E:focus 匹配获得当前焦点的E元素

                    E:lang(c)  匹配lang属性等于c的E元素

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

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

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

                    E::selection 匹配用户当前选中的元素

                    E:root 匹配文档的根元素 对于HTML文档 就是HTML元素

                    E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1

                    E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1

                    E:nth-of-type(n)   与:nth-child()作用类似，但是仅匹配使用同种标签的元素

                    E:nth-last-of-type(n) 与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素

                    E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)

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

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

                    E:only-child    匹配父元素下仅有的一个子元素，等同于:first-child:last-child或                  

:nth-child(1):nth-last-child(1)

                    E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type

或:nth-of-type(1):nth-last-of-type(1) 

比如    .child:first-child

            .child:nth-child(2)

            .child:first-of-type

            .child:nth-of-type(2)

同种类型的第一个  和  父容器的第一个孩子的区别

即     h1:first-child:选择是h1并且它是长子的元素

         h1:first-of-type:选择是h1并且它是它父亲里h1类型中的长子元素

伪元素选择器

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

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

                    E::before   在E元素之前插入生成的内容

                    E::after      在E元素之后插入生成的内容

 

选择器优先级：如果多条规则作用于同一个元素上，且定义的相同属性的不同值，比如

<style>    #test {color: #666;}    p {color: #333;}</style><p id="text">Text</p>

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

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

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义（以上是从高到低）

复杂情况：

我们假设行内样式 <div style='xxx'></div>==>a

               ID选择器==>b

               类, 属性选择器和伪类选择器==>c

               标签选择器、伪元素==>d

先比较a的大小 a值大的优先级高，假如a的值相同，再比较b的大小，以此类推到d

比如：

四：a:link   a:hover  a:active  a:visited 的顺序：

a:linka:visiteda:hovera:active

hover 一定要放在visited和link后面

选择器使用经验: 遵循CSS书写规范，使用合适的命名空间，合理的复用class

五：以下选择器都是什么意思

#header{} 匹配id为header的元素

.header{}  匹配class等于header的元素

.header .logo{} 匹配header元素后代中的类为logo的元素

.header.mobile{} 匹配header元素中所有直接子元素mobile

.header p,  .header h3{}匹配header元素后代中的p和h3元素

#header .nav>li{} header元素后代中class值为nav元素中的li元素

#header a:hover{} a元素指定鼠标移动到其上方的样式

#heade .logo~p{} 在head后代中寻找 class值为logo元素之后的同级元素p

#header input [type='text'] 在header后代中寻找type属性为text的input元素

六：列出你知道的伪类选择器：见上面

七：div:first-child   div:first-of-type   div:  first-child  div:  first-of-type 作用和区别：

div:first-child   父元素的第一个子元素而且必须符合指定类型(为div )

div:first-of-type 父元素的第一个div元素

八：

原因：.item1：first-child{}  选中了item1的第一个子元素 p 所以aa为红

           .item1：first-of-type{}选中的子元素必须在父元素的该类子元素中排名第一 所以选中p和h3，因此添加上了蓝色背景