CSS选择器

96
饥人谷_思铭
2017.08.14 21:48* 字数 2122

1,class 和 id 的使用场景?

1.class是类选择器,用.class定义,定位到页面中有相同特征的一类元素。
2.id是id选择器,优先级高于类选择器。用#id定义,定位到页面中唯一的元素。

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

1.基础选择器。
  • *通用元素选择器,匹配页面任何元素。(这也决定我们很少使用)
  • (#id) id选择器,匹配页面特定元素。
  • .class类选择器,匹配class包含(不等于)特定类的元素。
  • element标签选择器。
2.组合选择器。
  • E,F 多元素选择器,用,分隔,同时匹配元素E或元素F
  • E F 后代选择器,用空格分隔,匹配E元素所有的后代(不* 只是子元素、子元素向下递归)元素F
  • E>F 子元素选择器,用>分隔,匹配E元素的所有直接子元素
  • E+F 直接相邻选择器,匹配E元素之后的相邻的同级元素F
  • E~F 普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否)
3.属性选择器。

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的元素

4.伪类选择器。

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)
E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素

5.伪元素选择器。

E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

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

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

复杂场景

重要级别按高到低,a>b>c>d,高级权重相同时再比较低级别权重。

  • 行内样式 <div style="xxx"></div> ==> a
  • ID 选择器 ==> b
  • 类,属性选择器和伪类选择器 ==> c
  • 标签选择器、伪元素 ==> d

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

  • a:link是链接平时的状态。
  • a:hover是鼠标放到链接上的状态。
  • a:active是链接被按下时候的状态(鼠标没有松开)。
  • a:visited是链接被访问过的状态。
首先选择器会相互覆盖,在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。
所以顺序是

1.a:link
2.a:visited
3.a:hover
4.active

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

1.#header{
  }匹配Id=header的元素

  1. .header{
    }匹配class=header的元素
  2. .header .logo{
    }class为header元素的后代中class为logo的元素
  3. .header.mobile{
    }class为header的元素和class为mobile的元素
  4. .header p, .header h3{
    }class为herder元素的后代为P标签和class为herder元素的后代元素为h3标签

6.#header .nav>li{
}id是herder元素的后代class为nav元素的直接子元素li标签
7.#header a:hover{
}id是header元素的后代是a标签(鼠标放到连接上的状态)的样式
8.#header .logo~p{
}id是header元素的后代class为logo元素的同级之后的P标签
9.#header input[type="text"]{
}id为header元素的后代type="text"的input标签

6,列出你知道的伪类选择器

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:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素

7,div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别

  • div:first-child匹配作为长子(第一个子女)的元素div
  • div:first-of-type匹配父元素的子元素中,第一个div元素
  • div :first-child匹配所有div元素内所有元素中属于其父元素的首个子元素
  • div :first-of-type匹配所有div元素内所有元素中属于其父元素的首个类型的子元素

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

Paste_Image.png
  • 匹配class为item1父元素下的第一个子元素,class为item1的p、h3元素的父元素都是div,div的第一个子元素是p,所以p字体颜色变红;
  • 匹配的是class包含item1其父元素下相同类型子元素中的第一个,所以第一个p 第一个h3变蓝
日记本