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-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南
- 2024-12-05TailwindCSS入门指南:轻松上手实用教程
- 2024-12-05TailwindCss入门指南:轻松上手实用技巧
- 2024-12-04Tailwind.css入门:简洁高效的设计利器
- 2024-12-03Tailwind.css学习:从入门到实战的全面指南
- 2024-11-29Tailwind.css入门指南:快速上手实用教程