• 图解CSS3----4-结构伪类选择器


    效果:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    	<title>结构伪类选择器</title>
    	<style type="text/css">
    	  .type1{
    	  	margin: 100px;
    	  }
    	   p:last-child{/*最后一个父亲的儿子*/
                 color: red;
    		}
    		p:first-child{/*第一个父亲的儿子*/
                 color: orange;
    		}
    		p:nth-child(2){/*第二个父亲的儿子*/
    			color: blue;
    		}
    		p:nth-last-child(2){ /*倒数第二个父亲的儿子*/
    			color: green;  
    		}
    
    		dt:nth-of-type(1){/*父亲包含有的dt类型元素的第几个元素*/
    			text-decoration: underline;
    		}
    		dt:nth-last-of-type(1){/*父亲包含有的dt类型元素的倒数第几个元素*/
    			text-decoration: line-through;
    		}
    
    		li:only-child{/*父亲包含的只有一个元素的类型元素*/
    			font-weight: bold;
    		}
            .type1 div:only-of-type{/*父亲只包含一个同类元素的元素*/
                font-size: 20px;
            }
            table tr{
            	height: 30px;
            }
            table tr td:empty{/*父亲包含为空的子元素*/
            	background-color: red;
            }
     
    	</style>
    </head>
    <body>
         <div class="type1">
         	<p>Sunlike阿理旺旺(p标签)</p>
         	<p>Sunlike阿理旺旺(p标签)</p>
         	<p>Sunlike阿理旺旺(p标签)</p>
         	<p>Sunlike阿理旺旺(p标签)</p>
         	<p>Sunlike阿理旺旺(p标签)</p>
    
         	<dt>Sunlike阿理旺旺(dt标签)</dt>
            <dt>Sunlike阿理旺旺(dt标签)</dt>
            <dt>Sunlike阿理旺旺(dt标签)</dt>
    
    
            <ul>
            	<li>Sunlike阿理旺旺(li标签)</li>
            </ul>
             <ul>
            	<li>Sunlike阿理旺旺(li标签)</li>
            	<li>Sunlike阿理旺旺(li标签)</li>
            </ul>
             <ul>
            	<li>Sunlike阿理旺旺(li标签)</li>
            	<li>Sunlike阿理旺旺(li标签)</li>
            	<li>Sunlike阿理旺旺(li标签)</li>
            </ul>
            <div>Sunlike阿理旺旺(div标签)</div>
            <table>
            	<tr><td>Sunlike阿理旺旺(tr标签)</td></tr>
            	<tr><td></td></tr>
            </table>
    
    
         </div>
    </body>
    </html>
    

    总结:

    p:last-child{/*最后一个父亲的儿子*/
    color: red;
    }
    p:first-child{/*第一个父亲的儿子*/
    color: orange;
    }
    p:nth-child(2){/*第二个父亲的儿子*/
    color: blue;
    }
    p:nth-last-child(2){ /*倒数第二个父亲的儿子*/
    color: green;
    }

    dt:nth-of-type(1){/*父亲包含有的dt类型元素的第几个元素*/
    text-decoration: underline;
    }
    dt:nth-last-of-type(1){/*父亲包含有的dt类型元素的倒数第几个元素*/
    text-decoration: line-through;
    }

    li:only-child{/*父亲包含的只有一个元素的类型元素*/
    font-weight: bold;
    }
    .type1 div:only-of-type{/*父亲只包含一个同类元素的元素*/
    font-size: 20px;
    }
    table tr{
    height: 30px;
    }
    table tr td:empty{/*父亲包含为空的子元素*/
    background-color: red;
    }

  • 相关阅读:
    开发中常用的JS知识点集锦
    浏览器音频兼容和ffmpeg的音频转码使用
    web页面和小程序页面实现瀑布流效果
    微信小程序之支付密码输入demo
    Mac安装nginx配置过程
    前端工具mock的使用
    汇编语言学习
    Swift学习笔记
    如何快速融入团队并成为团队核心(四)
    如何快速融入团队并成为团队核心(三)
  • 原文地址:https://www.cnblogs.com/SunlikeLWL/p/7226797.html
Copyright © 2020-2023  润新知