属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

属性选择器

下面的例子为带有 title 属性的所有元素设置样式：

<style>
   [title]{
      color: red;
   }
</style>

<p title="article">我带有title属性</p>
<p>我不带title属性</p>

尝试一下》

属性和值选择器

下面的例子为 title="article" 的所有元素设置样式：

<style>
   [title=article]{
      color: red;
   }
</style>


<p title="article">我的title是article</p>
<p title="lesson">我的title是lesson</p>
<p>我不带title属性</p>

尝试一下》

属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

<style>
   [title~=article]{
      color: red;
   }
</style>

<p title="article">我的title是article</p>
<p title="my article">我的title通过空格链接</p>
<p title="my-article">我的title通过横线链接</p>
<p>我不带title属性</p>

尝试一下》

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由连字符分隔的属性值：

<style>
   [title |=article]{
      color: red;
   }
</style>

尝试一下》

我们还可以使用元素选择器／id选择器／类选择器 与 属性选择器结合的方式，构造一个复合的选择器

如下，设置input元素 且 type=text的颜色为红色，

            设置class为article 且 带有title属性的颜色为蓝色

<style>
    input[type=text]{
        color: red;
    }

    .article[title]{
        color: blue;
    }
</style>

<input type="text" value="我是text">
<input type="email" value="我是email">

<p class="article" title="biaoti">我的class是article,我还有title</p>
<p class="article">我的class是article,我没有title</p>

尝试一下》