CSS選擇器有哪幾種?舉例輕鬆理解CSS選擇器

来源:https://www.cnblogs.com/isremya/archive/2020/02/27/12364741.html
-Advertisement-
Play Games

CSS選擇器彙總(清爽版) 1、元素選擇器 標簽名{ } 2、id選擇器 #id屬性值{ } 3、類選擇器 ·class屬性值{ } 4、選擇器分組(並集選擇器) 作用:通過它可以同時選中多個選擇器對應的元素(通常用於集體聲明) 語法:選擇器1,選擇器2,選擇器n{ } 5、複合選擇器(交集選擇器) ...


CSS選擇器彙總(清爽版)

1、元素選擇器 標簽名{ }

2、id選擇器 #id屬性值{ }

3、類選擇器 ·class屬性值{ }

 

 

4、選擇器分組(並集選擇器)

作用:通過它可以同時選中多個選擇器對應的元素(通常用於集體聲明)

語法:選擇器1,選擇器2,選擇器n{ }

 

5、複合選擇器(交集選擇器)

作用:選擇更準確更精細的目標元素併為其設置屬性

語法:選擇器1選擇器2選擇器n{ }

<!--註意選擇器之間不能有空格,要緊挨在一起-->

 

 

6、通配選擇器

作用:用來選中頁面中所有的元素

語法:*{ }

 

 

7、後代元素選擇器

作用:選中指定元素的指定後代元素

語法:祖先元素 後代元素{ }

 

 

8、子元素選擇器

作用:選中指定父元素的子元素

語法:父元素>子元素

 

 

9、偽類選擇器

偽類表示元素的一種特殊狀態

:hover   移入時元素的狀態

:visited  已被訪問過後的元素的狀態

:active  被點擊時元素的狀態

 

10、 屬性選擇器

作用:根據元素中的屬性或屬性值來選取指定元素

語法:[屬性名]選取含有指定屬性的元素

​ [屬性名=“屬性值”]選取含指定屬性值的元素

​ [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素

​ [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素

​ [屬性名*="屬性值"] 選取屬性值包含指定內容的元素

 

 

11、兄弟元素選擇器

+選擇器

作用:選中一個元素後緊挨著的指定的兄弟元素

語法:前一個+後一個(作用在後一個)

~選擇器

作用:選中後邊所有的制定兄弟元素

語法:前一個~後邊所有


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

-Advertisement-
Play Games
更多相關文章
  • MySQL使用存儲的鍵分佈基數來確定表連接順序在決定對查詢中的特定表使用哪些索引時,也會使用使用鍵分佈基數 ANALYZE TABLE 表名 可以更新表的索引基數,使其更接近非重覆的記錄數,記錄數可以使用show index from 表 來查詢cardinality欄位 mysql> show i ...
  • SELECT * FROM `wit_honor` order by `order` limit 15,-1 原因很簡單這種寫法本身就是錯的,雖然它可以在之前的版本中運行(低優先順序),新版本的mysql對此做出了修複,現在的替代方法是第二個參數用一個較大的正數代替 比如你寫個 SELECT * FR ...
  • ORACLE中如何找出大表分佈在哪些數據文件中? 在ORACLE數據中,我們能否找出一個大表的段對象分佈在哪些數據文件中呢? 答案是可以,我們可以用下麵腳本來找出對應表的區、段分別位於哪些數據文件中 SET PAGESIZE 60;COL SEGMENT_TYPE FOR A12;COL FILE_... ...
  • 概念:觸發器是一種特殊的儲存過程,在滿足定義條件操作時觸發,並且自動執行觸發器中預先設定好的定義的語句集合 觸發器是特殊的儲存過程 觸發器是在對錶操作時,滿足條件就可以自動調用預先編譯的sql語句 安全性 可以基於資料庫的值使用戶具有操作資料庫的某種權利 審計 可以跟蹤用戶對資料庫的操作 實現複雜的 ...
  • 1、創建雲函數 在雲開發中創建雲函數(sum,調用需要兩個參數:a、b): 2、invokeCloudFunction觸發雲函數 const request = require('request'); const APPID = "你的id"; const APPSECRET = "你的秘鑰,獲取A ...
  •  一.為什麼要學習運動框架 ​ 在我們進行web頁面開發的過程中,如何與用戶進行友好、有趣的交互,是我們必須考慮的問題。 比如:導航條中滑動的動畫特效、點擊加入購物車按鈕通過拋物線加入右側購物車的動畫特效,當然還有一些網頁游戲的開發:微信打飛機、打磚塊等。 那麼我們要實現這些好玩又有趣的動畫,就需 ...
  • 一、翻轉菜單練習​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D174_OverturnMenu</title> <style> *{ margin:0; padding:0; } ul{ width: ...
  • 過渡動畫使 UI 更富有表現力並且易於使用。如何使用 React 快速的實現一個 Transition 過渡動畫組件? ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...