web前端基礎 CSS css選擇器

2021-10-24 21:09:22 字數 3183 閱讀 8468

選擇器就是根據不同需求把不同的標籤選出來這就是選擇器的作用。 簡單來說,就是選擇標籤用的。

標籤選擇器是指用 html 標籤名 稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的 css 樣式

"td_02"

>

>

>

你好li

>

>

北京li

>

>

好好學習,天天向上li

>

ul>

div>

/* css部分 */

/* 1:標籤選擇器 */

ul

【嘰嘰歪歪】標籤選擇器可以快速為頁面中的某一類標籤,設定樣式,,,但缺點是,對於同一類標籤設計樣式時,不能有差異性,不好。

如果想要差異化選擇不同的標籤,單獨選乙個或者某幾個標籤,可以使用類選擇器。

class

="td_01 width"

>

>

>

床前明月光li

>

>

疑是地上霜li

>

>

舉頭望明月li

>

ol>

div>

/* css部分** */

/* 2:類選擇器,.class */

.td_01

.width

注:

① 類選擇器使用「.」(英文點號)進行標識,後面緊跟類名(自定義,我們自己命名的)。

② 可以理解為給這個標籤起了乙個名字,來表示。

③ 長名稱或片語可以使用中橫線來為選擇器命名。

④ 不要使用純數字、中文等命名,盡量使用英文本母來表示。

⑤ 命名要有意義,盡量使別人一眼就知道這個類名的目的。

【嘰嘰歪歪】多類名的具體使用見上面**的注釋,後面的學習中應該還用的挺多的

id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。

html 元素以 id 屬性來設定 id 選擇器,css 中 id 選擇器以「#" 來定義

"td_01"

>

>

>

>

>

>

>

>

>

>

dl>

div>

/* css部分** */

#td_01

【嘰嘰歪歪】勘誤筆記內容

1:id和class的區別,以及各自的應用。

id=身份證號碼(每個人都可以有,但每個人的不一樣)只能呼叫一次,別人不可以用,通常和js一起使用

class=名字(可以重名)乙個或者多個,開發中最常使用

在 css 中,萬用字元選擇器使用「*」定義,它表示選取頁面中所有元素(標籤)

*

【嘰嘰歪歪】後續的學習中,float啥的,我們會用這個來清除內外邊距,然後再進行我們其他樣式。基礎選擇器用的最多的,是類選擇器。

1:復合選擇器可以更準確、更高效的選擇目標元素(標籤)

2:復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的

3:常用的復合選擇器包括:後代選擇器、子選擇器、並集選擇器、偽類選擇器等等

後代選擇器又稱為包含選擇器,可以選擇父元素裡面子元素。(兒子,孫子…)

直接**舉例吧

>

>

>

我li>

class

="co_1"

>

是li>

ul>

>

>

好li>

>

人li>

ul>

div>

注:在從大的慢慢定位到目標標籤是,乙個標籤與乙個標籤之間用 空格 隔開

子元素選擇器(子選擇器)只能選擇作為某元素的最近一級子元素。簡單理解就是選親兒子元素.

舉例:

>

href

="#"

>

好好學習a

>

>

href

="#"

>

天天向上a

>

p>

div>

注:兩個標籤之間用 >

【嘰嘰歪歪】這個舉例為啥不用後代選擇器,,,因為 div a ,它會將div底下所有的a鏈結都修改了樣式,而子元素選擇器只定位到div親兒子的那個a,p標籤中的a的樣式不會被改變。

並集選擇器可以選擇多組標籤, 同時為他們定義相同的樣式。通常用於集體宣告。

>

href

="#"

>

好好學習a

>

>

>

天天向上li

>

ul>

div>

注:兩個標籤之間用 , 隔開,英文狀態下的

【嘰嘰歪歪】選擇器1選擇器2 認識就行

2.5.1 第一種 :鏈結偽類

偽類選擇器用於向某些選擇器新增特殊的效果,比如給鏈結新增特殊效果,或選擇第1個,第n個元素。

2.5.2 focus偽類選擇器
input:focus

類似…

【嘰嘰歪歪】以後學的有用的,需要加的,再來補充…

10網頁前端CSS CSS選擇器

1 優先順序 內聯式 嵌入式 外聯式 當樣式衝突時,就是採用就近原則。沒有樣式衝突時則採用疊加效果。一 css基礎語法 1 格式 選擇器其中選擇器也叫 選擇符。2 這裡的宣告是以 屬性 值 的形式,而且多個宣告之間用分號進行分割 3 h1 4 這裡的h1就是選擇器,當然這裡直接用標籤當做選擇器了,後...

web前端 選擇組合器

1.a b descendant combinator a元素內所有的b元素,不管是不是直接的父子關係 2.a b child combinator 所有b元素都是a元素的直接子元素 3.a b general siblings combinator a之後所有與a同父元素的所有b元素 4.a b ...

CSS CSS 凡境 前期 基礎選擇器

點進這篇部落格學習前端的人,肯定都不是十三十四的小孩子了吧.那麼肯定都已經看過 鬥破蒼穹 這篇 吧.css這個階段我打算大體上分三章講完,然後每章的標題我都會以靈魂境界來進行劃分學習的難易程度,希望大家認真學習 相信學過html的都知道,用html做出來的網頁用乙個共性就是 醜 看上去總覺得不像那麼...