CSS3之新增选择器
文章目录
- 1.属性选择器
-
-
-
-
-
- 1.利用属性选择器就可以不借助于类或者id选择器
- 2.属性选择器还可以选择 属性 = 值的某些元素
- 3.属性选择器可以选择属性值开头的某些元素
- 4.属性选择器可以选择属性值结尾的某些元素
-
-
-
-
- 2.结构伪类选择器
-
-
-
- 2.1 `E:first-child` 和`E:last-child`
- 2.2 `nth-child(n)`
- 2.3`E:first-of-type`和`E:last-of-type`
-
-
- 3.伪元素选择器
- 4.总结
1.属性选择器
属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器
| 选择符 | 简介 |
|---|---|
| ele[a] | 选择具有a属性的ele元素 |
| ele[a=“val”] | 选择具有a属性且属性值且等于val的ele元素 |
| ele[a^=“val”] | 选择具有a属性且值以val开头的ele元素 |
| ele[a$=“val”] | 选择具有a属性且值以val结尾的ele元素 |
| ele[a*=“val”] | 选择具有a属性且值中含有val的ele元素 |
tips：上面表格中的ele可以代表任何元素，a可以代表任何属性
注意点：
1.利用属性选择器就可以不借助于类或者id选择器
<head> <style> input[value] { color: lightblue; } </style></head><body> <input type="text" value="请输入内容"></body>2.属性选择器还可以选择 属性 = 值的某些元素
<head><style> input[value="请输入内容"] { color: lightblue; }</style></head><body> <input type="text" value="请输入内容"></body>3.属性选择器可以选择属性值开头的某些元素
<head><style> input[value^="请输入"] { color: lightblue; }</style></head><body> <input type="text" value="请输入内容"></body>4.属性选择器可以选择属性值结尾的某些元素
<head><style> input[value$="内容"] { color: lightblue; }</style></head><body> <input type="text" value="请输入内容"></body>最后这四种选择方式的效果都是一样的，如图~
2.结构伪类选择器
结构伪类选择器常用于根据父级选择器选择里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type（n） | 指定类型E的第n个 |
2.1 E:first-child 和E:last-child
<head> <style> ul li:first-child { background-color: lightblue; } ul li:last-child { background-color: lightgreen; } </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul></body>
2.2 nth-child(n)
nth-child(n)选择某个父级元素的一个或多个特定的子元素
注意点：
1. n可以是数字，关键字和公式
2.n如果是数字，就是选择第n个子元素，里面数字从1开始
3.n可以是关键字：even 偶数，odd奇数
4.n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
<head> <style> ul li:nth-child(even) { /* 选中所有偶数序号的元素 */ background-color: lightgreen; } </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></body>
2.3E:first-of-type和E:last-of-type
| 类型 | 作用 |
|---|---|
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
3.伪元素选择器
伪元素选择器可以帮我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
<head> <style> div { width: 200px; height: 200px; background-color: lightblue; } div::before { content: "我是伪元素选择器"; } </style></head>
注意点：
::before和::after创建一个元素，但是是属于行内元素- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
3.::before和::after必须有content属性 ::before在父元素内容的前面创建元素 ，::after在父元素内容的后面插入元素- 伪元素选择器 和 标签选择器 一样，权重为1
4.总结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配素进行排序选择，先去匹配E，然后再根据E找第n个孩子- 关于
nth-child(n)， 我们要知道n是从0开始计算的，要记住常用的公式 - 如果是无序列表，我们肯定用
nth-child更多 - 类选择器，属性选择器，伪类选择器，权重为10