屬性選擇器
屬性選擇器 [ ]
寫在 開始標簽 里面的東西 都是標簽的屬性
選擇 指定標簽 的 指定屬性
標簽名[屬性名]{}
選擇 指定標簽 的 指定屬性 的 指定值
標簽名[屬性名='屬性值']{}
選擇 所有擁有 指定屬性的標簽
[屬性名]{}
選擇 所有擁有 指定屬性且有指定值的標簽
[屬性名='屬性值']{}
選擇具有href屬性的a標簽
...
a[href]{
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
...
偽類選擇器
:empty
選擇所有的 沒有子元素或內(nèi)容 的標簽
:first-child
選擇所有的 第一個子元素為目標元素 標簽
例:
.box div:first-child{}
選擇.box的第一個子元素且子元素必須是div
:last-child
選擇 最后一個子元素且必須是目標元素
例:
.box div:last-child{}
選擇.box的最后一個子元素 且 子元素必須是div
:first-of-type
選擇子元素中 第一個 目標元素
例:
.box div:first-of-type{}
選擇.box的子元素中 第一個div
這個div可以不是第一個子元素
:last-of-type
選擇子元素中 最后一個 目標元素
例:
.box div:last-of-type{}
:nth-child(n)
選擇第n個子元素 子元素必須是目標元素
例：
.box div:nth-child(2){}
選擇.box第二個子元素 且子元素必須是div
:nth-last-child(n)
選擇 倒數(shù)第n個子元素 子元素必須是目標元素
例：
.box div:nth-last-child(2){}
選擇.box倒數(shù)第二個子元素 且子元素必須是div
:nth-of-type(n)
選擇 第n個目標元素
例：
.box div:nth-of-type(2){}
選擇.box中第二個div
:nth-last-of-type(n)
選擇 倒數(shù)第n個目標元素
例：
.box div:nth-last-of-type(2){}
選擇.box中倒數(shù)第二個div
新增偽元素選擇器
::first-letter
選中 目標元素的第一個字符
...
p::first-letter{
font-size: 30px;
color: red;
}
...
::first-line
選中 目標元素的第一行文本
...
p::first-line{
background-color: yellow;
}
...
::selection
不需要指定元素 作用于整個頁面
修改用戶選中文字后的文字顏色和背景色
...
::selection{
background-color: aqua;
}
...