属性选择器的作用又有哪些呢? 属性选择器它是与标签的属性名和属性值有关 ，属性选择器是通过标签的属性名和属性值来匹配元素。 比如说这里有个标签a 标签，他有个值widht=“400”,
<a width="400"> </a>width就是属性名，400就是属性值，通过他们来匹配元素这就是属性选择器。 下面将列出五个属性选择器，每个选择器都是用中括号包裹着。
选择器含义举例[attr]匹配所有具有attr属性的元素，不考虑它的值h1[align]{…}[attr=‘val’]匹配所有attr属性值等于val的元素h1[align=‘center’]{…}[attr^=“val”]匹配元素中attr属性以指定值开头的所有元素font[color^="#ff"][attr$=“val”]匹配元素中attr属性以指定值结尾的所有元素font[color$=“00”][attr*=“val”]匹配元素中attr属性中包含指定值的所有元素font[color*=“00”]他的相关代码如下，我的代码太乱了还包含了优先级。
<!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 type="text/css"> /*通过属性选择器来匹配元素*/ /*p[align]{ 先匹配P标签，然后再来判断p标签里面是否有align这个属性*/ /* color:blue; 如果有就匹配到，如果没有就匹配不到 }*/ /*第二个书写规则： [属性名=值] /*p[align='center']{ /*匹配 align的属性值等于"center"的元素 color:blueviolet; }*/ /*第三个的书写规则:[属性名^=值] 先找到Font标签 ，然后再来匹配color的属性值以#ff开头的元素*/ /*font[color^="#ff"]{ border: 1px solid #00f; }*/ /* 第四个的书写规则：[属性名$=值] 先找到 font标签 然后再来匹配color的属性值以00结尾的元素*/ /*font[color$="00"]{ border: 1px solid#00f; }*/ /*第五个书写规则*/ font[color*="a"]{ border:1px solid #0000ff; } </style> </head> <body> <p align="center">达内程序员1</p> <h2 align="center">达内程序员2</h2> <p align="left">达内程序员3</p> <font color=#ff0000>颜色</font> <font color=#FFAA00>颜色</font> <font color=#ffAABB>颜色</font> <font color=#AACC00>颜色</font> <font color=#ffAADD>颜色</font> <font color=#DDAABB>颜色</font> </body> </html>那咱在来唠唠优先级. ID选择器>类选择器>标签选择器 一般而言，选择器指向的越准确，优先级越高。通常我们会用1来表示标签的优先级，用10来表示类选择器的优先级， 用100来表示ID选择器的优先级，用1000来表示行内样式 标签选择器 1 类选择器 10 ID选择器 100 行内样式 1000 值越大表示其优先级 越高 不管是单个选择器还是多个选择器组合，他们之前的优先级都可以通过上面的公式来进行 计算我们将其称之为权重值，权重值越大就表示其优先级越高。 亲亲：这边建议 "日行一赞，普渡众生呢 "。
