CSS經常使用選擇器

時間 2019-11-20

標籤 css 經常使用選擇器欄目 CSS 简体版

原文原文鏈接

1.標記選擇器(元素選擇器 /標籤選擇器)css

E{......} //其中E表明有效的HTML元素，以下列代碼中div p兩個標籤html

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			div{
				background-color: red;
			}
			p{
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<div>hello world!</div>
		<p>12121</p>
	</body>
</html>

2.類選擇器學習

[E].classValue{......} //其中E表明有效的HTML元素，以下列代碼中 .demospa

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			.demo {
				background-color: green;
			}
		</style>
	</head>

	<body>
		<div class="demo">456qwqw</div>

	</body>
</html>

3.ID選擇器code

[E]#idValue{......} //其中E表明有效的HTML元素，以下列代碼中 #demohtm

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			#demo {
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div id="demo">456qwqw</div>

	</body>
</html>

4.通配符選擇器utf-8

*{}it

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			*{
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div>hello world!</div>
		<p>12121</p>
	</body>
</html>

5.屬性選擇器class

屬性[=" "]{}test

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			[id]{
				background-color: red;
			}
			[id="ceshi"]{
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<div>hello world!</div>
		<p id="test">12121</p>
		<p id="ceshi">hello world!</p>
	</body>
</html>

6 父子選擇器(以下列代碼中div span)

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			div span {
				background-color: green;
			}
		</style>
	</head>

	<body>
		<!-- 想把div內部span 123更換背景色又不影響外部span 456 -->
		<div>
			<span>123</span>
		</div>
		<span>456</span>

	</body>
</html>

7.直接子元素選擇器(div >em 直接下面一個子元素，不影響深層次的em標籤)

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			div > em{
				background-color: red;
			}
		</style>
		<link rel="stylesheet" href="">
	</head>

	<body>
		<div>
			<em>121212</em>
			<strong>
				<em>jdajskdjkasjd</em>
			</strong>
		</div>

	</body>
</html>

8.並列選擇器

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			/* 其餘選擇器沒法知足 將222222數據顯示背景色
			   並列選擇器 */
			div.demo{
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<div>1212121</div>
		<div class="demo">222222</div>
		<p class="demo">333333</p>

	</body>
</html>

9.分組選擇器

Selector1,Selector2,Selector3{......} //其中Selector1等都是有效選擇器

<html lang="en,zh">
	<head>
		<meta charset="utf-8" />
		<title>HTML學習</title>
		<style type="text/css">
			/* 分組選擇器 
                分組後共用代碼塊*/
			/* em{
				background-color: red;
			}
			strong{
				background-color: red;
			}
			span{
				background-color: red;
			} */
			em,strong,span{
				background-color: red;
			}
		</style>
	</head>

	<body>
		<em>111111</em>
		<strong>22222</strong>
		<span>3333333</span>

	</body>
</html>