前端基礎css之選擇器

css（cascading style sheet，層疊樣式表）定義如何顯示html元素。

當瀏覽器讀到樣式表，它就會按照這個樣式來對文件進行格式化（渲染）。

每個css樣式由兩部分組成：選擇器和宣告。宣告有包括屬性和屬性值。每個宣告之後用分號結束。

1，行內樣式：直接寫在標籤裡面style=『』樣式1；樣式2；『』

"

color: red
">hello world.

"

mystyle.css
" rel="
stylesheet
" type="
text/css
"/>

標籤 {}

例：p

#

id{}
例：#l1

.類{}

例：.c1

標籤中的class屬性如果有多個，要用空格分隔

通用選擇器

*

/*li內部的a標籤設定字型顏色*/li a

/*選擇所有父級是 元素的 元素*/div>p

/*選擇所有緊接著元素之後的元素*/div+p

/*i1後面所有的兄弟p標籤*/

#i1~p 

/*用於選取帶有指定屬性的元素。*/p[title] 

/*用於選取帶有指定屬性和值的元素。*/p[title="
213"
] 

/*找到所有title屬性以hello開頭的元素*/[title^="

hello"] 
/*找到所有title屬性以hello結尾的元素*/[title$="
hello"] 
/*找到所有title屬性中包含（字串包含）hello的元素*/[title*="
hello"] 
/*找到所有title屬性(有多個值或值以空格分割)中有乙個值為hello的元素：*/[title~="
hello"] 
不怎麼常用的屬性選擇器

當多個元素的樣式相同時，可以通過再多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式。

div,

p 

.c1 p

繼承是css的乙個主要特徵，它是依賴祖先-後代的關係。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如乙個body定義了的字型顏色值也會應用到段落的文字中。

css繼承權重非常低，比普通元素權重還要低。

此外，繼承是css重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但css繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

選擇器的優先順序

選擇器的權重計算方式：

除此之外還可以通過新增！important方式來強制讓樣式生效，但不推薦使用。！important會使樣式混亂不易維護。

迫不得已才可以使用！important。

/* 未訪問的鏈結 */a:link 

/* 已訪問的鏈結 */a:visited 
/* 滑鼠移動到鏈結上 */a:hover 
/* 選定的鏈結 */a:active 
/*input輸入框獲取焦點時樣式*/input:focus 

/*在每個元素之前插入內容*/p:before

/*在每個元素之後插入內容*/p:after

:nth-child(an+b) 這個css偽類先找到當前元素的所有兄弟元素，然後按照位置先後順序從1開始排序，選擇的結果為css偽類:nth-child括號表示式(an+b)匹配到的元素集合(n = 0 ,1,2,3...)。a和b都必須為整數，並且第乙個子元素的下標為1。注意 an 必須寫在 b 的前面，反過來不行。

# 選擇第二個及之後的所有元素
p:nth-child(n + 2) 
# 選擇前三個元素
p:nth-child(-n + 3) 
# 選擇所有的偶數元素，2n 可以用關鍵字even代替
p:nth-child(2n) 
#選擇所有的奇數元素，2n+1 可以用關鍵字odd代替
p:nth-child(2n+1)

#

選中第乙個元素
p:first-child 
#選中最後乙個元素
p:last-child 

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說，就是選擇標籤用的。標籤選擇器 又稱元素選擇器，指用html標籤作為選擇器，為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式，只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器，是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤，且標籤的id屬性值不同，然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...

前端學習之 CSS 選擇器

css選擇有三種 html 元素指的是從開始標籤 start tag 到結束標籤 end tag 的所有 元素選擇器通過標籤名選擇元素。p元素 p元素p元素 效果 id選擇器通過id選擇元素，乙個元素的id應該是唯一的。另乙個元素不應該重複使用 p標籤 p1標籤 效果 當需要多個元素，都使用同樣的c...