CSS常用選擇器

鹿小葵學java發表於2020-12-21
CSS

目錄

CSS常用選擇器

  • HTML:展示網頁
  • CSS:美化網頁
  • JS:動態展示網頁

1.推薦軟體

  • HBuilder

官網下載
使用教程
HBuilder是DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE。

2.CSS

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。

2.1使用CSS

CSS 可以通過以下方式新增到HTML中:

  • 內聯樣式- 在HTML元素中使用"style" 屬性
<p style="color:blue;margin-left:20px;">這是一個段落。</p>
  • 內部樣式表 -在HTML文件頭部 <head> 區域使用<style> 元素 來包含CSS
<head>
	<style type="text/css">
		/* css程式碼 */
	</style>
</head>
  • 外部引用 - 使用外部 CSS 檔案
<head>
	<!-- Link標籤有兩個作用 一是定義文件與外部資源的關係、二是連結樣式表 -->
	<!-- rel 該屬性規定當前文件與被連結文件之間的關係。 -->
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.2常用CSS選擇器

1. 元素選擇器

  • 作用：通過元素選擇器可以選則頁面中的所有指定元素
  • 語法：標籤名 {}
	p{
		color: red;
	}
	
	h1{
		color: red;
	}

2. id選擇器

  • 作用：通過元素的id屬性值選中唯一的一個元素
  • 語法：#id屬性值 {}
#p1{
		font-size: 20px;
	}

3. 類選擇器

  • 作用：通過元素的class屬性值選中一組元素
  • 語法：.class屬性值{}
	.p2{
			color: red;
		}
		
		.hello{
			font-size: 50px;
		}

4. 選擇器分組(並集選擇器)

  • 作用：通過選擇器分組可以同時選中多個選擇器對應的元素
  • 語法：選擇器1,選擇器2,選擇器N{}
#p1 , .p2 , h1{
		background-color: yellow;
		}

5. 通配選擇器

  • 作用：他可以用來選中頁面中的所有的元素
  • 語法：*{}
	*{
		color: red;
	}

6. 複合選擇器（交集選擇器）

  • 作用：可以選中同時滿足多個選擇器的元素
  • 語法：選擇器1選擇器2選擇器N{}
	span.p3{
		background-color: yellow;
	}
	/* 對於id選擇器來說，不建議使用複合選擇器 */
	
	p#p1{
		background-color: red;
	}

7. 後代元素選擇器

  • 作用：選中指定元素的指定後代元素
  • 語法：祖先元素 後代元素{}
  /* 選中id為d1的div中的p元素中的span元素 */
			#d1 span{
				color: greenyellow;
			}

8. 子元素選擇器

  • 作用：選中指定父元素的指定子元素
  • 語法：父元素 > 子元素
	  /* IE6及以下的瀏覽器不支援子元素選擇器 */
	div > span{
		background-color: yellow;
	}

9. 元素之間的關係

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含後代元素的元素，父元素也是祖先元素
後代元素：直接或間接被祖先元素包含的元素，子元素也是後代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素

10.屬性選擇器

  • 作用：可以根據元素中的屬性或屬性值來選取指定元素
  • 語法：
    • [屬性名] 選取含有指定屬性的元素
    • [屬性名=“屬性值”] 選取含有指定屬性值的元素
    • [屬性名^=“屬性值”] 選取屬性值以指定內容開頭的元素
    • [屬性名$=“屬性值”] 選取屬性值以指定內容結尾的元素
    • [屬性名*=“屬性值”] 選取屬性值以包含指定內容的元素
p[title]{
				background-color: yellow;
			}
/* 為title屬性值是hello的元素設定一個背景顏色為黃色 */
p[title="hello"]{
				background-color: yellow;
			}
 /* 為title屬性值以ab開頭的元素設定一個背景顏色為黃色 */
 p[title^="ab"]{
				background-color: yellow;
			}

11.偽類選擇器

偽類專門用來表示元素的一種的特殊的狀態

  • 語法：

    • ：屬性名
/* 為沒訪問過的連結設定一個顏色為綠色 */
			a:link{
				color: yellowgreen;
			}
/* 為訪問過的連結設定一個顏色為紅色 */
			a:visited{
				color: red;
			}
/* :hover偽類表示滑鼠移入的狀態 */
			a:hover{
				color: skyblue;
			}
/* :active表示的是超連結被點選的狀態 */
			a:active{
				color: black;
			}
/* 文字框獲取焦點以後，修改背景顏色為黃色 */
			input:focus{
				background-color: yellow;

12.兄弟元素選擇器

  • 作用：可以選中一個元素後緊挨著的指定的兄弟元素
  • 語法：前一個 + 後一個|前一個 ~ 後邊所有
/* 為span後的一個p元素設定一個背景顏色為黃色 */
			span + p{
				background-color: yellow;
			}
/* 選中後邊的所有兄弟元素 */
			span ~ p{
				background-color: yellow;
			}

13.選擇器的優先順序

  • 優先順序的規則
    * 內聯樣式 ， 優先順序 1000
    * id選擇器，優先順序 100
    * 類和偽類， 優先順序 10
    * 元素選擇器，優先順序 1
    * 通配* ， 優先順序 0
    * 繼承的樣式，沒有優先順序

相關文章