CSS选择器

2017-10-26  本文已影响0人  饥人谷_邵征鹏

1 .class 和 id 的使用场景?

.class和id选择器使用场景.png

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

常见的CSS选择器有5种。

  1. 基本选择器。
  1. 组合选择器。
4.伪类选择器。
5.伪元素选择器。

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

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素标签上的内联样式。
  3. id选择器。
  4. 类选择器。
  5. 伪类选择器。
  6. 属性选择器。
  7. 标签选择器。
  8. 通配符选择器。
  9. 浏览器自定义。
!important优先级样式是个例外,权值最高。

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

排列顺序为
为什么?
  1. 如果,a:link写在a:hover之后,依据CSS层叠特性,a:link将覆盖a:hover样式,鼠标移动到a链接上a:hover将不会生效,这不是我们预期的效果,所以a:link要写在a:hover前。
  2. 如果,a:link写在a:active之后,同理,a:link覆盖了a:active样式,鼠标点击a链接时,a:active将不会生效,所以,a:link要写在a:active前。
  3. 如果,a:hover写在a:active之后,那么,a:hover覆盖a:active样式,要想点击a链接,一定会先经过鼠标移动到a链接之上这个步骤。所以,当点击a链接时,a:active将不会生效,所以,a:hover要写在a:active前。
  4. 而a:visited,跟a:link类似,它发生在a:link之后, 把a:visited写在a:hover和a:active会覆盖它们的效果,所以它的位置,只能在第二位了。

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

5.1.

选择器含义.png

5.2. 列出你知道的伪类选择器

伪类选择器。

5.3. 列出你知道的伪类选择器 div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 (注意空格的作用)。

QQ截图20171025232812.png

QQ截图20171025233855.png

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

QQ截图20171026002421.png QQ截图20171026002712.png QQ截图20171026002848.png
上一篇 下一篇

猜你喜欢

热点阅读