css伪类last-,only-,nth-等伪类使用详解

今天补充完这几个CSS内容,突然发现网站好多方面可以重新修改了。

关于使用方法都在源码里面,自己看注释即可。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:first-child
        {
        	/*当前页所有列表中第一个li加样式*/
        	color:red;	
        }
        
        li:last-child
        {
        	/*当前页所有列表中最后一个li加样式*/
        	color:blue;
        }
        
        li:only-child
        {
        	/*当前页中的列表只有一个li的加样式*/
        	color:pink;	
        }
        
        li:nth-child(4)
        {
        	/*当我们有多个li,但又不想每个都进行class定义时,就可以这样来定义样式,括号里数字是几,则代表是第几个Li*/
        	color:#006644;
        }
        
        li:nth-child(2n+1)
        {
        	/*2n+1或odd(两个值都能使用):是一个固定公式,代表为1,3,5,7等奇数设置样式*/
        	/*2n或even(两个值都能使用):如果用这个,则代表偶数*/
        	color:#0000ff;
        }
        
        .nox table
        {
        	width:600px;
        	border:1px solid blue;
        	border-collapse:collapse;	
        }
        .nox td
        {
        	border:1px solid blue;
        	height:27px	
        }
        /*要求单数颜色:#99CCFF,双数颜色:336699*/
        .nox table tr:nth-child(2n+1)
        {
        	background: #99CCFF;	
        }
        .nox table tr:nth-child(2n)
        {
        	background: #336699;	
        }
    </style>
</head>
<body>
<div class="box">
    <ul>        
        <li class="a">html</li>
        <li name="b">css</li>
        <li class="c js">javascript</li>
        <li class="d j pn">php</li>
        <li class="e">bootstrap</li>
        <li class="f js">jquery</li>
        <li class="g js">js</li>
        <li class="h">asp</li>
        <li class="i">jsp</li>
        <li id="j c-n">C++</li>
        <li id="k c-n">C#</li>
    </ul>
</div>
<div class="fox">
	<ul>
		<li>这次我们用伪类设置颜色</li>
		<li>伪类是个什么鬼</li>
		<li>是一种非常好用的东东</li>
	</ul>	
</div>
<div class="pox">
	<ul>
		<li>只有我这一项,所以我变</li>
	</ul>	
</div>
<div class="nox">
	<table>
		<tr>
			<td>编号</td>	
			<td>内容</td>
			<td>状态</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
		<tr>
			<td>XXXX</td>	
			<td>2090年</td>
			<td>机器人的时代到来</td>
		</tr>	
	</table>	
</div>
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND