CSS选择器

2017-08-20 本文已影响0人 cccccccc7355608

class和id的使用场景

class 把一些特定样式放到一个class类中，需要此样式的标签，可以添加此类名，具有该类名的标签可以不唯一
id 根据提供的唯一id名，为具有该id的唯一标签设置样式

常见的CSS选择器

基础选择器 *(通配符选择器) #id .class element标签
组合选择器

名称	表示	含义
多元素	E,F	E或F
后代	E F	E所有的后代F(子子孙孙)
子元素	E>F	E所有直接子元素
直接相邻	E+F	E之后相邻的(同级)F
普通相邻	E~F	E之后的同级F

选择器连写没有分隔符，"."、"#"充当

属性选择器

表示	示例	含义
E[attr]	div[id]	所有具有id属性的div
E[attr=value]	div[id="test"]	id为test的div
E[attr~=value]	<div attr="value value1 value2"> div[attr~="value"]	所有属性attr具有多个空格分隔，其中一个值等于value的元素
E[attr^=value]	-	attr以value开头
E[attr$=value]	-	attr以value结尾
E[attr*=value]	-	attr的值*包含value字符*

伪元素选择器

表示	含义
E::first-line	E内容的第一行
E::first-letter	E内容的第一个字母
E::before	E之前插入生成的内容
E::after	E之后插入生成的内容

伪类选择器

表示	含义
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
E:disabled	表单中禁用的E
E:checked	表单中被选中的radio/checkbox
E::selection	用户当前选中的元素
E:root	文档根元素，即<html>
E:nth-child(n)	其(E)的父元素的第n个子元素，n从1开始
E:nth-last-child(n)	其(E)父元素的倒数第n个子元素，n从1开始
E:nth-of-type(n)	其(E)的父元素的第n个(与E)同种标签的子元素
E:nth-last-of-type(n)	其(E)的父元素的倒数第n个(与E)同种标签的子元素
E:last-child	(E的)父元素的最后一个子元素，等同于 :nth-last-child(1)
E:first-of-type	(E的)父元素下使用(与E)同种标签的第一个子元素，等同于 :nth-of-type(1)
E:last-of-type	(E的)父元素下使用(与E)同种标签的最后一个子元素，等同于 :nth-last-of-type(1)

n的值可能为 1、2、3、4、5或 2n+1、2n、4n-1或odd、even

选择器的优先级

！important > 标签上的style属性内联样式 > #id选择器 > .class选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器 > 浏览器自定义

※ 复杂场景下，应对优先级分类赋值，比较权重大小

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

a>b>c>d

举例示例中p标签的颜色是什么？

<style>
  #test  p.class1 {color: red;}
  #test .class1.class2 {color: blue;}
</style>

<div id="test">
  <p class="class1 class2"></p>
</div>

分析：分类划分权重
第一条：a=0,b=1,c=1,d=1
第二条：a=0,b=1,c=2,d=0
显然，第二条的权重总值大于第一条，所以p标签为蓝色

a标签有四种伪类选择器
:link(未点击)、:visited(已点击)、:hover(鼠标悬浮)、:active(鼠标按下还未释放)

理解：前两个定义其一般样式，后两个按照鼠标动作发生的顺序来定义样式
而浏览器解析a标签的四种伪类选择器的样式时，其顺序为a:link、a:visited、a:hover、a:active，后面的样式才能在鼠标动作发生时合理覆盖前面的样式，使动作发生时的样式生效——“就近原则”

例如，我们为a定义样式，未点击为蓝色，已点击为红色，鼠标悬浮为绿色，如果我们在编写a标签样式时，没有按照上述顺序编写，而是以a:visited a:hover a:link的顺序编写，a未点击时，鼠标悬浮其上，颜色不会变成绿色，而是蓝色；a被点击后，颜色变成红色，鼠标悬浮其上，颜色变成绿色

#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标签鼠标悬浮时的样式
#header .logo~p{} 匹配id为header的元素的所有class为logo的后代元素之后的（与.logo同级/普通相邻）的元素
#header input[type="text"] 匹配id为header的元素的所有type为text的后代input元素

	div:first-child	div:first-of-type	div :first-child	div :first-of-type
区别	作为长子的div	（div的）父元素下使用同种标签（div）的第一个子元素（标签是div）	div的后代中的第一个子元素（div作为父元素）（子元素标签未知）	div的后代中使用同种标签的第一个子元素（子元素标签未知）

CSS选择器

class和id的使用场景

常见的CSS选择器

选择器的优先级

猜你喜欢

热点阅读