HTML CSS之選擇器 屬性 五

2021-10-03 14:27:58 字數 1242 閱讀 9229

(一)語法格式

(二)選擇器

(三)屬性

格式:

選擇器

選擇器:篩選具有相似特徵的元素

注意: 每一對屬性需要使用;隔開,最後一對屬性可以不加;

分類:

1. 基礎選擇器

1. id選擇器:選擇具體的id屬性值的元素.建議在乙個html頁面中id值唯一

語法:#id屬性值{}

2. 元素選擇器:選擇具有相同標籤名稱的元素

語法: 標籤名稱{}

注意:id選擇器優先順序高於元素選擇器

3. 類選擇器:選擇具有相同的class屬性值的元素。

語法:.class屬性值{}

注意:類選擇器選擇器優先順序高於元素選擇器

2. 擴充套件選擇器:

1. 選擇所有元素:

語法: *{}

2. 並集選擇器:

選擇器1,選擇器2{}

3. 子選擇器:篩選選擇器1元素下的選擇器2元素

語法: 選擇器1 選擇器2{}

4. 父選擇器:篩選選擇器2的父元素選擇器1

語法: 選擇器1 > 選擇器2{}

5. 屬性選擇器:選擇元素名稱,屬性名=屬性值的元素

語法: 元素名稱[屬性名="屬性值"]{}

6. 偽類選擇器:選擇一些元素具有的狀態

語法: 元素:狀態{}

如: 狀態:

link:初始化的狀態

visited:被訪問過的狀態

active:正在訪問狀態

hover:滑鼠懸浮狀態

1. 字型、文字

font-size:字型大小

color:文字顏色

text-align:對其方式

line-height:行高

2. 背景

background:

3. 邊框

border:設定邊框,符合屬性

4. 尺寸

width:寬度

height:高度

5. 盒子模型:控制布局

margin:外邊距

padding:內邊距

預設情況下內邊距會影響整個盒子的大小

box-sizing: border-box; 設定盒子的屬性,讓width和height就是最終盒子的大小

float:浮動

left

right

html 選擇器之屬性選擇器

屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。使用css3的屬性選擇器,可以指定元素的某個屬性,也可以指定某個屬性和這個屬性所對應的值。css3的屬性選擇器主要包括下面幾種 e attr 只使用屬性名,但沒有確定任何屬性值 e attr value 指定屬性名,並指定了該屬性...

CSS選擇器之屬性選擇器 關係選擇器

e代表標籤名,如p,div等等 att表示該標籤定義了的乙個屬性名,如class id等,value為該屬性的屬性值,該屬性值為包含字首 value的子字串。若去掉e,則表示匹配滿足條件的任意元素 基本原理同上,不過value表示該屬性值應包含以value為字尾的子字串 基本原理同上,但value表...

HTML css樣式選擇器

style簡介 這篇介紹style,style有三種方式 1 在head中加style標籤,在標籤中寫css樣式 2 在body的標籤中新增style屬性,在屬性中增加css樣式 3 在link標籤中引入寫好的css樣式表 一 在head中新增style標籤 1 id選擇器 在乙個html頁面中,不...