CSS选择器
2017-03-15 本文已影响0人
Gia_Mo
class 和 id 的使用场景?
- id选择器优先级很高且只能使用一次，因此一般用于页面分块的块级标签上
- 类选择器，一个标签上可以有多个类，且同一个类可以用在多个标签上，多用于多个标签样式相同时
CSS选择器常见的有几种?
常见的选择器有：
-
基础选择器
-
*通用元素选择器 -
#id选择器 -
.class类选择器 -
element标签选择器
-
-
属性选择器
-
E[attr]匹配所有具有属性attr的元素 -
E[attr=value]匹配所有属性attr的值为value的元素 -
E[attr^value]匹配属性attr的值以value开头的元素 -
E[attr$value]匹配属性attr的值以value结尾的元素
-
-
伪类选择器
-
E:first-child匹配元素E的第一个子元素 -
E:hover匹配鼠标悬停的元素 -
E:link匹配所有未被点击的链接 -
E:visited匹配所有已被点击的链接 -
E:focus匹配获得当前焦点的元素 -
E:active匹配鼠标已经按下还未释放的元素 -
E:enable匹配表单中可用的元素 -
E:disable匹配表单中禁用的元素 -
E:checked匹配所有已被选择的radio和checkbox元素 -
E:first-of-type匹配父元素下使用同种标签的第一个子元素
-
-
组合选择器
-
E F后代选择器 -
E+F直接相邻选择器 -
E>F子元素选择器 -
E~F普通相邻选择器
-
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
优先级从高到低依次是：
- 在属性后面使用!import会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景下的计算：
- 根据组合选择器按照以下规则统计各类选择器的个数：
行内样式 --> 统计值为a
ID选择器 --> 统计值为b
类、属性选择器、伪类选择器 --> 统计为c
标签选择器、伪元素选择器 --> 统计为d - 先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级高；
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，a链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前。
若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）
以下选择器分别是什么意思?
-
#header{}匹配id为header的元素 -
.header{}匹配class为header的元素 -
.header .logo{}匹配class为header的所有class为logo的后代元素 -
.header.mobile{}匹配class="header mobile"的元素 -
.header p, .header h3{}匹配class="header"元素的后代p元素和后代h3元素 -
#header .nav>li{}匹配id="header"元素的后代中class="nav"的元素的li子元素 -
#header a:hover{}匹配id="header"元素的后代中a元素的hover状态 -
#header .logo~p{}匹配id="header"元素的后代中class="logo"的元素相邻p元素 -
#header input[type="text"]{}匹配id="header"元素的后代中type="text"的input元素
列出你知道的伪类选择器
-
E:first-child匹配元素E的第一个子元素 -
E:hover匹配鼠标悬停的元素 -
E:link匹配所有未被点击的链接 -
E:visited匹配所有已被点击的链接 -
E:focus匹配获得当前焦点的元素 -
E:active匹配鼠标已经按下还未释放的元素 -
E:enable匹配表单中可用的元素 -
E:disable匹配表单中禁用的元素 -
E:checked匹配所有已被选择的radio和checkbox元素 -
E:first-of-type匹配父元素下使用同种标签的第一个子元素
div:first-child和div:first-of-type的作用和区别
-
div:first-child匹配的是div元素的第一个子元素 -
div:first-of-type指定父元素的首个div元素
运行如下代码，解析下输出样式的原因
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
/*类名为item1的父元素下的第一个子元素，所以符合样式规则1；
类名为item1的父元素下的第一个p元素，所以也匹配样式规则2*/
<h3 class="item1">bb</h3>
/*类名为item1的父元素下的第二个子元素，所以不符合样式规则1；
类名为item1的父元素下的第一个h3元素，所以匹配样式规则2*/
<h3 class="item1">ccc</h3>
/*类名为item1的父元素下的第三个子元素，所以不符合样式规则1；
类名为item1的父元素下的第二个h3元素，所以也不匹配样式规则2*/
</div>
