CSS3属性选择器学习

最新推荐文章于 2024-09-13 23:28:46 发布

浮生空尘叹

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量184

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/qq_38454477/article/details/104189125

版权

Css3的属性选择器在各种情况下的生效情况

1.element[attribute]，选择所有带有attribute属性元素，例：

a[href] {
 color: red;  /*将带有href属性的a元素文本设为红色*/
}

2.element[attribute=“value”]，选择attribute属性值等于"value"的元素，例：

a[href="#"] {
 color: #f00;
}

要注意的是，当属性值可以有多个值时，其中的一个值等于value，是不生效的。例：

<style type="text/css">
 a[class="one"] {
  color: #f00;
 }
</style>
<body>
 <a class="one two">attribute</a>
</body>

在这里插入图片描述

3.element[attribute~=“value”]，选择attribute属性包含单词“value”的元素

<style type="text/css">
 a[href~="#"] {
  color: #f00;
 }
 a[class~="one"] {
  color: #0f0;
 }
</style>
</head>
<body>
 <a href="#">attribute</a>
 <a href="#1">attribute</a>
 <a class="one">attribute</a>
 <a class="one two">attribute</a>
</body>

在这里插入图片描述
即:选择属性值列表(有多个属性值)中有一个值等于value的元素。当值的子串中包含value时，还是失效的，如第二个a元素href的值为“#1”，虽然“#1”的子串中有“#”。

4.element[attribute^=“value”]，选择attribute属性值以“value”开头的所有元素

<style type="text/css">
 a[href^="#"] {
  color: red;
 }
 a[class^="one"] {
  color: aqua;
 }
</style>
</head>
<body>
 <a href="#">attribute</a>
 <a href="#1">attribute</a>
 <a href="1#">attribute</a>
 <a href="1#1">attribute</a>
 <a href="#-1">attribute</a>
 <a class="oneTwo">attribute</a>
 <a class="one two">attribute</a>
 <a class="two one">attribute</a>
</body>

在这里插入图片描述即:选择属性值列表以value开头的元素，且value可为属性值的子串。如第2，5，6个a元素href的值为"#1"，“#-1”，“oneTwo”。而第7，8个a元素有多个class值，但第八个的属性值列表并不是以“one”开头，所以只有是以“one”开头的第7个a元素生效。

5.element[attribute$=“value”]，选择attribute属性值以“value”结尾的所有元素

<style type="text/css">
 a[href$="#"] {
 color: red;
}
 a[class$="two"] {
  color: aqua;
 }
</style>
</head>
<body>
 <a href="#">attribute</a>
 <a href="1#">attribute</a>
 <a class="onetwo">attribute</a>
 <a class="one two">attribute</a>
 <a class="one onetwo">attribute</a>
</body>

在这里插入图片描述即：选择属性值列表中以value结尾的元素，value可为属性值的子串。

6.element[attribute*=“value”]，选择attribute属性值包含"value"的所有元素

<style type="text/css">
 a[href*="#"] {
  color: red;
 }
 a[class*="two"] {
  color: aqua;
 }
</style>
</head>
<body>
 <a href="#">attribute</a>
 <a href="1#">attribute</a>
 <a class="one two">attribute</a>
 <a class="one onetwo">attribute</a>
</body>

在这里插入图片描述即：只要属性值列表的子串中包含value，就可以生效。

7.element[attribute|=“value”]，选择attribute属性值为“value”或以“value-”开头的元素

<style type="text/css">
 a[href|="#"] {
  color: red;
 }
 a[class|="one"] {
  color: aqua;
 }
</style>
</head>
<body>
 <a href="#">attribute</a>
 <a href="#1">attribute</a>
 <a href="#-1">attribute</a>
 <a class="one">attribute</a>
 <a class="one two">attribute</a>
 <a class="one-two three">attribute</a>
 <a class="three one-two">attribute</a>
</body>