2022.4.6 結構偽類選擇器
結構偽類選擇器
偽類：在選擇器後面加上一些條件 形式： 標籤名:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul li標籤的第一個子元素修改樣式*/
ul li:first-child{
background: green;
}
/*ul li標籤的最後一個子元素修改樣式*/
ul li:last-child{
background: red;
}
/*選中p1 :定位到父元素，選擇當前的第一個元素
nth-child(x):選擇當前p元素的父級元素，選中父級元素的第x個子元素，並且是p標籤才生效!否則不生效*/
p:nth-child(5){
background: yellow;
}
/*nth-of-type(x)：選中父元素下的p元素的第x個*/
p:nth-of-type(2){
background: #5dff4c;
}
/*滑鼠移到上面有背景顏色*/
a:hover{
background: aqua;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<!-- 無序列表 算body的第4個子元素-->
<ul>
<li>例1</li>
<li>例2</li>
<li>例3</li>
</ul>
<!-- 算body的第5個子元素- -->
<p>p4</p>
<a href="">滑鼠移到上面有特效</a>
</body>
</html>
相關推薦
2022.4.6 結構偽類選擇器
結構偽類選擇器 偽類：在選擇器後面加上一些條件 形式： 標籤名: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title&g
CSS3:CSS3中的結構偽類選擇器
技術標籤：CSS筆記css3 CSS3對於PC端有相容性，但對於移動端更友好些。 選擇符用法簡介E:first-child匹配父元素中的第一個子元素EE:last-child匹配父元素中最後一個E元素E:nth-child(n)匹配父元素的第n個子元素E
CSS結構偽類選擇器
技術標籤：csscss <style> /*ul的第一個子元素*/ ul li:first-child{ background-color: yellow;
CSS（3）結構偽類選擇器
結構偽類選擇器 ul的第一個子元素 /*ul的第一個子元素*/ul li:first-child{background: #4a78c2;}
7.結構偽類選擇器
7.結構偽類選擇器 程式碼部分: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">
結構偽類選擇器
結構偽類選擇器 什麼是結構偽類選擇器？ 什麼是偽類選擇器？ CSS中已經定義好的選擇器,不能隨便取名
css - 01結構偽類選擇器
<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>CssBase</title>
CSS中的focus-within偽類選擇器
css中:focus-within是什麼 在css中 :focus-within 是一個偽類，現在已經被列入到css選擇器中（cssLevel 4 selector）。css中偽類:focus-within能非常方便處理獲取焦點狀態， 當元素本身或其後代獲得焦點時，:focus-w
偽類選擇器
技術標籤：css :fist-child 第一個子元素是… :last-child 最後一個子元素是… :nth-child(number|even|odd|倍數) 第幾個子元素是…
after偽類選擇器 寫箭頭
技術標籤：css原生箭頭css content: ""; display: inline-block; width: 0.22rem; height: 0.22rem;
HTML[2種特殊選擇器]_偽類選擇器&屬性選擇器
本文介紹兩種特殊的選擇器 1.偽類選擇器 2.屬性選擇器 1.偽類選擇器 ...: nth-of -type (x)
前端基礎HTML---偽類選擇器
<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>偽類選擇器</title>
CSS----偽元素和偽類選擇器----結構性偽類
<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>
CSS3----偽元素和偽類選擇器----偽元素選擇器
<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>
組合選擇器 偽類選擇器 偽元素選擇器 選擇器優先順序 html樣式調節
今日內容概要 組合選擇器 偽類選擇器 偽元素選擇器 選擇器優先順序 html樣式調節
WEB前端初學者筆記（8）--偽類選擇器
一、什麼是偽類 偽類用於定義元素的特殊狀態。 例如，它可以用於： 設定滑鼠懸停在元素上時的樣式
css中的偽類選擇器
結構化偽類選擇器 1.:root選擇器 root選擇器用於匹配文件根元素 也就是說 用“:root”定義的樣式 對所有頁面元素樣式都生效 可以單獨數值在進行覆蓋
CSS偽類選擇器實現三角形
使用css實現常用的三角效果 專案中三角： .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px;
2、前端--初見前後端互動、CSS簡介、基本選擇器、組合選擇器、屬性選擇器、分組與巢狀、偽類選擇器
今日內容概要 初窺後端框架 css簡介 css選擇器 今日內容詳細 初次體驗前後端互動
css偽類選擇器匹配第N個li元素
1. 結構偽類選擇器 作用：根據元素在html中的結構關係查詢元素 場景：用於查詢某父級選擇器中的子元素