CSS中属性选择器

最新推荐文章于 2024-09-05 22:06:38 发布

亦是浓香

最新推荐文章于 2024-09-05 22:06:38 发布

阅读量763

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/mirro81/article/details/75579200

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS中属性选择器

CSS（CSS3）中为我们提供了很多操作HTML内容的选择器，今天我想总结下属性选择器的特点以及更正下我以前对于属性选择器理解上的误区。

1.何为属性选择器？

HTML的大多数标签都拥有属性，例如title，id，class，href等，通过匹配HTML标签中的属性来定义HTML内容的样式就是我们常说的属性选择器。其书写格式如下：
element[attr=”xxx”]
或者如下：
element[attr]
element代表含有该属性的元素（可以不写），attr代表属性，xxx代表选择的属性值。

2.能接受词列表的属性

一些属性只能接受单独的一个属性值，例如href，但是有些属性却能接受多个词列表，例如class，这样的属性我们称之为能接受词列表的属性，书写格式为：
class=“big important gender”，多个属性以空格分开。

3.部分属性选择器（只针对能接受词列表的属性）

如果一些属性是多个词列表属性，我们在选择时，只想匹配含有个别属性值时，可以使用该属性选择器，书写格式为：
element[attr~=”xxx”]
~表示含有该属性值的元素都能使用该样式，具体代码如下：

    <style type="text/css">
        p[class~="italic"]{
        color: green;
        }
    </style>
<p class="bold italic">这是一个用于测试的段落</p>
<p class="italic">这是测试段落2</p>

示例中的class属性为能接受词列表的属性（这个很重要，和下面的部分属性选择器有区别），因此可以使用~属性选择器，意思是使得含有“italic”属性的p元素内容文字颜色为绿色。

注意：一定要理解~部分选择器中“只接受词列表的属性”，实际上，只要是属性值是以空格分开，就算能接受词列表属性，举例如下：

<style type="text/css">
        [title~="is"]{
            background-color: yellow;
        }
    </style>
<p title="thisis">这是一个用于测试的段落</p>
<p title="isme">这是测试段落2</p>

上述代码中含有title属性，一个值是“thisis”，另一个值是“isme”，这这两个属性值都不含空格分隔符，所以CSS语句中的~部分属性选择器不起作用，但是对于下面的代码情况却完全不一样：

<style type="text/css">
        [title~="is"]{
            background-color: yellow;
        }
    </style>
<p title="this is">这是一个用于测试的段落</p>
<p title="is me">这是测试段落2</p>

看似这段代码和上述代码差不多，但是注意：这里的title属性的一个值是“this is”，另一个属性值是“is me”，它们中都有空格分隔，所以能够使用~部分属性选择器。

总结：~部分属性选择器，只能选择用空格符分隔的单词（换句话说它更像是选择英语句子中的单词，因为英语句子中的单词都被空格符分隔了，也就是含有该单词的句子都符合该样式，这一点一定要注意，否则很多人会和下面的知识搞混淆）

拓展：请看下面代码最终会显示什么结果？

<style type="text/css">
        [title~="Figure"]{
            background-color: yellow;
        }
    </style>
<p title="Figure4 this">这是一个用于测试的段落</p>
<p title="how to Figure">这是测试段落2</p>

两个p元素都含有Figure，且这里使用了~部分选择器，最终显示结果会是什么呢？
答案：第一个p元素的背景色不会有任何变化，第二个p元素的背景色为黄色（chrome测试结果），按照我们前面的分析，虽然两个title属性值中都含有“Figure”这个词，但是第二个title中的“Figure”被空格符独立分开了，所以能适用~部分选择器，而第一个title中的“Figure”后面紧跟着一个“4”，所以没用。