属性选择器

最新推荐文章于 2022-09-22 15:39:46 发布

转载最新推荐文章于 2022-09-22 15:39:46 发布 · 643 阅读

文章标签：

#属性选择器 #css #html

CSS3 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了CSS中属性选择器的使用方法，包括基本的选择器如[attribute]和[attribute=value]，以及CSS3新增的选择器如[attribute^=value]、[attribute$=value]和[attribute*=value]等，并对比了CSS2与CSS3的区别。

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

属性选择器：根据指定的属性名称找到对应的标签, 然后设置属性。
格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type=password]{}

<input type="text" name="" id="">
<input type="password" name="" id="">

p[id]{
color: red;
}
p[class=cc]{
color: blue;
}



----------
[attribute^=value] CSS3
[attribute$=value] CSS3
[attribute*=value] CSS3

例：

img[alt~=abc]{
color: red;
}

css2与css3的区别
1.属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

2.属性的取值是以什么结尾的
[attribute$=value] CSS3

3.属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到