如何使用屬性選擇器

来源:https://www.cnblogs.com/lq0001/archive/2019/11/26/11939317.html
-Advertisement-
Play Games

屬性選擇器介紹 屬性選擇器可以根據元素的屬性及屬性值來選擇元素。 屬性選擇器有什麼好處呢,如:可以通過標簽的屬性名和屬性值來匹配對應的元素。 是英文單詞 的簡寫,中文意思就是 或`屬性名`。 是英文單詞 的簡寫,中文意思就是 或`屬性值`。 屬性選擇器必須使用 中括弧。 屬性選擇器說明表 屬性名 | ...


屬性選擇器介紹

  • 屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
  • 屬性選擇器有什麼好處呢,如:可以通過標簽的屬性名和屬性值來匹配對應的元素。
  • attr是英文單詞attribute的簡寫,中文意思就是屬性屬性名
  • val是英文單詞value的簡寫,中文意思就是屬性值
  • 屬性選擇器必須使用[]中括弧。

屬性選擇器說明表

屬性名 描述 舉例
[attr] 匹配指定的屬性名的所有元素。 [align]{color: red;}
[attr=val] 匹配屬性等於指定的值所有元素。 [align=center]{color: red;}
[attr^=val] 匹配屬性以指定的屬性值開頭的所有元素 [color^="#f"]{color :mediumblue;}
[attr$ =val] 匹配屬性以指定的屬性值結尾的所有元素 [color$="aa"]{color :mediumblue;}
[attr*=val] 匹配屬性中包含指定的屬性值所有元素 [color*="aa"]{color :mediumblue; }

屬性名為[attr]使用方式

  • 讓我們進入屬性名為[attr]實踐,實踐內容如:將HTML頁面中的屬性名為align元素文本顏色設置為紅色。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>屬性選擇器</title>
    <style>
       [align]{
            color: red;
       }
    </style>
</head>
  
<body>
    <h2 align="" >微笑是最初的信仰</h2>
    <h3 align="">微笑是最初的信仰</h3>
    <h4 align="">微笑是最初的信仰</h4>
    <h2>微笑是最初的信仰</h2>
</body>
</html>
  • 結果圖

  • 註意:屬性名為[align]實踐,想必大家明白了最後一個h2標簽文本顏色沒有被渲染了,是根據屬性名進行樣式添加,所以最後h2標簽文本顏色沒有被渲染。


屬性名為[attr=val] 使用方式

  • 讓我們進入屬性名為[attr=val]實踐,實踐內容如:將HTML頁面中的屬性名為align並且屬性值為center元素文本顏色設置為紅色。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>屬性選擇器</title>
    <style>
       [align=center]{
            color: red;
       }
    </style>
</head>
  
<body>
    <h2 align="center">微笑是最初的信仰</h2>
    <h2 align="center">微笑是最初的信仰</h2>
    <h2 align="">微笑是最初的信仰</h2>
  
   
</body>
</html>
  • 結果圖

  • 註意:屬性名為[attr=val]實踐,是根據屬性名指定的屬性值去匹配所有元素,所以最後的h2標簽文本顏色沒有被渲染。


屬性名為[attr^=val] 使用方式

  • 讓我們進入屬性名為[attr^=val]實踐,實踐內容如:將HTML頁面中的屬性名為color並且屬性值以#f開頭的所有元素文本顏色設置為藍色。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>屬性選擇器</title>
    <style>
       [color^="#f"]{
            color :mediumblue;
       }
    </style>
</head>
  
<body>
    <font color="#ff0000" >微笑是最初的信仰</font>
    <br/>
    <font color="#ff0000">微笑是最初的信仰</font>
     <br />
    <font color="#ff0000">微笑是最初的信仰</font>
     <br />
    <font color="#aa0000">微笑是最初的信仰</font>
</body>
</html>
  • 結果圖

  • 註意:屬性名為[attr^=val]實踐,是根據屬性名為color並且屬性值以#f開頭的所有元素進行文本顏色設置。


屬性名為[attr$=val] 使用方式

  • 讓我們進入屬性名為[attr$=val]實踐,實踐內容如:將HTML頁面中的屬性名為color並且屬性值以aa結尾的所有元素文本顏色設置為藍色。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>屬性選擇器</title>
    <style>
       [color$="aa"]{
            color :mediumblue;
       }
    </style>
</head>
  
<body>
    <font color="#ff00aa" >微笑是最初的信仰</font>
    <br/>
    <font color="#ff00aa">微笑是最初的信仰</font>
     <br />
    <font color="#ff00aa">微笑是最初的信仰</font>
     <br />
    <font color="#aa0000">微笑是最初的信仰</font>
</body>
</html>
  • 結果圖

  • 註意:屬性名為[attr^=val]實踐,是根據屬性名為color並且屬性值以aa結尾的所有元素進行文本顏色設置。

屬性名為[attr*=val] 使用方式

  • 讓我們進入屬性名為[attr*=val]實踐,實踐內容如:將HTML頁面中的屬性名為color並且屬性值包含aa的所有元素文本顏色設置為藍色。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>屬性選擇器</title>
    <style>
       [color*="aa"]{
            color :mediumblue;
       }
    </style>
</head>
  
<body>
    <font color="#ff00aa" >微笑是最初的信仰</font>
    <br/>
    <font color="#ff00aa">微笑是最初的信仰</font>
     <br />
    <font color="#ff00aa">微笑是最初的信仰</font>
     <br />
    <font color="#aa0000">微笑是最初的信仰</font>
</body>
</html>
  • 結果圖

  • 註意:屬性名為[attr^=val]實踐,是根據屬性名為color並且屬性值包含aa的所有元素進行文本顏色設置。


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

-Advertisement-
Play Games
更多相關文章
  • Redis基礎類型常用操作命令 概念:Redis是用C語言開發的一個開源的高性能鍵值對資料庫。 特征: 數據間沒有必然的聯繫 內部採用單線程機制進行工作 高性能 多數據類型支持 1. 字元串類型 String 2. 列表類型 List 3. 散列類型 Map 4. 集合類型 Set 5. 有序集合類 ...
  • 記錄下步驟以後用到時翻一翻。 一、下載官方的文件包和編譯 在centos下載依賴庫: yum install gcc tcl 在redis官網的下載頁面,這裡可以選擇離線包或線上下載。 我選擇線上的,在下載頁面往下拉到 Installation 這裡官方已經教你如何線上下載了,我們按步驟來。 在ce ...
  • 海量數據的特征工程中, 如果數據特征維度達到幾千乃至上萬 常規的lasso很容易失效 這裡介紹幾種泛義lasso,是在實際數據處理中常用的 迭代與分塊思路/分組的使用(有興趣的同學可自行實踐一下) 1. 迭代lasso 2. 分組/聚類lasso 3. 分組與降維結合lasso 另外在<<高維數據統 ...
  • 最近整理了一下MySQL 8.0的自動化安裝,其中用到了一個MySQL 5.7版本的自定義配置文件,由於沒有對(MySQL 8.0)做針對性修改,導致安裝過程中出現了一些錯誤其中部分原因就是MySQL 5.7時代的配置在MySQL 8.0不再被支持,同時某些參數不再建議使用,如果繼續保留在配置文件中 ...
  • 漏洞描述 Apache Flink是一個用於分散式流和批處理數據的開放源碼平臺。Flink的核心是一個流數據流引擎,它為數據流上的分散式計算提供數據分發、通信和容錯功能。Flink在流引擎之上構建批處理,覆蓋本地迭代支持、托管記憶體和程式優化。近日有安全研究人員發現apache flink允許上傳任意 ...
  • 1,查看CPU占用量最高的會話及SQL語句 select spid,cmd,cpu,physical_io,memusage, (select top 1 [text] from ::fn_get_sql(sql_handle)) sql_text from master..sysprocesses ...
  • 8. 顯式動畫 顯式動畫 如果想讓事情變得順利,只有靠自己 -- 夏爾·紀堯姆 上一章介紹了隱式動畫的概念。隱式動畫是在iOS平臺創建動態用戶界面的一種直接方式,也是UIKit動畫機制的基礎,不過它並不能涵蓋所有的動畫類型。在這一章中,我們將要研究一下顯式動畫,它能夠對一些屬性做指定的自定義動畫,或 ...
  • 練習1:求2個數中的最大值 function getMax(num1, num2) { return num1 > num2 ? num1 : num2; } console.log(getMax(10, 20)); //console.log(getMax); //函數的代碼 同: functio ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...