CSS的选择器-属性选择器
2021/12/26 23:07:18
本文主要是介绍CSS的选择器-属性选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
按照标签属性进行控制
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。 比如“[cheacked]”。以下同。) p[title] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; } E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*匹配所有具有type属性的input标签*/ /*标签可以不写,表示匹配所有具有type属性的*/ input[type]{ color: red; } /*匹配所有type属性等于“text”的input标签*/ input[type="text"]{ color: red; } /*匹配属性值以指定值开头的元素*/ [class^="s"]{ color: red; } /*匹配属性值以指定值结尾的元素*/ [class$="e"]{ color: blue; } </style> </head> <body> <input type="aastext"> <input type="password"> <div class="abcde">item1</div> <div class="sfdsg">item2</div> </body> </html>
这篇关于CSS的选择器-属性选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-01CSS-Module学习:轻松入门与实战技巧
- 2024-09-29CSS6教程:初学者必备指南
- 2024-09-29CSS定位教程:入门与实战指南
- 2024-09-29CSS浮动教程:掌握网页布局的基础技巧
- 2024-09-29CSS选择器教程:初学者必备指南
- 2024-09-29CSS样式教程:初学者必备指南
- 2024-09-27CSS 中的黄金比例
- 2024-09-25CSS大厂面试真题详解及备考指南
- 2024-09-10深入浅出TailwindCSS开发:快速上手与实战技巧
- 2024-09-10尾风CSS开发:快速上手与实战指南