zoukankan      html  css  js  c++  java
  • css除第一个子元素的其他子元素的4种方法,超实用!

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			#od div {
    				float: left;
    				height: 100px;
    				 100px;
    				margin: 0 10px;
    				background: silver;
    			}
    			
    			/*第一种方法:使用not选择器    :not(:first-child)*/
    			#od div:not(:first-child) {
    				background: red;
    			}
    			
    			/*第二种方法:使用nth-child选择器
    			 * nth-child(n)匹配属于其父元素的第 n个子元素,不论元素的类型
    			 * div:nth-child(n+2),匹配到div的父元素的第2个及之后的子元素
    			 */
    			#od div:nth-child(n+2) {
    				background: red;
    			}
    			
    			/*第三种方法:使用nth-of-type选择器
    			 * 用法与nth-child选择器基本一致,唯一的区别是:nth-child选择器不论元素类型,nth-of-type选择器指定元素类型
    			 * div:nth-of-type(n+2) ,匹配到div的父元素的第2个及之后的div子元素
    			 */
    			#od div:nth-of-type(n+2) {
    				background: red;
    			}
    			
    			/*第四种方法:巧妙使用+兄弟选择符(选中的是相邻元素中的第二个)*/
    			#od div+div {
    				background: red;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="ob" id="od">
    			<div class="item">1</div>
    			<div class="item">2</div>
    			<div class="item">3</div>
    		</div>
    	</body>
    </html>
    

      如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!

  • 相关阅读:
    linux系统rewrite重定向及搭建discuz
    nginx客户端请求分类
    linux系统nginx动静分离
    RDB与AOF
    AOF持久化
    redis持久化(RDB)
    redis操作
    redis搭建
    Redis简介
    小技巧从此拒绝$?
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11174450.html
Copyright © 2011-2022 走看看