面试题：CSS伪类选择器有哪些？CSS3新增的伪类选择器有哪些？

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