css3筆記系列-3.css中的各種選擇器詳解,不看後悔系列

来源:https://www.cnblogs.com/swzx-1213/archive/2020/03/26/12573891.html
-Advertisement-
Play Games

最詳細的css3選擇器解析 選擇器是什麼? 比較官方的解釋:在 CSS 中,選擇器是一種模式,用於選擇需要添加樣式的元素。 最常見的 CSS 選擇器是元素選擇器。換句話說,文檔的元素就是最基本的選擇器。 看代碼,元素選擇器就是這個: h1作為一個元素標簽,是最基本的選擇器,這樣可以對h1標簽設置屬性 ...




 

最詳細的css3選擇器解析

 

選擇器是什麼?

  比較官方的解釋:在 CSS 中,選擇器是一種模式,用於選擇需要添加樣式的元素。

       最常見的 CSS 選擇器是元素選擇器。換句話說,文檔的元素就是最基本的選擇器。

       看代碼,元素選擇器就是這個:

       

      h1作為一個元素標簽,是最基本的選擇器,這樣可以對h1標簽設置屬性。

選擇器有哪些?

  常見的選擇器:元素選擇器,類選擇器,ID選擇器,屬性選擇器,派生選擇器。

  本文的思路就是先講講最常用的選擇器,再講講用得比較少的選擇器。

  如果你覺得能學到不少知識,點個關註哦,精彩美文第一時間為你奉上。

 

選擇器-元素選擇器

  元素選擇器,最常用的選擇器之一,常用於html標簽,p標簽,h1-h6標簽等的樣式設定。具體怎麼用就不詳細介紹了,

上面開頭已經舉例說明瞭。在 W3C 標準中,元素選擇器又稱為類型選擇器(type selector)。“類型選擇器匹配文檔語言

元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。”

選擇器-類選擇器
  類選擇器與元素選擇器看起來很類似,但是還是有一些區別。類選擇器允許以一種獨立於文檔元素的方式來指定樣式

該選擇器可以單獨使用,也可以與其他元素結合使用。
提示:只有適當地標記文檔後才能使用這些選擇器,所以使用這種選擇器通常需要先做一些構想和計劃。要應用樣式而不考

慮具體設計的元素,最常用的方法就是使用類選擇器。類選擇器怎麼用,如下圖:

        

  圖中的body標簽裡面,有一個div,div有一個class屬性,這就是所謂的類,但是這個類不同於java語言的類。然後我們

需要對這個div設置一些樣式,看style裡面,.select這個就是類選擇器了,類選擇器需要配合標簽的class屬性一起使用。
類選擇器可以結合元素選擇器來使用。這種選擇器稱為結合元素選擇器。

  這裡就將與類選擇器相關的選擇器詳細介紹一下。
  例如:

        

  選擇器會匹配class屬性包含select的所有p標簽,所以選擇器p.select解釋為:“其class屬性值為select的所有段落”。
  還有一個多類選擇器。怎麼用呢?看下麵

       

  具體是什麼意思呢?就是說:本來我的一個select的樣式是夠用的,但是突然加了需求,需要再加一個字體的大小,

但是只想P標簽使用,並且select又不是一個標簽在使用,waring也不是只有一個P標簽使用,這時候,多類選擇器就出

現了,其實標簽的style屬性也可以,但是不推薦這麼乾。使用多類選擇器之後,這個標簽就同時結合了這兩個選擇器里

面的樣式屬性。class裡面的類的先後順序沒關係。

選擇器-ID選擇器

  在某些方面,ID選擇器類似於類選擇器,但是也有一些重要的區別。語法:類選擇器是在名稱前面加一個.   ID選擇

器在前面加上一個#
  用法:類選擇器可以多次使用,ID選擇器只能使用在一個元素標簽上面,並且只能使用一次,不能重覆使用(在一個

文檔裡面),原因是在一個文檔裡面,ID是唯一的。

  示例:

       

       

  這樣就為ID為test的標簽h1設置了字體顏色屬性
  註意事項:

  1. ID選擇器在一個文檔中只能使用一次
  2. 不能使用ID詞列表(意思是不能使用類選擇器那樣的結合,因為id屬性不允許有一空格分隔的詞列表)
  3. 一般情況下ID選擇器與類選擇器都是區分大小寫的。

 

選擇器-屬性選擇器

  屬性選擇器相對上面兩種選擇器來說用得比較少,也很簡單,來看看吧。

  屬性選擇器可以根據元素的屬性以及屬性值來選擇元素。

  • 簡單屬性選擇
    如果希望選擇有某個屬性的的元素,而不論屬性值是什麼,可以使用簡單屬性選擇器

    如:

     

  意思就是說將所有帶有href屬性的元素設置字體屬性為“微軟雅黑”

*{ 
     font-size:12px; 
 }

 

  這是通配符選擇器,css系列第一篇有說明!

  示例中,*可以換成標簽名,如

       

  意思是設置所有的name屬性的input標簽的字體大小為20px。

  • 根據具體屬性值選擇

    除了選擇擁有某些屬性的元素外,還可以選擇某些擁有特定屬性值的元素。

    示例

   意思是選擇input標簽中,name屬性為username的input標簽,再為它設置樣式。

  • 屬性與屬性值完全匹配

        屬性與屬性值完全匹配與上面的根據具體值屬性有什麼區別呢?還記得我們之前在類選擇器裡面講解的多類選擇器吧。

當我們要選擇這類標簽的時候,就需要屬性與屬性值完全匹配了,當然這隻是一個示例。
        

  這裡面,如果我們用這個選擇器來代替是否可行?

       

  答案是不行的,這時候我們需要知道屬性與屬性值完全匹配了,看看下麵

      

        這樣就可以精準的找到這個p標簽了,並且可以為他設置一些樣式,其實這樣看,你是不是覺得這個沒有什麼用?

其實這是有實際作用的,比如說在動態改變這個元素的樣式,是很方便的。

屬性選擇器這一塊還有一些需要瞭解的,但是不是很常用,這裡就只解釋一下怎麼個用法就行了。

 

選擇器描述
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定辭彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。


選擇器-後代選擇器

   後代選擇器又稱為包含選擇器,後代選擇器可以選擇作為某元素後代的元素

  • 根據上下文選擇元素

     

 

  以上代碼的意思是選擇test裡面的所有的p標簽,然後將他們的背景顏色改成紅色。是不是很簡單,效率高。

如果你一個一個的設置p標簽也是可以的,但是效率太低了,人工效率哈。

 

選擇器-子元素選擇器

  子元素選擇器與後代選擇器相比,子元素選擇器只能選擇作為元素子元素的元素

       

  這裡的代碼,就只能將class為test裡面的子元素h1的背景變成紅色,class為test2,以及class為test1

裡面的都不是class為test的子元素,這一點要註意。

  • 結合後代選擇器和子選擇器
    後代選擇器還可以與子選擇器共同使用

     

    這樣的效果是在h1下麵的a標簽的下劃線會被取消掉

選擇器-相鄰兄弟選擇器

  如果需要選擇緊接在另一個元素後的元素,而二者有相同的元素,可以使用相鄰兄弟選擇器。
  示例:

       

  這個選擇器讀作“選擇緊接在div1後面的h1標簽,並且是一個”,這個選擇器也一樣,可以和前面的子元素選擇器一起使用。
偽類css偽類是用於向某些選擇器添加特殊的效果。什麼意思呢?看看代碼你就知道了。

       

  這段代碼是說當滑鼠移動到p標簽的時候,給p標簽添加一些樣式。類似的還有很多。

a:link {color: #FF0000}        /* 未訪問的鏈接 */
a:visited {color: #00FF00}    /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 滑鼠移動到鏈接上 */
a:active {color: #0000FF}    /* 選定的鏈接 */

 


        具體的用法視情況而定。

  這期的選擇器筆記就到這裡了,如果你覺得不錯,請關註我哦!

  ●css3系列-2.css中常見的樣式屬性和值

  ●css3系列-1.css基礎知識入門

 

 

  掃描二維碼 獲取更多精彩

 



 

點“在看”你懂得 

 

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用標簽定義 HTML 頁面中的圖像,標簽有兩個必需的屬性:源屬性src和alt,是空標簽,意思是說,它只包含屬性,並且沒有閉合標簽。要在頁面上顯示圖像,你需要使用源屬性(src)。src指 "source",是圖像的 URL 地址 ...
  • CSS(Cascading Style Sheet)可譯為“層疊樣式表”或“級聯樣式表”,它定義如何顯示 HTML 元素,用於控制Web頁面的外觀。通過使用CSS實現頁面的內容與表現形式分離,極大提高了工作效率 。目前的模式是html+css+javascript,如何理解呢,就是html是網頁的結... ...
  • HTML頭部head元素包含關於文檔的概要信息,也被稱為元信息(meta-information),head定義了文檔的信息,title定義了文檔的標題,base定義了頁面鏈接標簽的預設鏈接地址,link定義了一個文檔和外部資源之間的關係,meta定義了HTML文檔中的元數據,script定義了客戶... ...
  • 1、打開setting——plugins 2、下載一個webstorm插件 Sexy Editor 如下圖: 3、下載完成之後重啟 4、重啟之後打開setting 找到 SexyEditor 選項 並點擊右側底部的 Add images 按鈕 5、 選擇自己喜歡的圖片 6、可以調整透明度 尺寸等 7 ...
  • 前端作為互聯網時代直接觸達用戶的視窗,大到我們每天瀏覽到的網站,小到一次點擊按鈕的頁面,前端無處不在。並且在產品的眾多開發環節之中,最能讓用戶直觀感受到的就是前端開發。因而前端行業的廣闊發展前景也吸引了不少人的轉業學習。那麼,零基礎如何學好前端呢?有什麼建議嗎?本文將為初學者詳細解答一下這兩個問題, ...
  • 正常我們寫一個左右兩列,左側一列放置圖片的html,如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ background-col ...
  • 在vue項目中,為了減少首屏載入的時間,通常會開啟路由的懶載入。路由懶載入配合gizp確實能幫助我們大大的加快首屏的載入時間。 然而,路由懶載入會使得我們在第一次打開一個新頁面的時候,會有一個載入時間。如果在這個時候我們沒有一個提示的話,給人的感覺會是好像我點了頁面跳轉但是沒反應。所以,這個時候我們 ...
  • 先上一張咱們的原始圖 rs7.jpg 如下: 一、mask-image屬性 1.基本的png圖遮罩展示 我們使用的遮罩圖片 ad.png,如下: html: <img src="rs7.jpg" alt="" class="mask-img"> css: .mask-img { width: 300 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...