前提:E–表示element元素
date表示属性
首先,css中的基本选择器有:
- ID选择器:针对某一个特定的ID使用。写法:#id{}
- 类选择器: 针对所有的class类进行选择,写法:.class{}
- 标签选择器:对一类标签的选择,写法:标签{}
- 通配符选择器 写法: *{}
还有一种就是群组选择器,将不同的标签组合起来就是一个劝阻选择器,例如: div ul li,div ol li, p{} (表示div下的ul下的li、div下的ol下的li和p元素一起选中)
以下则是对常用的css3的新选择器进行介绍:
1.结构伪类选择器
- E:nth-child(n) —— 同一个父元素下第n个E元素 (n=1,2,3…)
- E:nth-of-type(n) —— 同一个父元素下第n个孩子且元素类型必须是E元素加粗样式
( 注意上面两者的区别) - E:empty:选择器匹配没有子元素(包括文本节点)的每个元素。
- E:first-child:同一个父元素下第一个子元素的所有E元素
- E:last-child —— 最后一个孩子
- E:nth-child(2n+1)或nth-child(odd) —— 奇数孩子
- E:nth-child(2n)或nth-child(even) —— 偶数孩子
- E:first-of-type —— 同一个父元素下第一个孩子且元素类型必须是E元素
- E:last-of-type —— 同一个父元素最后一个孩子且元素类型必须是E元素
- E:nth-last-of-type(n) —— 同一个父元素倒数第n个孩子且元素类型必须是E元素
技巧:当 n<=0时,选择器选取无效,得到如下应用:
选取前5个元素与E相同的子元素 E:nth-of-type(-n+5)
选取后5个元素与E相同的子元素 E:nth-last-of-type(-n+5)
伪类选择器
a元素伪类
- a:link;连接点击之前
- a:hover;鼠标悬停(不仅限于a元素)
- a:visited;鼠标点击之后 访问之后
- a:focus; 获取焦点
以上伪类需要同时使用时,位置不可以变
表单元素伪类选择器
- input:disabled;禁用
- input:enabled;启用
- input:focus;聚焦
- input:checked;选择
关系型选择器
- 后代选择器;div p{}; 只要出现在父元素的后代元素中 就会被覆盖
- 子选择器;div>p{}; 只能覆盖直接子元素(与div连接的第一个p标签)
- 相邻选择器;A+B{}; A紧挨着的后面与A同级的元素选择器
- 通用选择器;A~B{}; A后面的与B元素同级的元素选择器
属性选择器(多用于表单)
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
大致大用法为[标签属性=属性]
例子: input[type=text]:该选择器则是选择input标签type=text的标签;