伪类选择器
:nth-chald(n)
<tr> <td></td> <td></td> <td>1</td> </tr>
<tr> <td></td> <td></td> <td>1</td> </tr>2
<tr> <td></td> <td></td> <td>1</td> </tr>
<tr> <td></td> <td></td> <td>1</td> </tr>2
<tr> <td></td> <td></td> <td>1</td> </tr>
选择第一个tr元素里的所有内容
tr:first-child{}
选择2的所有内容
tr:nth-child(2n){}
选择2的所有内容
td:last-child{}
属性选择器
属性的一种特殊待遇搭配比较自由,既可以根据属性来选,也可以根据属性值来选,还可以根据部分属性值来选,具体规则如下:
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素 |
| [attribute=value] | 用于选取带有指定属性和值的元素 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素 |
下面我们使用这四个 a 元素来具体实践下:
<a href="https://ke.qq.com" target="_blank">腾讯课堂</a>
<a href="css-basic.pdf" >CSS学习文档</a>
<a href="css.png" >CSS 脑图</a>
<a href="http://imweb.io" title=“IMWeb”>IMWeb学院</a>
要求如下:
- 选中 title 属性链接
- 选中新窗口打开的链接(可在后面添加一个icon,以区分其他链接)
- 选中不同的文件类型链接(可在后面添加对应的图标,以表示资源类型)
- 选中绝对路径链接
对应的选择器如下:
/* 选中 title 属性链接 */
a[title] {}
/* 选中新窗口打开的链接 */
a[target="_blank"] {}
/* 选中 pdf */
a[href$=".pdf"] {}
/* 选中 png */
a[href$=".png"] {}
/* 选中绝对路径链接 */
a[href^="http://"],
a[href^="https://"] {}