css3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素,你还不知道吗?
属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器。
选择符 | 简介 |
---|---|
e[att ] | 选择具有 att 属性的 e 元素 |
e[att =" val"] | 选择具有 att 属性且属性値等于 val 的 e 元素 |
e[ att^=“val”] | 匹配具有 att 属性且值以 val 开头的 e 元素 |
e[ att$=“val”] | 匹配具有 att 属性且值以 val 结尾的 e 元素 |
e[ att*=“val”] | 匹配具有 att 属性且值中含有 val 的 e 元素 |
示例
结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于选取父级选择器里面的了元素
选择符 | 简介 |
---|---|
e : first - child | 匹配父元素中的第一个子元素e |
e : last - child | 匹配父元素中最后一个 e 元素 |
e : nth - child ( n ) | 匹配父元素中的第个子元素 e |
e : first - of - type | 指定类型 e 的第一个 |
e : last - of - type | 指定类型 e 的最后一个 |
e : nth - of - type ( n ) | 指定类型 e 的第 n 个 |
区别:
nth - child
对父元素里面所有孩子排序选择(序号是固定的)先找到第 n 个孩子,然后看是否和 e 匹配。nth -
of - type
对父元素里面指定子元素进行排序选择。先去匹配 e ,然后再根据e找第 n 个孩子。
注: nth - child ( n )选择某个父元素的一个或多个特定的子元素。
- n 可以是数字,关键字和公式。
- n 如果是数字,就是选择第 n 个子元素,里面数字从1开始…。
- n 可以是关键字: even 偶数, odd 奇数。
- n 可以是公式;常见的公式如下(如果 n 是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式 | 取值 |
---|---|
n | 1 2 3 … |
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15… |
n+5 | 从第5个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第5个)… |
... | ... |
示例
伪元素选择器
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
:: after | 在元素内部的后面插入内容 |
注意:
- before 和 after 创建一个元素,但是属于行内元素。
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素。
- 语法: element :: before {}
- before 和 after 必须有 content 属性。
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素。
- 伪元素选择器和标签选择器一样,权重为1 。
示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <style> div{ width: 200px; height: 200px; background-color: skyblue; } /* 创建的是行内元素,设置宽高要转换为行内块或者浮动 */ div::before{ /* content属性是必须要写的 */ content: '我'; float: left; width: 30px; height: 30px; background-color: pink; } div::after{ content: '阿牛'; } </style> </head> <body> <div> 是 </div> </body> </html>
结语
以上就是css3新增选择器的应用示例的详细内容,更多关于css3新增选择器的资料请关注其它相关文章!