Skip to content

Latest commit

 

History

History
162 lines (140 loc) · 3.31 KB

選擇器.md

File metadata and controls

162 lines (140 loc) · 3.31 KB
Raw

選擇器

定義

指定 CSS 要作用的標籤，標籤名稱就是選擇器。

選擇器種類

  • html 標籤名選擇器 使用的是 html 的標籤名。
  • class 選擇器: 使用的是標籤中的 class 屬性。
  • id 選擇器 使用的是標籤中的 id 屬性，通常 id 的取值在頁面中是唯一的，因為該屬性除了給 css 使用，還可以被 js 使用。 id 通常都是為了去標示頁面中一些特定區域使用的。
  • 優先級: 標籤選擇器 < 類選擇器 < id 選擇器 < style 屬性
  • 擴展選擇器
  • 關聯選擇器 標籤是可以嵌套的，要讓相同標籤中的不同標籤顯示不同樣式。
  • 組合選擇器 對多個不同選擇器進行相同樣式設置的時候使用。
  • 偽元素選擇器 在 html 中預先定義好一些選擇器，稱為偽元素。 a: link 超鏈接未點擊狀態 a: visited 被訪問後的狀態 a: hover 光標一到超鏈接上的狀態(未點擊) a: active 點擊超鏈接時的狀態 使用順序: L -> V -> H -> A p: first-line 段落的第一行文本 p: first-letter 段落中的第一個字母

Example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<!--link rel="stylesheet" type="text/css" href="CSS/1.css"-->

	<style type="text/css">
		/*@import url(CSS/1.css);*/

		div {
			background-color: #F70707;
			color: #FFFFFF;
		}

		div#vivi {
			background-color: #007CFF;
			color: #FC0303;
		}

		#mike {
			background-color: #2A334C;
			color: #33EB46;
		}

		div.hello {
			background-color: #0AF62B;
			color: #FFFFFF;
		}

		span.jack {
			background-color: #000000;
			color: #FFFFFF;
		}
		
		/*預定樣式，實現動態加載*/
		.haha {
			background-color: #FF5D00;
			color: #FFFFFF;
		}
 		
 		/*關聯選擇器，選擇器中的選擇器*/
		span b {
			background-color:#0EF6C0;
			color:#FFFFFF;
		}

		/*組合選擇器*/
		.haha, div b {
			background-color: #FB5802;
			color: :#00B9FF;
		}

		/*
		偽元素
		超鏈接的狀態
		*/
		/*未訪問*/
		a:link {
			background-color: #420AE1;
			color: #FFFFFF;
			text-decoration: none;
			font-size: 15px;
		}

		/*鼠標懸停*/
		a:hover {
			background-color: #050000;
			color: #FFFFFF;
			text-decoration: underline;
			font-size: 30px;
		} 

		/*點擊效果*/
		a:active {
			background:#000000;
			color:#FF0624;
			text-decoration: overline;
			font-size: 50px;
		}

		/*被訪問後的狀態*/
		a:visited {
			background-color: #050FFD;
			color: #0FF905;
			text-decoration: line-through;
			font-size: 40px;
		}

		p:first-line {
			background-color: #FF0101;
		}

		p:first-letter {
			color: #84F903;
		}

		div:hover {
			background-color: #030000;
			color: #FFFFFF;
		}

		input:active {
			background: #000000;
			color: #FFFFFF;
		}

		input:focus {
			background: #FD0303;
			color: #FFFFFF;
		}
	</style>
</head>
<body>
	<input type="text">
	<hr>
	<a href="https://www.baidu.com" target="_bland">偽元素選擇器</a>
	<hr>
	<div>div 區域3</div>
	<div id="vivi">div 區域1</div>
	<div class="hello">div <b>區域2</b></div>
	<span class="jack">span 區域1</span>
	<span class="haha" id="mike" style="background-color: #FCF900">span <b>區域2</b></span>
	<span id="mike">spna 區域3</span>
	<p id="mike">段落1</p>
	<p class="haha">段落2</p>
</body>
</html>