如何使用属性选择器

时间:2019-12-01 10:10:30   收藏:0   阅读:72
原文:如何使用属性选择器

属性选择器介绍#

属性选择器说明表#

属性名 描述 举例
[attr] 匹配指定的属性名的所有元素。 [align]{color: red;}
[attr=val] 匹配属性等于指定的值所有元素。 [align=center]{color: red;}
[attr^=val] 匹配属性以指定的属性值开头的所有元素 [color^="#f"]{color :mediumblue;}
[attr$ =val] 匹配属性以指定的属性值结尾的所有元素 [color$="aa"]{color :mediumblue;}
[attr*=val] 匹配属性中包含指定的属性值所有元素 [color*="aa"]{color :mediumblue; }

属性名为[attr]使用方式#

Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性选择器</title> <style> [align]{ color: red; } </style> </head> <body> <h2 align="" >微笑是最初的信仰</h2> <h3 align="">微笑是最初的信仰</h3> <h4 align="">微笑是最初的信仰</h4> <h2>微笑是最初的信仰</h2> </body> </html>

技术分享图片


属性名为[attr=val] 使用方式#

Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性选择器</title> <style> [align=center]{ color: red; } </style> </head> <body> <h2 align="center">微笑是最初的信仰</h2> <h2 align="center">微笑是最初的信仰</h2> <h2 align="">微笑是最初的信仰</h2> </body> </html>

技术分享图片


属性名为[attr^=val] 使用方式#

Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性选择器</title> <style> [color^="#f"]{ color :mediumblue; } </style> </head> <body> <font color="#ff0000" >微笑是最初的信仰</font> <br/> <font color="#ff0000">微笑是最初的信仰</font> <br /> <font color="#ff0000">微笑是最初的信仰</font> <br /> <font color="#aa0000">微笑是最初的信仰</font> </body> </html>

技术分享图片


属性名为[attr$=val] 使用方式#

Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性选择器</title> <style> [color$="aa"]{ color :mediumblue; } </style> </head> <body> <font color="#ff00aa" >微笑是最初的信仰</font> <br/> <font color="#ff00aa">微笑是最初的信仰</font> <br /> <font color="#ff00aa">微笑是最初的信仰</font> <br /> <font color="#aa0000">微笑是最初的信仰</font> </body> </html>

技术分享图片

属性名为[attr*=val] 使用方式#

Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性选择器</title> <style> [color*="aa"]{ color :mediumblue; } </style> </head> <body> <font color="#ff00aa" >微笑是最初的信仰</font> <br/> <font color="#ff00aa">微笑是最初的信仰</font> <br /> <font color="#ff00aa">微笑是最初的信仰</font> <br /> <font color="#aa0000">微笑是最初的信仰</font> </body> </html>

技术分享图片

原文:https://www.cnblogs.com/lonelyxmas/p/11964788.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!