对于css伪类和伪对象选择器的介绍实例

伪类选择器

选择符	版本	描述
E:link	CSS1	设置超链接a在未被访问前的样式。
E:visited	CSS1	设置超链接a在其链接地址已被访问过时的样式。
E:hover	CSS1/2	设置元素在其鼠标悬停时的样式。
E:active	CSS1/2	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus	CSS1/2	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:not(s)	CSS3	匹配不含有s选择符的元素E。
E:root	CSS3	匹配E元素在文档的根元素。
E:first-child	CSS2	匹配父元素的第一个子元素E。
E:last-child	CSS3	匹配父元素的最后一个子元素E。
E:only-child	CSS3	匹配父元素仅有的一个子元素E。
E:nth-child(n)	CSS3	匹配父元素的第n个子元素E。
E:nth-last-child(n)	CSS3	匹配父元素的倒数第n个子元素E。
E:first-of-type	CSS3	匹配同类型中的第一个同级兄弟元素E。
E:last-of-type	CSS3	匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type	CSS3	匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n)	CSS3	匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n)	CSS3	匹配同类型中的倒数第n个同级兄弟元素E。
E:empty	CSS3	匹配没有任何子元素（包括text节点）的元素E。
E:checked	CSS3	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled	CSS3	匹配用户界面上处于可用状态的元素E。
E:disabled	CSS3	匹配用户界面上处于禁用状态的元素E。
E:target	CSS3	匹配相关URL指向的E元素。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            button{
                width: 180px;
                height: 50px;
                border:1px solid #ff6700;
                background: #fff;
                font-size:20px;
                cursor:pointer;
            }
            /*伪类选择器*/
            button:hover{
                background: #ff6700;
                color:#fff;
            }
            a{
                /* 去除文本装饰 */
                text-decoration: none;
            }
            /*链接未访问时*/
            a:link{
                color:#f00;
            }
            /*链接被访问过*/
            a:visited{
                color:#0f0;
            }
            a:hover{
                color:#f00;
                /* 显示下划线 */
                text-decoration: underline;
            }

            .menu li:nth-child(1){
                background: #CCCCCC;
            }

            .menu li:last-child{
                background: #ff0000;
            }
            /*选则偶数行元素*/
            table tr:nth-child(2n){
                background: #00f;
            }
            /*选中奇数行*/
            tr:nth-child(2n+1){
                background: #f00;;
            }
            /*选中除了最后一个其他元素*/
            li:not(:last-child){
                border-bottom:5px solid #0000FF
            }
            /*选中禁用的元素*/
            input[type=text]:disabled{
                background: #ff0;
            }
        </style>
    </head>
    <body>

        <a href="http://www.softeem.com">点我试试</a>

        <button>点我试试</button>

        <div>
            <ul class="menu">
                <li><a href="">menu1</a></li>
                <li><a href="">menu2</a></li>
                <li><a href="">menu3</a></li>
                <li><a href="">menu4</a></li>
                <li><a href="">menu5</a></li>
            </ul>
        </div>

        <input type="text" value="hello" disabled><br>
        <input type="text" value="hello" ><br>
        <input type="text" value="hello" ><br>
        <table>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
                <td>004</td>
                <td>005</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
                <td>004</td>
                <td>005</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
                <td>004</td>
                <td>005</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
                <td>004</td>
                <td>005</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
                <td>004</td>
                <td>005</td>
            </tr>
        </table>

    </body>
</html>

伪对象选择器

选择符	版本	描述
E:first-letter/E::first-letter	CSS1/3	设置对象内的第一个字符的样式。
E:first-line/E::first-line	CSS1/3	设置对象内的第一行的样式。
E:before/E::before	CSS2/3	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after	CSS2/3	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder	CSS3	设置对象文字占位符的样式。
E::selection	CSS3	设置对象被选择时的颜色。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
                list-style: none;
            }
            li{
                height: 50px;
            }
            /* 伪对象选择器 */
            li::before{
                content: url(../img/QQ.png);
            }
            li::after{
                content: "1000元";
            }

            /*私有前缀(特定浏览器支持) 选中输入框的placeholder属性*/
            ::-webkit-input-placeholder{
                color:#f00;
            }
            /* mozella firefox内核 */
            ::-moz-placeholder{
                color:#f00;
            }
            .box{
                height: 300px;
                width:300px;
                overflow-y: scroll;
            }
            /*伪对象设置滚动条样式*/
            ::-webkit-scrollbar{
                width:10px;
                background: #CCCCCC;
                border-radius: 5px;
            }
            /*伪对象设置滚动条滑块样式*/
            ::-webkit-scrollbar-thumb{
                width:10px;
                background: #FF6700;
                border-radius: 5px;
            }
		</style>
	</head>
	<body>
		联系我们
		<ul>
			<li>王小姐</li>
			<li>苍小姐</li>
			<li>博小姐</li>
			<li>刘小姐</li>
			<li>李小姐</li>
		</ul>
		
		<input type="text" placeholder="请输入用户名">
		
		<div class="box">
			<p>good good study ,day day up</p>
			<p>good good study ,day day up</p>
			<p>good good study ,day day up</p>
			<p>good good study ,day day up</p>
			<p>good good study ,day day up</p>
			<p>good good study ,day day up</p>
			<p>good good study ,day day up</p>
		</div>	
	</body>
</html>