css选择器

1.class 和 id 的使用场景? 列出你知道的伪类选择器

• class用于定位某一类元素，页面某一元素有共同特征的可以用class元素，页面元素有个别共同特征的也可以用class元素。
• id用于定位页面唯一的元素，同一页面不能出现相同的“id“元素。

2、CSS选择器常见的有几种?

基础选择器:

• *通配符
• id选择器
• class选择器
• element标签选择器

组合选择器:
E,F 多元素选择器(用,分隔)同时选中E,F两种元素
E F 后代选择器(用空格分隔)选择E下的所有F元素
E>F 子元素选择器(用>相连)选择E下直接的子元素
子元素选择器与后代选择器区别:
后代会选择所有子元素(包括直接子元素和孙子级元素)
子元素选择器只会选择其直接子元素
E+F 直接相邻选择器(匹配E元素后紧紧相邻的同级元素F)
E~F 普通相邻选择器(匹配E元素后同级元素F,无论是否相邻)
class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

属性选择器:

E[attr]: 具有attr属性的元素 e.g.: input[type]
E[attr =value]: 具有attr属性值为value的元素 e.g.: input[type=text]
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:hover 匹配鼠标悬停其上的元素
E:active 匹配鼠标按下未松开的元素
E:focus 匹配获取焦点的元素
E:lang(c) 匹配lang属性等于c的E元素(lang可以使自定义属性)
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配当前被用户选中的元素
E:root 匹配文档根元素,html
E:nth-child(n) 匹配父元素的第n个子元素
E:nth-last-child(n)匹配父元素倒数第n个子元素
E:last-child 匹配父元素最后一个子元素
E:first-child 匹配父元素第一个子元素
E:only-child 匹配父元素下仅有一个子元素
E:nth-of-type(n) 匹配同种标签的第n个
E:nth-last-of-type(n) 匹配同种标签倒数第n个
E:first-of-type 匹配同种标签第一个
E:last-of-type 匹配同种标签最后一个
E:onlye-of-type 匹配父元素下使用同种标签的唯一一个子元素

以上选择器中n的值可以为:

1. 1,2,3,4,5
2. 2n+1,2n,4n-1
3. odd,even

3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？

属性后+!important：p {color:#ccc!important;}
内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通用选择器
浏览器自定义
复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

a:link { /未被点击/
color: #000;
}
a:visited { /已被点击/
color: #F00;
}
a:hover { /鼠标悬停其上/
color: #0F0;
}
a:active { /鼠标已经按下，没有释放/
color: #00F;
}

当鼠标未点击a链接时， a:link起作用，所有应该放在最上面。当鼠标放在链接上时，a:link a:hover 都会起作用，如果想让hover起作用，应将其放在后面。当鼠标点击链接的时候，如果想让a:active起作用，应将其放在后面,a:visited鼠标点击过后的样式，这个如果放到最后，a:hover a:active都不会生效，所以要放到这两个前面

5.以下选择器分别是什么意思？

#header{                        /*匹配id为header的元素*/
}
.header{                        /*匹配class为header的元素*/
}
header .logo{                  /*匹配class为header下的class名为logo的元素*/
}
.header.mobile{                 /*匹配同时具有class名为header和mobile的元素*/
}
.header p, .header h3{          /*匹配class为header下的p元素和class为header下
的h3元素*/
}
#header .nav>li{                /*匹配id为header下的class为nav的直接子元素标签为
li的元素*/
}
#header a:hover{                /*id为header下的a标签鼠标放上去的样式*/
}
#header .logo~p{                /*id为header下的class为logo的同级元素后的p标签
 的样式*/
}
#header input[type="text"]{     /*id为header下的input的type值为text的元素的样式*/

6.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child：选择属于其父元素的首个子元素的每个
  
  元素设置样式
• div:first-of-type: 选择属于其父元素的同种标签下的首个子元素的每个
  
  元素，设置样式
• div :first-child：选择div元素下的第一个子元素
• div :first-of-type：选择div元素下的同类元素的第一个子元素
  
  image.jpg1512x411 28.1 KB
  
  
  
  image.jpg1564x342 22 KB
  
  
  
  image.jpg1581x331 23 KB
  
  
  
  image.jpg1462x438 24.2 KB
  

7.运行如下代码，解析下输出样式的原因。

 

   
aa
   
bb
   
ccc
      

解析：

• .item1:first-child{}匹配class名为item的第一个元素设置样式为字体红色。
• .item1:first-of-type{}：匹配父元素下使用同种标签的第一个元素，那么父元素class为ct的元素下面有两种类型，p和h3，两个类型各取第一个元素，所以aa和bb设置样式为蓝色背景。