CSS選擇器:基礎選擇器、關係選擇器、屬性選擇器、偽類選擇器、偽類選擇器等;

来源:http://www.cnblogs.com/AinyTong/archive/2016/11/24/6099608.html
-Advertisement-
Play Games

CSS選擇器:基礎、關係、屬性、偽類、偽對象等; 選擇器優先順序的計算:style=1000(內聯樣式表) ID=100 class=10 element=1 1. 基礎選擇器 ID>class>element>* 2. 關係選擇器 1.包含(後代)選擇器 E F E為F的外層元素 2.子選擇器 E> ...


  

 CSS選擇器:基礎、關係、屬性、偽類、偽對象等;   選擇器優先順序的計算:style=1000(內聯樣式表)                                    ID=100                                    class=10                                    element=1   1. 基礎選擇器  ID>class>element>*   2. 關係選擇器         1.包含(後代)選擇器 E F    E為F的外層元素         2.子選擇器 E>F        E為F的父級         3.相鄰選擇器 E+F       選擇與自身相鄰,且緊跟在自身後面的兄弟元素         4.兄弟選擇器 E~F         所有的符合條件的位於自身後面的兄弟元素         5. 並集選擇器 E,F         兩者不需要有什麼關係,只是同用一個樣式         6. 交集選擇器 E.F ,E#F   具有F類名或id名的E元素   3.屬性選擇器     E與[ ]中不要有空格     通過屬性來選擇,定義的時候用[] 來定義:     【註意事項:1.必須是屬性; 2. 屬性選擇器耗費資源比基本選擇器大;】     E[att]  通過屬性名來選擇     E[att="val"]   屬性名和屬性值都符合才會被選中;     E[att~="val"]  其中一個class符合即被選中;     E[att^="val"]  以val開頭的att屬性被選中;     E[att$="val"]  以val結尾的att屬性被選中;     E[att*="val"]  包含了val內容的屬性值的元素會被選中;     E[att|="val"]  以val開頭,並且後面緊跟中劃線的元素被選中;     [class]{ color:red ;  }  ----->所有具有類名的元素都為紅色;   4. 偽類         E與:中不要有空格     通過冒號:定義偽類     :root   選擇匹配文檔的根元素(每個文檔只有一個根元素)     E:link   超鏈接未被點擊時的狀態(顏色、背景)                    E:visited   超鏈接被訪問後的狀態     E:hover  滑鼠懸停時的狀態,不限a標簽,其它元素也可以     E:active  滑鼠按下時的狀態   【測試超鏈接的幾個狀態時,可以用快捷鍵Ctrl+H:清除緩存】      E:not(s)  除去括弧裡面的選擇器的元素,其它的元素會被選中。括弧裡面可以是class選擇器也可以是id選擇器,要通過.或#來選擇,並且        不要加引號     E:first-child E需要具有父級,並且E是父級的第一個元素  E代表了要操作元素本身,並非父元素     E:last-child   同上     E:only-child 具有父元素,並且E是父元素中唯一的     E:empty 匹配完全沒有內容的E元素,空格和換行都算做內容。     E:checked  可以匹配被選中的元素,             如radio 和select 中的option             <input type="radio" name="gender" checked="checked" />             <option value="0" selected="selected" >汽車</option>        -------cheked實例             html結構             <form action="">                     <input type="radio" name="gender" /><span>男</span>                     <input type="radio" name="gender"/><span>女</span>                     <select name="" id="">                             <option value="0">汽車</option>                             <option value="1" selected="selected">火車</option>                             <option value="2">自行車</option>                     </select>             </form>             css樣式                         input:checked + span{color: red;}                         option:checked{ color: aqua;}   5.偽對象選擇器(不存在於HTML中,不會改變文檔的結構)   E與::中不要有空格     用::來定義偽元素(偽對象)     E::before{ content:" "; }     E::after{ content:" "; }           例:1.  16° -----> ::after 結合position:absolute;                 2.   利用偽元素給文檔添加圖片 (display:block;設置大小;)        3.利用偽元素清除浮動:.clearfloat:after {content: ""; display: block; height:0; clear:both; visibility: hidden;}        4.利用偽元素繪製簡單的圖形,例如小三角等;
        偽元素的用處還有很多,不再一一列舉; 【註意事項:     E 只能有一個after和一個before,若有多個按最後一個顯示;   偽元素不存在於文檔流,不能被選中;】     <------學習筆記,如有錯誤,謝謝指正!------->
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 什麼是Hibernate? Hibernate是基於ORM(O:對象,R:關係,M:映射)映射的持久層框架,是一個封裝JDBC的輕量級框架,主要實現了對資料庫的CUPD操作。 註:CRUD是指在做計算處理時的增加(Create)、查詢(Retrieve)(重新得到數據)、更新(Update)和刪除( ...
  • 學習這個東西挺奇怪的,時間一長就容易忘記,或者記不清楚。今天看到一些UML圖的關係,發現有些出入了,索性就寫下來,以後再忘記的時候過來看看。 在UML的類圖中,常見的有以下幾種關係: 繼承(Generalization), 實現(Realization), 關聯(Association), 依賴(D ...
  • 今天講單例設計模式,這種設計模式和工廠模式一樣,用的非常非常多,同時單例模式比較容易的一種設計模式。 一、什麼是單例設計模式 單例模式,也叫單子模式,是一種常用的軟體設計模式。在應用這個模式時,單例對象的類必須保證只有一個實例存在。 二、單例模式的技巧 三、單例模式的應用場景 資料庫設計,我們發送一 ...
  • 設計模式;一個程式員對設計模式的理解:“不懂”為什麼要把很簡單的東西搞得那麼複雜。後來隨著軟體開發經驗的增加才開始明白我所看到的“複雜”恰恰就是設計模式的精髓所在,我所理解的“簡單”就是一把鑰匙開一把鎖的模式,目的僅僅是著眼於解決現在的問題,而設計模式的“複雜”就在於它是要構造一個“萬能鑰匙”,目的 ...
  • 原網站:C# Entity Framework併發處理 在軟體開發過程中,併發控制是確保及時糾正由併發操作導致的錯誤的一種機制。從 ADO.NET 到 LINQ to SQL 再到如今的 ADO.NET Entity Framework,.NET 都為併發控制提供好良好的支持方案。併發處理方式一般分 ...
  • 回到目錄 很久就想寫一套屬於自己的消息隊列組件,前段時候看了湯雪華同學的EQueue,感覺還是不錯的,他也是看了rabbitMQ之後寫的Equeue,在設計上與前者有類似的地方,而大叔這次準備寫一個LindQueue,當前整體架構都差不多,無非是生產者,管道,消費者三個角色,而核心部分就是管道Bro ...
  • 在經典的Java面向對象語言中,可以用關鍵字interface來定義介面,用implement來實現介面,而JavaScript雖然也是面向對象語言,但是它並沒有內置這些,不過由於JavaScript的靈活性,我們可以通過模擬來實現,方法是使用一個輔助類和輔助函數來協助完成這一過程。 ...
  • 原文 原文是自己博客上發佈的 "JS幾種變數交換方式以及性能分析對比" 前言 “兩個變數之間的值得交換”,這是一個經典的話題,現在也有了很多的成熟解決方案,本文主要是列舉幾種常用的方案,進行大量計算並分析對比。 起由 最近做某個項目時,其中有一個需求是交換數組中的兩個元素。當時使用的方法是: arr ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...