學習css常用基本層級偽類屬性選擇器

来源:https://www.cnblogs.com/dhnblog/archive/2020/02/21/12340054.html
-Advertisement-
Play Games

常見的css選擇器包含:常用選擇器、基本選擇器、層級選擇器、偽類選擇器、屬性選擇器,其中常用選擇器分為:1.html選擇符*{}//給頁面上所有的標簽設置模式;2.類選擇符.hcls{}//給class是hcls的一類標簽設置模式;3.id選擇符#h3{}//給id是h3的標簽設置樣式;4.關聯選擇... ...


常見的css選擇器包含:常用選擇器、基本選擇器、層級選擇器、偽類選擇器、屬性選擇器,其中常用選擇器分為:1.html選擇符*{}//給頁面上所有的標簽設置模式;2.類選擇符.hcls{}//給class是hcls的一類標簽設置模式;3.id選擇符#h3{}//給id是h3的標簽設置樣式;4.關聯選擇符#div h1、#div h1.ljhcls;5.div,h1,pmspan,button{}基本選擇器分為:first-child第一個、::first-letter第一個字母、::fist-line第一行、:last-child最後一個元素、:nth-child(n)第幾個元素,層級選擇器分為a,b組合、a b後代、a>b子代、a+b a的一個是b,偽類選擇器:hover滑鼠經過、:focus焦點、::selection文字選中背景色,屬性選擇器[屬性]、[屬性=值]、[屬性~=值]//包含任意一個值、[屬性^=值]以什麼開始、[屬性$=值]以什麼結束。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>學習css常用基本層級偽類屬性選擇器</title>
  7     <style type="text/css">
  8     /*常用選擇器*/
  9     /*html選擇符*//* *{}給頁面上所有的標簽設置模式*/
 10     *{  
 11         color: royalblue;
 12     }
 13     /*類選擇符*//*.hcls{}給class是hcls的一類標簽設置模式;*/
 14     .hcls{
 15         font-weight: bold;
 16     }
 17     /*id選擇符*//*#h3{}給id是h3的標簽設置樣式 */
 18     #h3{
 19         font-style: italic;
 20     }
 21     /*關聯選擇符 */
 22     div h1{
 23         font-size: 18px;
 24     }
 25     /*組合選擇符*/
 26     div,button{
 27         background-color: #ccc;
 28         margin: 5px;
 29     }
 30     /*基本選擇器*/
 31     /*::first-letter */
 32     #h3::first-letter{
 33         font-size: 30px;
 34     }
 35      /*::first-line */
 36      .h4::first-line{
 37          color: red;
 38      }
 39      /*:first-child */
 40      .shuiguo li:first-child{
 41         color:#f90;
 42      }
 43      /*:last-child */
 44      .shuiguo li:last-child{
 45         text-decoration: line-through;
 46      }
 47       /*:nth-child(n) */
 48       .shuiguo li:nth-child(2){
 49         text-decoration: overline;
 50         background-color: sienna;
 51      }
 52      /*層級選擇器*/
 53      /*a,b組合 */
 54      #h3,.box{
 55         background-color: #ccc;
 56         margin: 5px;
 57     }
 58     /*a b a後代中的b */
 59     .h4 p{
 60         text-decoration: overline;
 61         font-size: 30px;
 62     }
 63     /*a>b a的子元素b */
 64     div>p{
 65         font-style: italic;
 66     }
 67     /*a+b a後面的第一個元素b */
 68     div+span{
 69         height: 40px;
 70         background-color: teal;
 71         color: #fff;
 72     }
 73     /*偽類選擇器*/
 74     /*:hover*/
 75     input:hover{
 76      border-radius: 5px;
 77     }
 78     /*:focus焦點*/
 79     input:focus{
 80         outline-color: teal;
 81     }
 82     /*::selection文字選中背景色*/
 83     p::selection{
 84         color: #fff;
 85     }
 86     /* 屬性選擇器 */
 87     .shuiguo li[title]{
 88         font-size: 100px;
 89         background-color: aqua;
 90     }
 91     /* 選擇器[屬性=值]  值唯一才可以用,包含多個值的測試不行*/
 92     .shuiguo li[title=pg]{
 93     color: red;
 94     list-style: square;
 95     background-color: #fff;
 96     font-size: 60px!important;
 97     }
 98     /* 選擇器[屬性^=值]以什麼開始 */
 99     .shuiguo li[title^=pg]{
100         font-size: 20px;
101         margin: 20px;
102     }
103     /* 選擇器[屬性$=值]以什麼結束 */
104     .shuiguo li[title$=xj]{
105         background-color: #ccc;
106     }
107     </style>
108 </head>
109 <body>
110     <div class="hcls" id="h3">
111         <h1>html+css+javascript is very much!</h1>
112     </div>
113     <div class="hcls h4"><!--多個class用空格分開,id是唯一的-->
114         <p>If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
115             If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
116             If not for life, I can go to bed early and get up early</p><p>多個class用空格分開,id是唯一的</p>
117             <p>多個class用空格分開,id是唯一的</p>
118     </div>
119     <span>div後面的第一個元素</span>
120     <ul class="shuiguo">
121         <li title="pg">蘋果</li>
122         <li title="xg pg">西瓜</li>
123         <li title="pg xj">香蕉</li>
124     </ul>
125     <button class="box">按鈕</button>
126     <form action="">
127         <p>用戶名</p><input type="text" name="" id="">
128     </form>
129 </body>
130 </html>

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

-Advertisement-
Play Games
更多相關文章
  • 是誰在耳邊對我說!important提升權重優先順序,只為這一句,我用了3600s研究通配符與標簽!important的背景展示,也是讓我懷疑人生了!選擇器權值:標簽選擇器1,類選擇器和偽類選擇器:10,ID選擇器:100,通配符選擇器:0,行內樣式:1000,!important 在一定條件下,優先... ...
  • background如何簡寫?如何在背景圖像不變的情況下,依舊實現頁面文字滾動,為之奈何?別擔心,快用background-attachment: fixed;/*固定定位*/常用的background樣式如下,1.background-color2.background-image3.backgr... ...
  • 通過之前的站點導航案例,分離下拉菜單的共性和特性 dropdown.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" h ...
  • 1.vue框架使用註意事項和經驗 1.1 解決Vue動態路由參數變化,頁面數據不更新 問題描述: 遇到動態路由如:/page/:id 從/page/1 切換到 /page/2 發現頁面組件沒有更新 解決方式1: 給增加一個不同:key值,這樣vue就會識別這是不同的了。 解決方案2: 在組件內使用v ...
  • 常見css樣式:1.字體與顏色2.背景屬性3.文本屬性4.邊框屬性5.滑鼠游標屬性6.列表樣式7.定位屬性8.內外邊距9.浮動和清除浮動10.滾動條11.顯示和隱藏 文本:1.letter-spacing/*字間距*/2.word-spacing/*詞間距*/3.text-decoration/*下... ...
  • 由於jquery2.0及以下不再支持IE6/7/8,因此選擇jquery1.x版本中較新的一個 推薦一個各種插件URL地址的公共庫:https://www.bootcdn.cn/ CDN載入jquery的優點: 1、減輕伺服器壓力 2、速度快 3、可以緩存 缺點: 不穩定(取決於別人的伺服器,因此需 ...
  • 2009年,W3C 提出了一種新的方案 Flex 佈局,可以簡便、完整、響應式地實現各種頁面佈局。目前,它已經得到了所有瀏覽器的支持。 Flex 是 Flexible Box 的縮寫,意為"彈性佈局",用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 佈局。 行內元素也可以使用 F ...
  • <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="img/1.jpeg" id="flower"> <br> <button id="prve" ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...