选择器

258 阅读1分钟

伪类选择器

: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://"] {}