【教程】html+css零基础入门教程之属性选择器详解（二十八）

问题：我怎么才能收到你们公众号平台的推送文章呢？

答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。

(1)简单属性选择

例子1：

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可

例子2：

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写:

a[href][title] {color:red;}

(2)根据具体属性值选择

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

例子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;}

(3)属性与属性值必须完全匹配

这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题

例子：

<p class="important warning">This paragraph is a very important warning.

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

(4)根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

练习题

1、要把含有alt属性的img标签隐藏，正确的写法是?（）

A、img.alt{display:none}

B、img[alt]{display:none}

C、img{display:none}

相关文章

【教程】html+css零基础入门教程（一）

【教程】html+css零基础入门教程（二）

【教程】html+css零基础入门教程（三）

【教程】html+css零基础入门教程（四）

【教程】html+css零基础入门教程（五）

【教程】html+css零基础入门教程（六）

【教程】html+css零基础入门教程（七）

【教程】html+css零基础入门教程（八）

【教程】html+css零基础入门教程（九）

【教程】html+css零基础入门教程（十）

【教程】html+css零基础入门教程（十一）

【教程】html+css零基础入门教程（十二）

【教程】html+css零基础入门教程（十三）

【教程】html+css零基础入门教程（十四）

【教程】html+css零基础入门教程之CSS尺寸（十五）

【教程】html+css零基础入门教程之CSS边框（十七）

【教程】html+css零基础入门教程之CSS外边距（十八）

【教程】html+css零基础入门教程之CSS 外边距合并（十九）

【教程】html+css零基础入门教程之CSS 布局（二十）

【教程】html+css零基础入门教程之CSS 定位（二十一）

【教程】html+css零基础入门教程之CSS 相对定位（二十二）

【教程】html+css零基础入门教程之CSS 绝对定位（二十三）

【教程】html+css零基础入门教程之CSS 浮动（二十四）

【教程】html+css零基础入门教程之CSS选择器（二十五）

【教程】html+css零基础入门教程之类选择器详解（二十六）

【教程】html+css零基础入门教程之ID 选择器详解（二十七）