CSS 选择器

二姑娘coding
314 阅读5分钟

查询文档

CSS3选择器规范地址

CSS3选择最新选择器规范

样式表的组成

  • 选择器 + 声明块

  • 选择器 从右往左 解析

基本选择器

/*通配符选择器*/		* {}
/*元素选择器*/		body {}
/*类选择器*/		.list {}
/*ID选择器*/		#list {}

关系选择器

/*后代选择器*/		.list li {}
				会选中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
/*子元素选择器*/		#wrap > .inner {}
				也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
/*相邻兄弟选择器*/	#wrap #first + .inner {}
				它只会匹配紧跟着的兄弟元素
/*通用兄弟选择器*/	#wrap #first ~ div {}
				它会匹配所有的兄弟元素(不需要紧跟)
/*选择器分组*/		h1,h2,h3{}  
				逗号，称之为结合符

属性选择器

/*存在和值属性选择器*/	
	[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
	[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
	[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
	
/*子串值属性选择器*/
	 [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
	 [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
	 [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
	 [attr*=val] : 选择attr属性的值中包含字符串val的元素。

伪类与伪元素选择器

链接伪类

E:link		表示作为超链接，并指向一个未访问的地址的所有锚
E:visited	表示作为超链接，并指向一个已访问的地址的所有锚
E:target 	代表一个特殊的元素，它的id是URI的片段标识符

动态伪类

注意:hover，:active基本可以作用于所有的元素！

E:hover     表示悬浮到元素上
E:active    表示匹配被用户激活的元素（点击按住时）

顺序为:link，:visited，:hover，:active(由于a标签的:link和:visited可以覆盖了所有a标签的状态)

  • :visited选择器：只有下列的属性才能被应用到已访问链接：
    • color
    • background-color
    • border-color

表单相关伪类

E:enabled	匹配可编辑的表单
E:disable	匹配被禁用的表单
E:checked	匹配被选中的表单
E:focus		匹配获焦的表单

结构性伪类

#wrap E:nth-child(index)  //匹配wrap中的第index的子元素,这个子元素必须是E
#wrap E:nth-of-type(index)  //匹配wrap中同类型的第index个的E元素
  • index的值从1开始计数！！！！
  • index可以为变量n(只能是n)或者公式
:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/
  • :nth-child和:nth-of-type有一个很重要的区别！！
    • nth-of-type以元素为中心！！！
:nth-child(index)系列			
	E:first-child            匹配父元素的第一个子元素E
	E:last-child             匹配父元素的最后一个子元素E
	E:nth-last-child(index)  匹配父元素的倒数第n个子元素E
	E:only-child	         匹配父元素仅有的一个子元素E
:nth-of-type(index)系列
	E:first-of-type         匹配同类型中的第一个同级兄弟元素E
	E:last-of-type          匹配同类型中的最后一个同级兄弟元素E
	E:nth-last-type(index)  匹配同类型中的倒数第n个同级兄弟元素E
	E:only-of-type          匹配同类型中的唯一的一个同级兄弟元素E

:not

假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。

li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

:empty

区分空元素

:empty(内容必须是空的，有空格都不行，有attr没关系)

选择不包含子元素的div元素：

div:empty

伪元素选择器

E::before   //在目标元素E的前面插入的内容。用来和content属性一起使用
E::after   //在目标元素E的后面插入的内容。用来和content属性一起使用
E::firstLetter  //设置元素内的第一个字符的样式
E::firstLine  //设置元素内的第一行的样式
E::selection  //设置元素被选择时的字体颜色和背景颜色EE
::placeholder //设置元素文字占位符的样式。(一般用于input输入框)

::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

css声明的优先级

!important > 行内样式 > #id > .class/伪类/属性> tag > * > 继承 > 默认

  • 选择器的特殊性
    内联声明              1,0,0,0 
    ID属性值              0,1,0,0
    类属性/属性/伪类      0,0,1,0
    元素/伪元素           0,0,0,1
    通配符选择器          0,0,0,0
    结合符对选择器特殊性没有一点贡献
    继承没有特殊性

  • 重要声明

    • !important 总是要放在声明的最后，即分号的前面

  • 来源

css样式的来源大致有三种
  创作人员
  读者
  用户代理
  • 权重
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明
  • 层叠
1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级
   先按来源排序
   在按选择器的特殊性排序
   最终按顺序
avatar
文章
阅读
粉丝