7 CSS选择器

96
好好顽
2017.06.27 19:20* 字数 2298

class 和 id 的使用场景?

class写专门的class通用和私有模块命名,id具有唯一性且优先级太高,用于操作唯一的元素,但是最好只作为js操作dom的挂钩,不添加样式

CSS选择器常见的有几种?

一、基本选择器
*:通用元素选择器,匹配任何元素
E:标签选择器,匹配所有使用E标签的元素
class选择器,匹配所有class属性中包含info的元素
id选择器,匹配所有id属性等于footer的元素
二、组合选择器

  • E,F:多元素选择器,用,分隔,同时匹配元素E或元素F
  • E F:后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
  • E>F:子元素选择器,匹配所有E元素的子元素F
  • E+F:毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
  • E~F:普通相邻选择器,匹配E元素之后的同级元素F(无论直接相邻与否)

三、属性选择器

  • [attr]
    表示带有以 attr 命名的属性的元素。
  • [attr=value]
    表示带有以 attr 命名的,且值为"value"的属性的元素。
  • [attr~=value]
    表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为"value"。
  • [attr|=value]
    表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode编码为U+002D)开头。典型的应用场景是用来来匹配语言简写代码(如zh-CN,zh-TW可以用zh作为value)。
  • [attr^=value]
    表示带有以 attr 命名的,且值是以"value"开头的属性的元素。
  • [attr$=value]
    表示带有以 attr 命名的,且值是以"value"结尾的属性的元素。
  • [attr*=value]
    表示带有以 attr 命名的,且值包含有"value"的属性的元素。
  • [attr operator value i]
    在带有属性值的属性选型选择器表达式的右括号(]括号)前添加用空格间隔开的字母i(或I)可以忽略属性值的大小写(ASCII字符范围内的字母)

四、伪类
CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 将在用户悬停在选择器指定的元素上时应用样式。

  • first-child:匹配元素E的第一个子元素
  • link :匹配素有未被点击的链接
  • visited :匹配所有已经被点击的链接
  • active :匹配鼠标已经在其上按下,但是还没有释放的E元素
  • root :匹配文档的根元素,对于HTML文档,就是HTML元素
  • nth-child(n) :匹配其父元素的第n个子元素,第一个编号为1
  • nth-last-child :匹配其父元素的第n个子元素,第一个编号为1
  • nth-of-type(n):与:nth-child作用类似,但是仅匹配使用同种标签的元素
  • hover :匹配鼠标悬停其上的元素
  • focus :匹配获得当前焦点的元素
  • lang(c) :匹配lang属性等于c的元素
  • enabled :匹配表单中可用的元素
  • disabled :匹配表单中禁用的元素
  • checked: 匹配表单中被选中的radio或checkbox元素
  • selection: 匹配用户当前选中的元素
  • nth-last-of-type(n) :与nth-last-child作用相似,但是仅匹配使用同种标签的元素
  • first-child:匹配父元素的第一个子元素
  • last-child :匹配父元素的最后一个子元素
  • first-of-type :即 nth-of-type(1)
  • last-of-type :即 nth-last-of-type(1)
  • only-child :匹配父元素下仅有的一个子元素
  • only-of-type :匹配父元素下使用同种标签的唯一一个子元素

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

!important>内联>id>class>伪类>属性>元素>通配符>自定义
复杂场景优先级计算从最高权重开始比较,相同则比较下一个权重,权重高的优先级高于权重低的
优先级首先用权重量化,从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1

  • 相同的权重:以后面出现的选择器为最后规则
  • 不同的权重,权重值高则生效
  • 包含更高权重选择器的一条规则拥有更高的权重
  • Id选择器的权重比属性选择器高,
  • 带有上下文关系的选择器比单纯的元素选择器权重要高
  • 与元素“挨得近”的规则生效
  • 最后定义的这条规则会覆盖上面与之冲突的规则
  • 无论多少个元素组成的选择器,都没有一个class选择器权重高
  • 通配符选择器也有权重,权重被认为是 0,0,0,0。比如 *, body * 被继承的css属性也带有权重,权重是0,0,0,0。

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

a:link>>a:visited>>a:hover>>a:active
visited写在active后面,当a标签被点击之后,visited的样式会覆盖其他样式,导致其他样式都不生效

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

  • header id为header的元素

  • .header class为header的元素
  • .header .logo logo是header的子元素
  • .header.mobile 并列关系,这个class有2个名字,1个是header,1个是mobile
  • .header p, .header h3 并列选择header下面的2个子元素p和h3
  • header .nav>li header的子元素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

列出你知道的伪类选择器

  • first-child:匹配元素E的第一个子元素
  • link :匹配素有未被点击的链接
  • visited :匹配所有已经被点击的链接
  • active :匹配鼠标已经在其上按下,但是还没有释放的E元素
  • root :匹配文档的根元素,对于HTML文档,就是HTML元素
  • nth-child(n) :匹配其父元素的第n个子元素,第一个编号为1
  • nth-last-child :匹配其父元素的第n个子元素,第一个编号为1
  • nth-of-type(n):与:nth-child作用类似,但是仅匹配使用同种标签的元素
  • hover :匹配鼠标悬停其上的元素
  • focus :匹配获得当前焦点的元素
  • lang(c) :匹配lang属性等于c的元素
  • enabled :匹配表单中可用的元素
  • disabled :匹配表单中禁用的元素
  • checked: 匹配表单中被选中的radio或checkbox元素
  • selection: 匹配用户当前选中的元素
  • nth-last-of-type(n) :与nth-last-child作用相似,但是仅匹配使用同种标签的元素
  • first-child:匹配父元素的第一个子元素
  • last-child :匹配父元素的最后一个子元素
  • first-of-type :即 nth-of-type(1)
  • last-of-type :即 nth-last-of-type(1)
  • only-child :匹配父元素下仅有的一个子元素
  • only-of-type :匹配父元素下使用同种标签的唯一一个子元素

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 :first-of-type,div后面了空格之后,变成了匹配div下面的叫:first-child、:first-of-type的元素。

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

<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>

.item1:first-child{ color: red;}

  • 设置父元素中第一个类名为item1的元素颜色为红色.item1:first-of-type{ background: blue;}
  • item的父元素的每一个类名为item的元素背景色为蓝色,那就是aa和bb了,因为ccc是第二个类名为item1的元素了,所以不生效
Web note ad 1