下文中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...