<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ /*div span{*/ /* color: aqua;*/ /*}*/ /*子选择器*/ /*div>span{*/ /* color: red;*/ /*}*/ /*毗邻选择器*/ /*div+span{*/ /* color: blue;*/ /*}*/ /*兄弟选择器*/ /*div~span{*/ /* color:chartreuse;*/ /*}*/ /*1.具有某个属性名 2.具有某个属性名及属性值 3.具有某个属性名及属性值某个标签 */ /*找只要有hobby这个属性名的所有标签*/ /*属性选择器1*/ /*[hobby=‘xxx‘]{*/ /* color: chartreuse;*/ /*}*/ /*属性选择器2*/ /*[hobby]{*/ /* color: red;*/ /*}*/ /*分组嵌套选择器*/ /*div,span,p{*/ /* color: blue;*/ /*}*/ /*伪类选择器*/ /*链接未点击时的颜色*/ /*a:link{*/ /* color: chartreuse;*/ /*}*/ /*!*鼠标悬浮在链接上时的颜色 *!*/ /*a:hover{*/ /* color: red;*/ /*}*/ /*!*鼠标点击链接时的颜色 *!*/ /*a:active{*/ /* color: aqua;*/ /*}*/ /*!*鼠标点过链接后的颜色*!*/ /*a:visited{*/ /* color: brown;*/ /*}*/ /*!*鼠标选中文本框时的颜色 *!*/ /*input:focus{*/ /* background: red;*/ /*}*/ /*!*鼠标悬浮在文本框上时的颜色*!*/ /*input:hover{*/ /* background: aqua;*/ /*}*/ /*改变所有p标签内内容中第一个字符的样式*/ /*p:first-letter{*/ /* color: red;*/ /*}*/ /*在所有p标签内内容的前面加入一个符号*/ /*p:before{*/ /* content: ‘$‘;*/ /*}*/ /* 1.选择器相同的情况下:就近原则 2.选择器不同的情况下: 精度越高,优先级越高 行内 > id选择器 > 类选择器 > 标签选择器 */ </style> </head> <body> <span>div上面第一个span</span> <span>div上面第二个span</span> <div >div <span>div里面的第一个span</span> <p>div里面的第一个p <span hobby="xxx">div里面的第一个p里面的span</span> </p> <span>div里面最后一个span</span> </div> <span hobby="xxx">div下面的第一个span</span> <span hobby="123">div下面的第二个span</span> <span>div下面的第三个span</span> <a href="http://www.baidu.com">伪类选择器测试</a> <input type="text"> <p>100</p> <p>1000</p> <p>10000</p> </body> </html>
原文：https://www.cnblogs.com/hellozizi/p/11459162.html