CSS伪类选择器：
a:link 没有访问之前a标签的样式
a:visited 已访问a标签的样式
a:hover a标签鼠标移上的样式
a:actived a标签鼠标按下的样式
input:focus input表单元素获取焦点
input:blur input表单元素失去焦点
CSS3新增的伪类选择器：
:checked 被选中 主要用在input表单元素上
:not 排除
:last-child 最后一个元素
:nth-child(n) n表示具体的第几个 odd/2n+1 奇数 even/2n 偶数
:only-child 仅仅/唯一的元素
:nth-last-child(n) 倒数第几个元素 :nth-last-child(1) <=> :last-child
:first-of-type 第一个同级兄弟元素
:last-of-type 最后一个同级兄弟元素
:only-of-type 只有一个同级兄弟元素
:nth-of-type(n) 第几个同级兄弟元素
:nth-last-of-type(n) 倒数第几个同级兄弟元素
:empty 空内容
<style> ul li{ float: left; list-style: none; width: 100px; height: 50px; background: red; } /* 排除最后一个li没有右边框线 其余都有，排除了内容为$3的li */ ul li:not(:last-child){ border-right: 10px solid #000; } /* 第一个li背景元素为blue,改变的是内容为$1的li的样式 */ ul li:nth-child(1){ background-color:blue; } /* 偶数位背景元素为yellow，改变的是内容为$2的li的样式 */ ul li:nth-child(even){ background-color:yellow; } /* ul只有一个li子元素，改变的是内容为$4的li的样式 */ ul li:only-child{ background-color: green; }</style><ul> <li>$1</li> <li>$2</li> <li>$3</li></ul><ul> <li>$4</li></ul> <style> p:first-of-type{ background-color: red; } p:last-of-type{ background-color: yellow; } p:only-of-type{ background-color:blue; } p:nth-of-type(2){ background-color: green; } p:nth-last-of-type(3){ background-color: purple; } p:empty{ height: 20px; background-color: orange; }</style><div>我是一个div元素</div><p>我是一个p元素</p><p>我是一个p元素</p><p>我是一个p元素</p><p></p><p>我是一个p元素</p><div> <p>我是一个p元素</p></div>转载于:https://www.cnblogs.com/youknowUL/p/11416257.html