簡單理解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元素的第乙個子元素的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...