CSS 學習筆記 Day 2 選擇器

2021-10-06 02:21:18 字數 3143 閱讀 4908

語法:元素標籤

例:

"utf-8"

/>

我的第乙個網頁<

/title>

"stylesheet"

type

="text/css" href=

"css.css"

/>

<

/head>

hello world<

/p>

hello world<

/p>

hello world<

/p>

hello world<

/p>

<

/body>

<

/html>

css**

p

執行結果:

這種是元素選擇器。

根據元素可以選擇頁面中所有的標籤。

儘管元素選擇器很強大,但是也是有一定缺陷的,如果我們對其中乙個p標籤設定顏色,則就不能使用了。

這就體現id選擇器的作用。

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

語法:#id值

例:

"utf-8"

/>

我的第乙個網頁<

/title>

"stylesheet"

type

="text/css" href=

"css.css"

/>

<

/head>

hello world<

/p>

="p2"

>hello world<

/p>

hello world<

/p>

hello world<

/p>

<

/body>

<

/html>

css**

p

#p2

執行結果:

對其乙個p標籤做出改變。

雖然id選擇器可以方便我們對其中乙個做出修飾,但是如果我們對其中三個p標籤中的字型變大效果,還用id選擇器的話就會顯得很繁瑣了,這就引入了class選擇器

class 選擇器用於描述一組元素的樣式,class選擇器和id類似,但是class屬性可以重複。

語法:.class屬性值

例:

"utf-8"

/>

我的第乙個網頁<

/title>

"stylesheet"

type

="text/css" href=

"css.css"

/>

<

/head>

hello world<

/p>

="p2"

>hello world<

/p>

="p2"

>hello world<

/p>

="p2"

>hello world<

/p>

<

/body>

<

/html>

css**

p

.p2

執行結果:

通過選擇器分組可以同時選中多個選擇器對應的元素。

語法:選擇器1,選擇器2,選擇器n

例:

"utf-8"

/>

我的第乙個網頁<

/title>

"stylesheet"

type

="text/css" href=

"css.css"

/>

<

/head>

/h1>

hello world<

/p>

="p2"

>hello world<

/p>

="p2"

>hello world<

/p>

="p2"

>hello world<

/p>

<

/body>

<

/html>

css**:

p

#p2,.p2,h1

執行結果:

可以用來選擇頁面中所有的元素

語法:*

例:

"utf-8"

/>

我的第乙個網頁<

/title>

"stylesheet"

type

="text/css" href=

"css.css"

/>

<

/head>

/h1>

hello world<

/p>

="p2"

>hello world<

/p>

="p2"

>hello world<

/p>

="p2"

>hello world<

/p>

<

/body>

<

/html>

css**:

*

執行結果:

CSS學習筆記2 CSS選擇器

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

CSS學習筆記2 高階選擇器

後代選擇器body p body後的p標籤全部選中 子選擇器body p body後一代的p全部選中 弟弟選擇器.id p id為id的標籤的下面首個p標籤被選中 通用選擇器.id p id為id的標籤的下面所有p標籤被選中 選擇存在某屬性的元素a id 選擇某屬性為某值的元素a id id 選擇某...

day2學習筆記

硬體 cpu,主機板,記憶體,電源 主機箱,硬碟,顯示卡,滑鼠 鍵盤 軟體軟體 開發 軟體開發 人機互動 圖形化介面,命令列 科學計算,資料處理,自動控制,計算機輔助設計,人工智慧 tab shift ctrl alt 空格 全選 ctrl a 複製 ctrl c 貼上 ctrl v 撤銷 ctrl...