属性选择器

最新推荐文章于 2024-09-04 20:29:03 发布

gunsmoke

最新推荐文章于 2024-09-04 20:29:03 发布

阅读量103

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/104365439

版权

CSS 专栏收录该内容

28 篇文章

订阅专栏

本文深入探讨了CSS中各种属性选择器的使用方法，包括基本的属性存在选择器、属性值选择器，以及属性值开头、结尾和包含的选择器，通过实例展示了如何精确地定位和样式化带有特定属性的HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本代码

h1 {
	color: red;
}

1.含有title属性的h1，title属性只要有就行，可以为空

<style>
  h1[title] {
     color: red;
  }
</style>
// <h1 title>我会被染红</h1>

2.含有title属性并且含有id属性的h1，title属性和id属性只要有就行，可以为空

<style>
  h1[title][id] {
     color: red;
  }
</style>
// <h1 title id>我会被染红</h1>

3.title属性为特定值

<style>
  h1[title="hehe"] {
     color: red;
  }
</style>
// <h1 title="hehe">我会被染红</h1>

4.title属性以特定值开头

<style>
  h1[title^="hehe"] {
     color: red;
  }
</style>
// <h1 title="hehe">我会被染红</h1>   以hehe开头
// <h1 title="ahehe">我不会被染红</h1>

5.title属性以特定值结尾

<style>
  h1[title$="hehe"] {
     color: red;
  }
</style>
// <h1 title="hehe">我会被染红</h1>   以hehe结尾
// <h1 title="heheaaa">我不会被染红</h1>

6.title属性包含特定值

<style>
  h1[title*="hehe"] {
     color: red;
  }
</style>
// <h1 title="hehe">我会被染红</h1>   包含hehe
// <h1 title="heaaa">我不会被染红</h1>

7.title属性包含特定值，但这个值前后不能有其他单词，空格可以，也就是这个词要独立

<style>
  h1[title~="hehe"] {
     color: red;
  }
</style>
// <h1 title="hehe">我会被染红</h1>   单独的hehe
// <h1 title="ddd hehe aaa">我会被染红</h1>   hehe前后都是空格
// <h1 title="heheaaa">我不会被染红</h1>  
// <h1 title="hehe.com">我不会被染红</h1>

8.title属性以特定值开始，或者是特定值加上"-"连接的

<style>
  h1[title|="hehe"] {
     color: red;
  }
</style>
// <h1 title="hehe">我会被染红</h1>   以hehe开始
// <h1 title="hehe-hehe">我会被染红</h1>   hehe开始,后面是-
// <h1 title="hehe.hehe">我不会被染红</h1>