根据具体属性值选择

2024-01-18 11:43 小编

除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。

例子 1

例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例子 2

与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色,但是第二个或第三个链接不受影响:

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

例子 3

同样地,XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素:

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色,但第一个和第三个元素不受影响:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>


Tag: 选择
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码