前端基礎-CSS的各種選擇器的特點以及CSS的三大特性

来源:https://www.cnblogs.com/ManyQian/archive/2018/05/26/9090993.html
-Advertisement-
Play Games

一、 基本選擇器 二、 後代選擇器、子元素選擇器 三、 兄弟選擇器 四、 交集選擇器與並集選擇器 五、 序列選擇器 六、 屬性選擇器 七、 偽類選擇器 八、 偽元素選擇器 九、 CSS三大特性 一、 基本選擇器 1、id選擇器 <!DOCTYPE html> <html> <head> <meta ...


一、 基本選擇器

1、id選擇器

#1、作用：
根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然後設置屬性

#2、格式
id名稱 {
    屬性：值;
}

#3、註意點：
1、在企業開發中如果僅僅只是為了設置樣式，通常不會使用id，在前端開發中id通常是留給js使用的
2、每個標簽都可以設置唯一一個id，id就相當於人/標簽的身份證，因此在同一界面內id絕不能重覆
3、引用id一定要加#
4、id的命名只能由字元、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p id="p1">大多數人的帥，都是浮在錶面的，是外表的帥</p>
<p id="p2">而多多，不僅具備外表帥，內心更是帥了一逼</p>
<p id="p3">多多就是我，我就是多多</p>
</body>

</html>
id選擇器實例

2、類選擇器

#1、作用：根據指定的類名稱，在當前界面中找到對應的標簽，然後設置屬性

#2、格式：
.類名稱 {
    屬性：值;
}

#3、註意點：
1、類名就是專門用來給某個特定的標簽設置樣式的
2、每個標簽都可以設置一個或多個class（空格分隔），class就相當於人/標簽的名稱，
因此同一界面內class可以重覆
3、引用class一定要加點.
4、類名的命名規則與id的命名規則相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>類選擇器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p class="p1">大多數人的帥，都是浮在錶面的，是外表的帥</p>
<p class="p2">而多多，不僅具備外表帥，內心更是帥了一逼</p>
<p class="p3">多多就是我，我就是多多</p>
</body>

</html>
類選擇器實例

3、標簽選擇器

#1、作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然後設置屬性

#2、格式：
標簽名稱 {
    屬性：值;
}

#3、註意點：
1、只要是HTML的標簽都能當做標簽選擇器
2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽
3、標簽選擇器，無論嵌套多少層都能選中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標簽選擇器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>多多美麗的外表下其實隱藏著一顆騷動的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>這顆心叫做七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>
標簽選擇器

4、通配符選擇器

#1、作用：選擇所有標簽

#2、格式：
* {
    屬性：值；
}
#3、註意點：
1、在企業開發中一般不會使用通配符選擇器
    理由是：
    由於通配符選擇器是設置界面上所有的標簽的屬性，
    所以在設置之前會遍歷所有的標簽
    如果當前界面上的標簽比較多，那麼性能就會比較差
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符選擇器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是標題</h1>
    <p >我是段落</p>
    <a href="#">我是超鏈接</a>
</body>
</html>
通配選擇器實例

二、 後代選擇器、子元素選擇器

1、後代選擇器

#1、作用：找到指定標簽的所有後代（兒子，孫子，重孫子、、、）標簽，設置屬性

#2、格式：
    標簽名1 xxx {
        屬性：值;
    }

#3、註意：
1、後代選擇器必須用空格隔開
2、後代不僅僅是兒子，也包括孫子、重孫子
3、後代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
4、後代選擇器可以通過空格一直延續下去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後代選擇器</title>

    <style type="text/css">
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }

        div ul li a {
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那麼多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="#">點我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
後代選擇器實例

2、子元素選擇器

#1、作用：找到制定標簽的所有特定的直接子元素，然後設置屬性

#2、格式：
    標簽名1>標簽名2 {
        屬性：值;
    }

先找到名稱叫做"標簽名稱1"的標簽，然後在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素

#3、註意：
1、子元素選擇器之間需要用>符號鏈接，並且不能有空格
    比如div >p會找div標簽的所有後代標簽，標簽名為">p"
2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符號一直延續下去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後代選擇器</title>

    <style type="text/css">
        body>p {
            color: green;
        }

        div>p {
            color: red;
        }

        .aaa>a {
            font-size: 100px;
        }

        div>ul>li>.ddd {
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那麼多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落2</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="#">點我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
子元素選擇器

三、 兄弟選擇器

1、相鄰兄弟選擇器，CSS2推出

#1、作用：給指定選擇器後面緊跟的那個選擇器選中的標簽設置屬性

#2、格式
選擇器1+選擇器2 {
    屬性：值;
}

#3、註意點：
1、相鄰兄弟選擇器必須通過+號鏈接
2、相鄰兄弟選擇器只能選中你緊跟其後的那個標簽，不能選中被隔開的標簽
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟選擇器</title>

    <style type="text/css">
        h1+p {
            font-size: 50px;
        }   /* 相鄰兄弟解釋器*/  

    </style>
</head>
<body>
    <h1 >我是標題1</h1>
    <!--<a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>-->
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是標題2</h1>
    <p>我是段落</p>

</body>
</html>
相鄰兄弟解釋器演示

2、通用兄弟選擇器，CSS3推出

#1、作用：給指定選擇器後面的所有選擇器中的所有標簽設置屬性

#2、格式：
選擇器1~選擇器2 {
    屬性：值;
}

#3、註意點：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器後面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟選擇器</title>

    <style type="text/css">

        h1~p {
            color: red;
        }    
   /*通用兄弟選擇器*/

    </style>
</head>
<body>
    <h1 >我是標題1</h1>
    <!--<a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>-->
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是標題2</h1>
    <p>我是段落</p>

</body>
</html>
通用兄弟解釋器實例

四、 交集選擇器與並集選擇器

1、交集選擇器

#1、作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性

#2、格式：
    選擇器1選擇器2 {
        屬性：值;
    }

#3、註意：
1、選擇器與選擇器之間沒有任何鏈接符號
2、選擇器可以使用標簽名稱、id、class
3、交集選擇器在企業開發中並不多見，瞭解即可
   因為：p.part1 完全可以用.part1取代
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後代選擇器</title>

    <style type="text/css">
        p.part1 {
            color: red;
        }
        p#p1{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
交集選擇器實例

2、並集選擇器

#1、作用：給所有滿足條件的標簽設置屬性

#2、格式：
    選擇器1,選擇器2 {
        屬性：值;
    }

#3、註意：
1、選擇器與選擇器之間必須用逗號來鏈接
2、選擇器可以使用標簽名稱、id、class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>並集選擇器</title>

    <style type="text/css">
        .part1,h1,a {
            color: red;
        }
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <a href="#">我是我</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
並集選擇器實例

五、 序列選擇器

#1、作用：
css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，
過去的選擇器中要選中某個必須加id或class，學習了這9個後，不用加id或class，
想選中同級別的第幾個就選第幾個

#2、格式
#2.1 同級別
:first-child    p:first-child    同級別的第一個
:last-child    p:last-child    同級別的最後一個
:nth-child(n)                    同級別的第n個
:nth-last-child(n)            同級別的倒數第n個

#2.2 同級別同類型
:first-of-type                    同級別同類型的第一個
:last-of-type                    同級別同類型的最後一個
:nth-of-type(n)                    同級別同類型的第n個
:nth-last-of-type(n)            同級別同類型的倒數第n個

#2.3 其他
:only-of-type                    同類型的唯一一個
:only-child                         同級別的唯一一個
#1、同級別的第一個
#1.1 示範一
p:first-child { 
    color: red;
}
代表：同級別的第一個，並且第一個要求是一個p標簽

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

這樣的話第一個p和div中的第一個p都變成紅色，

#1.2 示範二
p:first-child {
    color: red;
}
代表：同級別的第一個，並且第一個要求是一個p標簽

<h1>w我是標題</h1>
<p>我是段落1</p>
<p>我是段落2
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javascript && php &&java 轟炸！！！
    java && javascript && php 轟炸！！！恢復 1.javascript簡介 *是基於對象和時間的驅動語言，應用於客戶端。 基於對象： **提供好了很多對象，可以直接拿過來使用。 事件驅動： **基於事件本來要求做出動態效果。 客戶端： **專門指運行於客戶端。 2.javasc ...
  • javascript && php &&java
    java && javascript && php 轟炸！！！恢復 1.javascript簡介 *是基於對象和時間的驅動語言，應用於客戶端。 基於對象： **提供好了很多對象，可以直接拿過來使用。 事件驅動： **基於事件本來要求做出動態效果。 客戶端： **專門指運行於客戶端。 2.javasc ...
  • JS-2
    變數1 "未知數",本質上相當於一個容器,可以存放任何的數據 2 語法 // 變數定義 var a; // 給變數賦值 a = 456; var 變數名; * 變數名 組成部分: _ $ 字母 數字 第一個字元不能為數字 區分大小寫 比如 a 和 A 是不同的變數名 不能是js的關鍵字和保留字 va ...
  • web安全
    針對web應用的攻擊模式 主動攻擊，攻擊者通過直接訪問web資源把攻擊代碼傳入的攻擊模式，需要攻擊者能夠訪問伺服器上的資源，常見有SQL註入攻擊和OS命令註入攻擊； 被動攻擊，利用圈套策略執行攻擊代碼的模式，攻擊者不直接攻擊web應用，常見有XSS和CSRF； SQL註入 把SQL命令插入到表單提交 ...
  • 類似QQ的聊天工程
    個人學習Java的第一個完成的項目，分享給大家。有不好的地方，請多指教。 ...
  • web版仿微信聊天界面|h5仿微信電腦端案例開發
    前幾天開發了一款手機端h5仿微信聊天，人唯有不停學習才能進步，這段時間倒騰著整理了下之前項目，又重新在原先的那版基礎上開發了一款仿微信聊天電腦端web版本，聊天頁面又重新優化了多圖預覽、視頻播放，右鍵菜單menu，聊天底部編輯器模塊重新優化源碼，彈窗則是繼續使用之前自己開發的wcPop.js，具體看 ...
  • position和BFC
    一、關於position流定位：不能通過left/top屬性來進行定位（那用什麼定位），上下排列的元素縱向邊距會被合併，左右元素橫向邊距不會合併。浮動定位：脫離文本流，就好像不在父元素中，像是浮在父元素的上方。相對定位：相對自身位置定位，不會脫離文本流，相當於是個參照物，給子代元素作為參照。絕對定位 ...
  • 用javascript編寫簡單銀行取錢存錢流程（函數）
    1 const readline = require('readline-sync')//引用readline-sync 2 let arr = [['zhang', '123', 2000], ['yang', '123456', 3000]]; 3 //登陸 4 let add = functi... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類