CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。
css有几种属性选择器?
[attribute]
用于选取带有指定属性的元素。[attribute=value]
用于选取带有指定属性和值的元素。[attribute~=value]
用于选取属性值中包含指定词汇的元素。[attribute|=value]
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。[attribute^=value]
匹配属性值以指定值开头的每个元素。[attribute$=value]
匹配属性值以指定值结尾的每个元素。[attribute*=value]
匹配属性值中包含指定值的每个元素。
示例1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> a[href] { color: red; } </style> </head> <body> <h1>可以应用样式:</h1> <a href="#">HTML中文网!!</a> <hr /> <h1>无法应用样式:</h1> <a name="HTML中文网!!">HTML中文网!!</a> </body> </html>
效果图:
示例2:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p[class~="important"] { color: red; } </style> </head> <body> <h1>可以应用样式:</h1> <p class="important warning">This is a paragraph.</p> <p class="important">This is a paragraph.</p> <hr /> <h1>无法应用样式:</h1> <p class="warning">This is a paragraph.</p> </body> </html>
效果图:
以上就是css有几种属性选择器?的详细内容,更多请关注易知道|edz.cc其它相关文章!