博客

复合器选择器

  • Post author:
  • Post category:其他



后代选择器
 

		<style type="text/css">
			.nav a {
				color:red;
			}
		</style>
</head>
<body>
	<div class="nav">
		<a href="#">我是链接</a>
		<a href="#">我是链接</a>
		<a href="#">我是链接</a>
	</div>
	</body>


子代选择器
 

		<style type="text/css">
		/* 选择儿子*/
			div>strong {
				color:red;
			}
		</style>
</head>
<body>
	<div>
		<strong>儿子</strong>
	</div>
	<div>
		<p><strong>孙子</strong></p>
	</div>


交集选择器
 

	<style type="text/css">
			/* 交集 既是 又是 */
			p.red {
				color:red;
			}
		</style>
</head>
<body>
	<p class="red"></p>
	<p class="red"></p>
	<p class="red"></p>
	<div class="red"></div>


并集选择器
 

	<style type="text/css">
			/* p 和 span 都是红色 */
			p,span {
				color:red;
			}
		</style>
</head>
<body>
	<p>我和你</p>
	<span>我和你</span>
	<div>我和你</div>
	<a href="http://WW


链接伪类选择器
 

	<style type="text/css">
		/* 未访问过的连接 */		
		a:link {
			color: #333;
			/* 取消 下划线*/
			text-decoration: none;
		}
		/* 访问过的连接 */
		a:visited {
			color: orange
		}
		/* 鼠标经过的连接时候的状态 */
		a:hover {
			color: red;
		}
		/* 选定的连接状态 当我们点击连接到时候（按下鼠标不松开的时候） */
		a:active {
			color: green;
		}
		</style>
</head>
<body>
	<a href="http://WWW.xiaomi.com">小米手机</a>
</body>


五种选择器总结

选择器 作用 特征 使用情况 隔开符及用法
后代选择器 用来选择元素后代的 选择的是所有元素的后代 较多 符号是空格 .nav a
子代选择器 选择最近一级的元素 只选亲儿子 较少 符号是>.nav p
交集选择器 选择两个标签交集的部分 既是 又是 较多少 没有符号 p.noe
并集选择器 选择某些样式相同的选择器 可以用于集体声明 较多 符号是逗号 .nav，.header
连接伪类选择器选择器 给链接更改状态 较多


版权声明：本文为Valentine_T原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。