前端開發基礎2(css 選擇器)

2022-05-22 22:57:18 字數 2594 閱讀 2280

css(cascadingstylesheet,層疊樣式表)定義如何顯示html元素。

當瀏覽器讀到乙個樣式表,它就會按照這個樣式表來對文件進行格式化(渲染)。

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

/*這是注釋*/
行內式是在標記的style屬性中設定css樣式。不推薦大規模使用。

hello world.

嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下:

外部樣式就是將css寫在乙個單獨的檔案中,然後在頁面進行引入即可。推薦使用此方式。

元素選擇器

p
id選擇器

#i1
類選擇器

.c1 p.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
上面的**為div標籤和p標籤統一設定字型為紅色。

通常,我們會分兩行來寫,更清晰:

div,

p

巢狀多種選擇器可以混合起來使用,比如:.c1類內部所有p標籤設定字型顏色為紅色。

.c1 p

/*

未訪問的鏈結

*/a:link

/*已訪問的鏈結

*/a:visited

/*滑鼠移動到鏈結上

*/a:hover

/*選定的鏈結

*/a:active

/*input輸入框獲取焦點時樣式

*/input:focus

before

/*

在每個元素之前插入內容

*/p:before

after

/*

在每個元素之後插入內容

*/p:after

before和after多用於清除浮動。

選擇器的優先順序

css繼承

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

body
此時頁面上所有標籤都會繼承body的字型顏色。然而css繼承性的權重是非常低的,是比普通元素的權重還要低的0。

我們只要給對應的標籤設定字型顏色就可覆蓋掉它繼承的樣式。

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

選擇器的優先順序

我們上面學了很多的選擇器,也就是說在乙個html頁面中有很多種方式找到乙個元素並且為其設定樣式,那瀏覽器根據什麼來決定應該應用哪個樣式呢?

其實是按照不同選擇器的權重來決定的,具體的選擇器權重計算方式如下圖:

除此之外還可以通過新增 !import方式來強制讓樣式生效,但並不推薦使用。因為如果過多的使用!import會使樣式檔案混亂不易維護。

萬不得已可以使用!import

CSS學習筆記2 CSS選擇器

一 css選擇器 1.什麼是css選擇器 2.css選擇器的作用 根據指定標籤,在當前頁面中,找到所有符合條件的標籤,設定樣式 3.選擇器需要的注意點 選擇器選中的是所有該型別的標籤,不是一部分,是所有。無論標籤藏得多深,選擇器都可以找到該標籤 二 常見的css選擇器 1.標籤選擇器 作用 在整個頁...

web前端的恐怖之旅(2) CSS選擇器

一,css存放位置 行內標籤 不利於維護,耦合度高,讓 變的非常臃腫 我是乙個p標籤 內部style標籤 寫在head標籤內的style標籤內,通過選擇器控制,也有一定耦合度 我是乙個段落標籤 樣式 選擇器 宣告 寫在標籤內部的屬性 是html屬性 寫在style標籤內的的 是css屬性 外部樣式 ...

前端基礎 2 CSS

選擇器 注釋用 這裡是注釋 在html標籤中用style屬性值設定 key value1,value2.key value1,value2.我是內容 在html 的head標籤中用style標籤來定義css樣式 要用到選擇器,這裡先用標籤選擇器 把css樣式寫成單獨的css檔案 要用到選擇器 再在h...