css选择器

2017-06-21  本文已影响0人  Eazer

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

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

基础选择器:

组合选择器:
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的作用和区别 （注意空格的作用）

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

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
      </div>

解析：

上一篇下一篇

猜你喜欢

热点阅读