CSS常用的一些伪类选择器如下:
/*伪类;子元素选择器*/
/*选择ul下的第一个儿子*/
ul :first-child/*倒序第一个儿子*/
ul :last-child/*定位儿子选择*/
ul :nth-child(5)/*定位倒叙选择儿子*/
ul :nth-last-child(2)/*伪类:类型选择器*/
ul li:first-of-type
具体使用方法请查看源码以及注释!!!!
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> ul{ list-style: none; margin: 0; padding: 0; border: 1px solid red; } li{ /*width: 40px;*/ /*height: 40px;*/ /*border: 1px solid black;*/ /*display: inline-block;*/ /*border-radius: 50%;*/ /*text-align: center;*/ /*line-height: 40px;*/ } /*伪类;子元素选择器*/ /*选择ul下的第一个儿子*/ ul :first-child{ background-color: aqua; } /*倒序第一个儿子*/ ul :last-child{ background-color: aqua; } /*定位儿子选择*/ ul :nth-child(5){ background-color: aqua; } /*定位倒叙选择儿子*/ ul :nth-last-child(2){ background-color: blue; } /*伪类:类型选择器*/ ul li:first-of-type{ background-color: red; color: yellow; } ul li:last-of-type{ color: greenyellow; } ul li:nth-of-type(6){ background-color: greenyellow; } /*演示如下*/ /*:nth-of-type() 关注点在子元素的类型*/ /*:nth-child() 关注点在子元素的位置 前面必须加空格才有效果*/ div :nth-child(2){ /*background-color: red;*/ } /*选择第一个div 下的第三个子元素*/ /*first-of-type后面跟上:nth-child得加空格*/ div:first-of-type :nth-child(3){ background-color: greenyellow; } div p:nth-of-type(3){ background-color: green; } form :enabled{ background-color: wheat; } /*下面用*代替label也可以因为相邻元素只有一个*/ form :checked +label{ color: red; } /*当输入无效非法的数据格式会被激活*/ form :invalid{ color: red; } /*获取焦点;当鼠标点击输入框时会变成你想设置的颜色*/ form :focus{ background-color: greenyellow; } button:hover{ width: 80px; height: 40px; background-color: black; color: red; border: none; } </style> </head> <body> <ul> <li>首页</li> <li id="bg-blue">导航</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <hr> <div> <p>html超文本标记语言</p> <li>css层叠样式表</li> <p>php中文网</p> <p>php中文网</p> <p>php中文网</p> </div> <hr> <div> <p>JavaScript一种直译式脚本语言</p> <li>php服务器开源脚本语言</li> <p>php中文网</p> <p>php中文网</p> </div> <hr> <div> <form action=""> <p> <label for="email">邮箱:</label> <input type="email" name="" id="email" > <!--<input type="email" name="" id="email" disabled>--> <!--disabled禁用输入框--> </p> <p> <label for="password">密码:</label> <input type="password" name="" id="password"> </p> <p></p> <p> <input type="radio" id="week" name="save"value="7" checked > <label for="week">保存一周</label> <input type="radio" id="month" name="save"value="30" > <label for="month">保存一月</label> </p> <p> <button>登录</button> </p> </form> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例