CSS属性选择器用于选择具有特定属性或属性值的元素。通过基于某些特定属性对HTML元素进行分组来设置HTML元素的样式是一种很好的方法，属性选择器将选择具有类似属性的元素。 以下讨论了几种类型的属性选择器：
null
- [属性]选择器： 这种类型的属性选择器用于选择具有指定属性的所有元素，并将CSS属性应用于该属性。例如，选择器[class]将选择具有style属性的所有元素。
例子：
<!DOCTYPE html><html><head><title>Attributes selector</title><style>[class] {text-align:center;Color:green;}.gfg {font-size:40px;font-weight:bold;margin-bottom:-20px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><pclass="geeks">A computer science portal for geeks</p></body></html>输出：
该选择器用于限制某些特定元素，然后需要在属性选择器之前指定该元素。 例子：
<!DOCTYPE html><html><head><title>Attribute selector</title><style>div[style] {text-align:center;color:green;font-size:40px;font-weight:bold;margin-bottom:-20px;}p {text-align:center;font-size:17px;}</style></head><body><divstyle="color:green">GeeksforGeeks</div><p>A computer science portal for geeks</p></body></html>输出：
可以使用逗号运算符选择多个元素
h2, p[style] { background-color: #00b93e; } - [attribute=“value”]选择器： 此选择器用于选择其属性值与指定值完全相同的所有元素。
例子：
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[title = "gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[title = "geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divtitle="gfg">GeeksforGeeks</div><ptitle="geeks">A computer science portal for geeks</p></body></html>输出：
- [属性~=“值”]选择器： 此选择器用于选择其属性值为一组空格分隔值的所有元素，其中一个值正好等于指定值。
例子：
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class~="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class~="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeks">A computer science portal for geeks</div><divclass="geeks ide">GeeksforGeeks is coding platform</div></body></html>输出：
- [属性|=“值”]选择器： 此选择器用于选择其属性具有以指定值开头的以连字符分隔的值列表的所有元素。该值必须是一个完整的单词，可以是单独的，也可以是后跟连字符的。
例子：
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class|="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class|="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeks-ide">A computer science portal for geeks</div><divclass="geeks-ide1">GeeksforGeeks is coding platform</div></body></html>输出：
- [attribute^=“value”]选择器： 此选择器用于选择属性值以指定值开头的所有元素。值不需要是一个完整的词。
例子：
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class^="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class^="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeks">A computer science portal for geeks</div><divclass="geekside">GeeksforGeeks is coding platform</div></body></html>输出：
- [属性$=“值”]选择器： 此选择器用于选择属性值以指定值结尾的所有元素。值不需要是一个完整的词。
例子：
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class$="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class$="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeksforgeeks">A computer science portal for geeks</div><divclass="geeks">GeeksforGeeks is coding platform</div></body></html>输出：
- [属性*=“值”]选择器： 该选择器选择其属性值包含指定值的所有元素。值不需要是一个完整的词。
例子：
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class*="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class*="for"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeksforgeeks">A computer science portal for geeks</div><divclass="geeks for">GeeksforGeeks is coding platform</div></body></html>输出：
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库](https://www.cppku.com/wp-content/themes/zibll/img/thumbnail.svg)
