浅谈css选择器

2017/06/15 16:52
阅读数 243

一、css选择器分类

这里写图片描述

二、选择器语法

1、基本选择器语法

选择器 类型 功能描述
* 通配选择器 选择文档中的所有HTML元素,如:*{margin:0}
E 元素选择器 选择指定类型的HTML元素,如:p{font-size:16px}
id ID选择器 选择指定ID属性值为’id’的任意类型元素,如: #myDiv:{width:200px}
.class 类选择器 选择指定class属性值为’class’的任意类型的任意多个元素,如:.red{color:red}
selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合,如:p,div{color:red}



2、层次选择器

选择器 类型 功能描述
E F 后代选择器 该选择器定位元素E的后代中所有元素F,如: ul li{color:red}
E>F 子选择器 该选择器定位元素E的直接子元素中的所有元素F
E+F 相邻兄弟选择器 该选择器定位与元素E有相同父元素且紧邻元素E的元素F
E~F 一般兄弟选择器 该选择器定位与元素E有相同父元素且位于E之后的所有元素F



3、动态伪类选择器

选择器 类型 功能描述
E:link 链接伪类选择器 该选择器匹配元素E被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器 该选择器匹配元素E被定义了超链接并已被访问过。常用于链接描点上
E:active 用户行为选择器 该选择器匹配元素E被被激活。常用于链接描点和按钮上
E:hover 用户行为选择器 该选择器匹配元素E且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器 该选择器匹配元素E且而且匹配元素获取焦点

注:a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后 


4、目标伪类选择器

选择器 功能描述
E:target 该选择器匹配相关URL指向的E元素



5、UI元素状态伪类选择器

选择器 类型 功能描述
E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素
E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素



6、结构伪类选择器

选择器 功能描述
E:fisrt-child 父元素的第一个子元素E,与:nth-child(1)相同;
E:last-child 父元素的倒数第一个子元素E
E:root 根元素,始终指html元素;
E F:nth-child(n) 该选择器定位元素E的第n个子元素的元素F:
E F:nth-last-child(n) 该选择器定位元素E的倒数第n个子元素的元素F;
E:nth-of-type(n) 该选择器定位元素E的第n个指定类型子元素;
E:nth-last-of-type(n) 该选择器定位元素E的导数第n个指定类型子元素:
E:first-of-type 与:nth-of-type(1)相同;
E:last-of-tye 与:nth-last-of-type(1)相同;
E:only-child 父元素中唯一的子元素E
E:only-of-type 父元素中唯一具有该类型的元素E;
E:empty 没有子元素的元素,没有子元素包括文本节点;

注::nth-child(odd) 选择的是奇数项,而使用:nth-last-child(odd) 选择的却是偶数项 


7、否定伪类选择器

选择器 功能描述
E:not(F) 匹配所有除元素F外的E元素



8、属性选择器

选择器 功能描述
E[attr] 该选择器定位具有属性attr的任何元素E;
E[attr=value] 该选择器定位具有属性attr且属性值为value的任何元素E;
E[attr =value]
E[attr^=value] 该选择器定位具有属性attr且属性值以value开头的任何元素E;
E[attr*=value] 该选择器与E[attr~=value]相似,但更进一步,定位具有属性attr且属性值任意位置包含val的元素E,value可以是一个完整的单词,也可以是一个单词中的一部分;
E[attr$=value] 该选择器与E[attr^=value]正好相反,定位具有属性attr且属性值以value结尾的任何元素E;
E[attr~=value] 该选择器定位具有属性attr且属性值为完整单词 value 的任何元素E;



9、伪元素

选择器 功能描述
:first-line 匹配文本首行;
:first-letter 匹配文本首字母;
:before 与:after 使用 contnet 属性生成额外的内容并插入在标记中;
:selection 匹配突出显示的文本;

 

 

 

展开阅读全文
打赏
2
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
2
分享
返回顶部
顶部