CSS結構偽類選擇器

阿新 • • 發佈：2021-02-07

技術標籤：css css

    <style>

        /*ul的第一個子元素*/
        ul li:first-child{
            background-color: yellow;
        }

        /*ul的最後一個子元素*/
        ul li:last-child{
            background-color: red;
        }

        /*選中p1 :按順序選擇
        定位到p的父元素，選擇父元素的第一個子元素，並且這個元素是p標籤，才能生效*/
        p:nth-child(1) 
{
            background-color: blue;
        }

        /*選中p2：按型別選擇
        定位到父元素，選中父元素下的p元素的第二個*/
        p:nth-of-type(2){
            background-color: green;
        }

    </style>

</head>
<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

    < 
ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>

效果圖如下所示：

在這裡插入圖片描述

CSS結構偽類選擇器

技術標籤：csscss <style> /*ul的第一個子元素*/ ul li:first-child{ background-color: yellow;

CSS（3）結構偽類選擇器

結構偽類選擇器 ul的第一個子元素 /*ul的第一個子元素*/ul li:first-child{background: #4a78c2;}

css - 01結構偽類選擇器

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>CssBase</title>

CSS3:CSS3中的結構偽類選擇器

技術標籤：CSS筆記css3 CSS3對於PC端有相容性，但對於移動端更友好些。選擇符用法簡介E:first-child匹配父元素中的第一個子元素EE:last-child匹配父元素中最後一個E元素E:nth-child(n)匹配父元素的第n個子元素E

7.結構偽類選擇器

7.結構偽類選擇器程式碼部分: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

2022.4.6 結構偽類選擇器

結構偽類選擇器偽類：在選擇器後面加上一些條件形式：標籤名: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title&g

結構偽類選擇器

結構偽類選擇器什麼是結構偽類選擇器？什麼是偽類選擇器？ CSS中已經定義好的選擇器,不能隨便取名

CSS中的focus-within偽類選擇器

css中:focus-within是什麼在css中 :focus-within 是一個偽類，現在已經被列入到css選擇器中（cssLevel 4 selector）。css中偽類:focus-within能非常方便處理獲取焦點狀態，當元素本身或其後代獲得焦點時，:focus-w

CSS----偽元素和偽類選擇器----結構性偽類

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>

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中的結構關係查詢元素場景：用於查詢某父級選擇器中的子元素

偽類選擇器

技術標籤：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>

CSS3----偽元素和偽類選擇器----偽元素選擇器

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>

組合選擇器偽類選擇器偽元素選擇器選擇器優先順序 html樣式調節

今日內容概要組合選擇器偽類選擇器偽元素選擇器選擇器優先順序 html樣式調節

WEB前端初學者筆記（8）--偽類選擇器

一、什麼是偽類偽類用於定義元素的特殊狀態。例如，它可以用於：設定滑鼠懸停在元素上時的樣式