CSS 學習筆記（一）選擇器

​ 滿足多個條件的選擇器。

​ 語法：選擇器1選擇器2選擇器3{}

​ (中間沒有空格)

​ 對擁有class為p3的span元素進行設計：

span.p3

祖先元素：直接或間接包含，所以父元素也是祖先元素

後代元素。

兄弟元素：擁有相同父元素的元素。

​ 作用：選中指定元素的指定後代元素

​ 語法：祖先元素 後代元素{}

父元素》子元素{}

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

比如訪問過的超連結，獲取焦點的文字框

a:link 沒訪問過的鏈結

a:visited 訪問過的鏈結

瀏覽器是通過歷史記錄判定的乙個鏈結是否被訪問過。

因此，有的瀏覽器為了保護隱私，所以使用visited偽類只能設定字型顏色。

a:hover滑鼠移入

a:active 鏈結被點選的狀態

p標籤也可以使用hover等。

focus 獲取焦點。

input獲取焦點後，背景顏色變成黃色。

input:focus

p標籤中選中的內容使用樣式

可以使用：：selection

使用偽元素來表示元素中的一些特殊位置。

為p中第乙個字元來設定乙個特殊樣式。

p:first-letter

p:first-line

表示元素最前面的部分。

一般before都需要結合content這個樣式一起使用，

通過content可以向before或after的位置新增一些內容。這個內容是選不中的。

p:before為所有具有title屬性=hello的p元素，設定乙個背景顏色為黃色

p[title="hello"]

p[title^="ab"]

p[title$="c"]

p[title*="c"]

要求p是父元素的第乙個子元素,不是父元素的第乙個p元素。

p:first-child

body>p:first-child

p:last-child

p:nth-child(5)

p:nth-child(even)

p:first-of-type

p:last-of-type
p:nth-of-type()

span + p

span ~ p

為所有p元素設定乙個背景顏色為黃色，除了class的值為hello的。

作用：可以從已選出的元素中剔除出某些元素。

：not(選擇器)

p:not(.hello)

CSS學習筆記 選擇器

用過css的同志們都知道，選擇器是非常重要的，如果選擇器使用不當，即使你的css寫的再好，但是不知道要用在哪個元素上，這不是英雄無用武之地嗎？css，用過的都說好！最基本的選擇器，id選擇器，類選擇器這些大家早已心知肚明的就不在這裡贅述了，有那功夫趕緊研究一下把妹攻略 link，visited被稱為...

css選擇器學習筆記

概念 層疊樣式表 同乙個樣式都作用於同乙個元素 設定網頁外觀 注意 如果同乙個樣式同時作用於同乙個元素，最終樣式決定於樣式的優先順序 css選擇器 可以使css樣式與元素進行分離 作用 減少 冗餘 方便後期維護 語法 選擇器 注意 符號都是英文的，符號必須寫 行間樣式 語法 標籤名 style 樣式...

學習筆記 CSS選擇器

1 元素選擇器 1.id選擇器，2.類選擇器，3.標籤選擇器，4.萬用字元選擇器 2 關係選擇器 1.包含關係 e f e的所有f後代 2.子代選擇 e！important 內聯樣式 id 屬性 類 偽類 元素 偽元素 關係 萬用字元 繼承 瀏覽器預設屬性 內聯樣式 特殊性 1000 id 特殊性 ...