前端新手常见问题(四)-CSS选择器

96
我要认真学前端
2017.04.02 14:28* 字数 2640

class 和 id 的使用场景?

class属性:

指定标签的类名,CSS操作中,把一些特定的样式放到一个类中,需要此样式的标签,可以添加此类,可以把多个类放到一个class属性中,但必须用空格隔开来。

id属性:

1、指定标签的唯一id号,快速获取标签对象,如:document.getElementById(id);
2、用于充当label标签for属性的值。
3、CSS中,用于对应的id选择器 #id名{xxx:xxx}。

CSS选择器常见的有几种?

基础选择器

1、*{ }:通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)
2、#id:id选择器,匹配特定id的元素
3、.class:类选择器,匹配class包含(不是等于)特定类的元素
4、element:标签选择器,直接使用标签名

范例:
  • {
    margin: 0;
    padding: 0;
    }
    ‘#id-selector{
    color: #333;
    }
    .class-selector{
    background: #ccc;
    }
    p {
    font-size: 20px;
    }

组合选择器:

1、E,F:多元素选择器,用,分隔,同时匹配元素E或元素F
2、E F:后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
3、E>F:子元素选择器,用>分隔,匹配E元素的所有直接子元素F
4、E+F:直接相邻选择器,匹配E元素之后的相邻的同级元素F
5、E~F:普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否)
6、.class1.class2:id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素
7、element#id:id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素

范例:

1、div,p{xxx:xxx} 同时匹配div元素和p元素
2、div p{xxx:xxx}匹配div元素下的所有子元素p(包括孙元素)
3、div>p{xxx:xxx} 匹配div元素下的所有第一级子元素p(不包括孙元素)
4、h1+p{xxx:xxx} 匹配所有h1元素之后的相邻的同级p元素
5、h1~p{xxx:xxx} 匹配h1元素之后的所有同级p元素

属性选择器:

1、E[attr]:匹配所有具有属性attr的元素,div[id]就能取到所有有id属性的div
2、E[attr = value]:匹配属性attr值为value的元素,div[id=test],匹配id=test的div
3、E[attr ~= value]:匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
4、E[attr ^= value]:匹配属性attr的值以value开头的元素
5、E[attr $= value]:匹配属性attr的值以value结尾的元素
6、E[attr *= value]:匹配属性attr的值包含value的元素

伪类选择器

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) 匹配不符合当前选择器的任何元素

注意:n的取值

1,2,3,4,5
2n+1, 2n, 4n-1
odd, even

伪元素选择器

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

CSS选择器优先级问题

从高到低分别是

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

复杂场景中:

1.如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属性也是样式规则,因为这些样式规则没有选择器,因此记为a=1,b=0,c=0,d=0)
2.计算选择器中 ID 属性的个数 (= b)
3.计算选择器中其他属性(类、属性选择器)和伪类的个数 (= c)
4.计算选择器中元素名称和伪元素的个数 (= d)
四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。
  优先级的算法:
  每个规则对应一个初始"四位数":0、0、0、0
  若是 行内选择符,则加1、0、0、0
  若是 ID选择符,则加0、1、0、0
  若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0
  若是 元素选择符/伪元素选择符,则分别加0、0、0、1
  算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。
  需注意的:
  ①、!important的优先级是最高的,但出现冲突时则需比较”四位数“;
  ②、优先级相同时,则采用就近原则,选择最后出现的样式;
  ③、继承得来的属性,其优先级最低;
  !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

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

css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active:
a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。

原因:

1、链接未被访问时,鼠标经过同时拥有link,hover两种属性,后面的属性会覆盖前面属性的定义。
2、链接被点击时会触发active属性,同时覆盖前面的属性
3、链接被访问过后,鼠标经过时同时拥有visited、hover两种属性。
4、所以说hover要放在link、visired的后面。

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

先看下面一条代码:

QQ截图20170402142212.png

p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;
h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;
span:first-child 匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素;

p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个;
h1:first-of-type 匹配到的是h1元素,因为h1是div的所有类型为h1的子元素中的第一个;
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是它们中的第一个。

总结:

1、:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
2、:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。
3、同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

日记本
Web note ad 1