>
>
charset
="utf-8"
>
>
title
>
>
/* 屬性選擇器
作用：可以根據元素中的屬性值來選取指定元素
語法：[屬性名] 選取含有指定屬性的元素
例：p[title]
語法：[屬性名="屬性值"] 選取含有指定屬性的元素
p[title="hello"]
語法：[屬性名^="屬性值"] 選取以指定內容開頭的元素
p[title^="a"]
語法：[屬性名$="屬性值"] 選取以指定內容結尾的元素
p[title$="a"]
語法：[屬性名*="屬性值"] 選取包含指定內容的元素
p[title*="a"]
*/style
>
head
>
>
title
="hello"
>
我是乙個段落p
>
>
我是乙個段落p
>
>
我是乙個段落p
>
>
我是乙個段落p
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
/* ：first-child 可以選中第乙個子元素
：last-child 表示選中最後乙個子元素
:nth-child 標識可以選中任意位置的子元素
該選擇器後面可以指定乙個引數，指定要選中第幾個子元素
even 表示偶數字置的子元素
odd 表示奇數字置的子元素
*/p:last-child
p:nth-child(3)
style
>
head
>
>
>
我是p標籤p
>
>
我是p標籤p
>
>
我是p標籤p
>
>
我是p標籤p
>
>
我是p標籤p
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
/* 作用：可以選中乙個元素後緊挨著的指定的兄弟元素
語法：前乙個 + 後乙個
*/span + p
/* 選中後面所有的兄弟元素
語法：前乙個~後面所有元素
*/span~p
style
>
head
>
>
>
這是乙個p標籤p
>
>
這是乙個p標籤p
>
>
我是乙個span標籤span
>
>
這是乙個p標籤p
>
>
這是乙個p標籤p
>
>
這是乙個p標籤p
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
/* 為所有的p元素設定乙個背景顏色為黃色，除class值為hello 的
否定偽類：
作用：可以從已選中的元素中剔除某些元素
語法：：not(選擇器)
*/p:not(.hello)
style
>
head
>
>
>
我是乙個p標籤p
>
class
="hello"
>
我是乙個p標籤p
>
>
我是乙個p標籤p
>
body
>
html
>
偽元素選擇器 屬性選擇器 兄弟元素選擇器
一 偽元素 使用偽元素來表示元素中的一些特殊位置 常用 1 first letter 為元素中的第乙個位置設定樣式 2 first line 為元素中的第一行位置設定樣式 3 before 為元素最前邊的部分設定樣式 一般before都需要結合屬性content樣式一起使用 通過content可以向...
屬性選擇器，子元素選擇器，偽元素選擇器筆記
屬性選擇器 屬性名稱 屬性名稱 屬性值 子元素選擇器 第n個子元素 元素 nth child 1 最後乙個子元素 元素 last child 全部子元素 test test2 直接子元素 test test2 選擇後面的乙個元素 test div 選擇後面的多個元素 test div偽元素 通過cs...
屬性選擇器，偽類選擇器，偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...