簡單理解css之選擇器

2021-10-23 01:38:43 字數 1751 閱讀 1364

下文中attribute代表屬性,value代表值,tag代表標籤

#id

id為"exp"中的p標籤的字型顏色為紅色.

#exp p

.header

類名為"header"的p標籤顏色為紅色

.header p

標籤p並且類名為header的字型顏色為紅色

這種方法同樣適用於id選擇器

p.header

[atrribute]

**中border-collapse屬性為collapse的字型大小為20px

[border-collapse=collapse]

還有其他的使用方法,具體事例就不一一枚舉

選擇器描述

[attribute~=value]

用於選取屬性值中包含"value"字樣的元素

[attribute|=value]

用於選取帶有"value"以開頭的屬性值的元素,該值必須是整個單詞。(連字元連線的前後兩個單詞算作兩個單詞)

[attribute^=value]

匹配屬性值以"value"開頭的每個元素。

[attribute$=value]

匹配屬性值以"value"結尾的每個元素。

[attribute*=value]

匹配屬性值中包含"value"的每個元素。

/* 選擇div元素中所有p元素的顏色 */

div p

/* 類似於後代選擇器,不過這個只會選擇自己的子代元素 */

h1 > strong

/* 選擇緊跟在h1元素後的p元素

h1和p有相同的父元素 */

h1 + p

a:link

/* 未訪問的鏈結 */

a:visited

/* 已訪問的鏈結 */

a:hover

/* 滑鼠移動到鏈結上 */

a:active

/* 選定的鏈結 */

首先p:first-child指的: 選取作為任意元素的第乙個子元素的p元素.切忌當作p元素的第乙個子元素

/*  選取作為p元素的第乙個子元素的i元素 */

p>i : first-child

#### first-child的擴充套件

如果要選取奇數行偶數行的話

```css

table tr:nth-child(2n+1)

這樣就可以實現下圖效果

選取obj的第一行

obj:first-letter

選取obj第乙個字母

obj:before

在obj前新增乙個元素,只體現,不存在

:after

在obj之前新增乙個元素,只體現,不存在

CSS常用選擇器簡單記憶理解

就是直接選擇相同的標籤進行屬性設定 比如body,div,p,ul,li 例 hello world 這個段落採用css樣式化。css 中 id 選擇器以 來定義,html元素以id屬性來設定id選擇器。就是說,css會選擇html中id同名的字進行屬性設定。例 para1 hello world ...

CSS選擇器之基礎選擇器的簡單使用

id 選擇器是用 號加 id 名稱 來表示,用來選擇 html 中 id 的 dom 元素 hello world content這樣 id 為 content 的元素內容會呈現紅色的效果了。tips id 選擇器只能對乙個元素生效,同乙個頁面裡不允許出現兩個 id 相同的元素 類 選擇器是用 號加...

JQuery選擇器之CSS選擇器

語法描述 選擇所有元素 選擇特定型別的元素 選擇具有特定class的元素 選擇具有特定class的某類元素 id 選擇具有特定id屬性值的元素 語法描述 attr 選取定義了attr屬性的元素,即使這個屬性值為空 attr val 選擇attr屬性值等於字串val的元素 attr val 選擇att...