也可以是单个字母 元素[属性$=值] 选择所有带指定属性
祖先元素 儿女元素{ }
子元素选择器（直接子元素选择器）
父元素>子元素{ }
兄弟选择器
元素+兄弟元素（紧邻该元素之后的下一个兄弟元素）
所有兄弟元素选择器
元素~兄弟元素（该元素之后的所有兄弟元素）
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div+article{color:red;} </style> </head> <body> <div>这是div</div> <article>这是article</article> <article>这是article</article> </body> </html>
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div~article{color:red;} </style> </head> <body> <div>这是div</div> <article>这是article</article> <article>这是article</article> </body> </html>
属性选择器
元素[属性]
选择所有带指定属性的元素
元素[属性=值]
选择所有带指定属性，并且指定属性值的元素
元素[属性~=值]
选择所有带指定属性，并且属性所包罗的某个单词为指定属性值的元素
元素[属性*=值]
选择所有带指定属性，并且属性所包罗的某个单词或者字母为指定属性值的元素
元素[属性^=值]
选择所有带指定属性，并且属性以指定值开头的元素，开头可以是一个完整的单词，也可以是单个字母
元素[属性$=值]
选择所有带指定属性，并且属性以指定值结尾的元素，结尾可以是一个完整的单词，，也可以是单个字母
元素[属性|=值]
选择所有带指定属性，并且属性值为指定值，或者属性值以指定值-开头（在js中每每使用到）
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a[class]{font-weight:bold;} a[class="one"]{color:red;} a[class~="two"]{text-decoration: underline;} a[class^="one"]{font-style:italic;} a[class$="two"]{border-top:1px solid red;} a[class*="two"]{border-bottom:1px solid red;} a[class|="four"]{border-left:1px solid purple;} </style> </head> <body> <a class="one">链接</a> <a class="one two">链接</a> <a class="three one two">链接</a> <a class="one~">链接</a> <a class="threetwo">链接</a> <a class="four">链接</a> <a class="four-oo">链接</a> </body> </html>
动态伪类
:link :visited :hover :active :focus
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30717.html
- 上一篇：vue animate.css训练动画案例 列表循环
- 下一篇：但是它可以告诉浏览器
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")