2. 程式人生 > >css屬性選擇器和萬用字元選擇器

css屬性選擇器和萬用字元選擇器

阿新 • • 發佈：2018-12-25

一，屬性選擇器1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-css屬性選擇器上.html</title>
    <!--
        屬性選擇器,根據指定的屬性名稱找到對應的標籤,設定屬性
        1,格式:
        [attribute] 
        作用:根據指定的屬性名稱找到對應的標籤,設定屬性
        [attribute=value] 
        作用:找到指定屬性,並且屬性的取值是value的標籤,設定屬性
        最常見的場景就是,區分input標籤的屬性
        input[type=password]{}
        <input type="text" id="">
        <input type="password" id="">
        <input type="radio" id="">
        <input type="checkbox" id="">
    -->
 

    <style>
        /*p[id]{
            color: red;
        }*/
        p[class=pp]{
            color: aqua;
        }
    </style>
</head>
<body>
<p id="=id1">我是段落1</p>
<p id="=id2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="=id3">
 
我是段落4</p>
<p class="pp">我是段落4</p>
</body>
</html>

二，屬性選擇器2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-css屬性選擇器下.html</title>
    <!--
        1,屬性的取值是以什麼開頭的
        [attribute|=value] css2 瞭解
        [attribute^=value] css3
        2,屬性的取值是以什麼結尾的
        [attribute$=value] css3
        3,屬性的取值是否包含某個特定的值的
        [attribute~=value] css2 瞭解
        [attribute*=value] css3
    -->
 

    <style>
        /*img[alt^=abc]{
            color: red;
        }*/
        img[alt|=abc]{
            color: red;
        }
        img[alt$=abc]{
            color: aqua;
        }
        img[alt*=abc]{
            color: green;
        }
    </style>
</head>
<body>

<!--<img src="" alt="abcdef">-->
<!--<img src="" alt="abc-www">-->
<!--<img src="" alt="abc qqq">-->
<!--<img src="" alt="defabc">-->
<!--<img src="" alt="ppp abc">-->
<!--<img src="" alt="www-abc">-->
<!--<img src="" alt="qq">-->
<!--<img src="" alt="yy">-->
<img src="" alt="wwwabcwww">
<img src="" alt="www-abc www">
<img src="" alt="www abc www">
<img src="" alt="qq">
</body>
</html>

三，萬用字元選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-css萬用字元選擇器.html</title>
    <!--
        萬用字元選擇器,給當前所有的標籤設定屬性
        1,格式:
        *{
            屬性:值;  
          }
         2,注意:介面標籤不能過多,效能就會比較差
    -->
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是標題</h1>
<p>我是段落</p>
<a href="#">我是超連結</a>

相關推薦

css屬性選擇器和萬用字元選擇器

一，屬性選擇器1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20-css屬性選擇器

css基本選擇器，id選擇器，class選擇器，標籤選擇器，*萬用字元選擇器，逗號 空格 + >

全棧工程師開發手冊 （作者：欒鵬） css基本選擇器 包括id選擇器，class選擇器，標籤選擇器，*萬用字元選擇器，以及使用逗號實現查詢集合，空格實現查詢後代，>實現查詢子元素，

第二天筆記-選擇器（標籤選擇器、類選擇器、css命名規範、谷歌案例、多類名選擇器、id選擇器、萬用字元選擇器、偽類選擇器）

四、選擇器 要想將CSS樣式應用於持定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分則成為選擇器（選擇符）。 （一）標籤選擇器（元素選擇器） 標籤選擇器是隻用於HTML標籤名作為選擇器，按標籤名分類，為頁面中某一類標籤指定統

jquery基本選擇器：id選擇器、class選擇器、標籤選擇器、萬用字元選擇器

全棧工程師開發手冊 （作者：欒鵬） jquery基本選擇器 jquery基本選擇器，包括id選擇器、class選擇器、標籤選擇器、萬用字元選擇器，同時配合選擇器的空格、逗號等語法，可以實

css 類選擇器 id選擇器 html選擇器 萬用字元選擇器 父子選擇器

1、css使用的基本語法： 選擇器 { 屬性1：屬性值； 屬性2：屬性值； 屬性3：屬性值；          .          .          . } 2、Css使用的必要性： （1）、統一網頁不同個體的風格 （2）、可以使用濾鏡 3、Css中常用的4種選擇器：

CSS之萬用字元選擇器、複合選擇器

一、萬用字元選擇器 1、 2、 執行結果：作用於所有的標籤，所有文字顏色都變成了紅色 二、符合選擇器 1、複合選擇器就是把上面的幾個單獨的基本選擇器混合來使用 2、 ① ② 3、 4、 ② ③ 5、 ① ② 6、

萬用字元選擇器子元素選擇器後代選擇器

<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{

Java 泛型和萬用字元

Java 泛型和萬用字元        很多時候，反射並不能滿足業務的需求，Java 泛型和萬用字元與反射配合使用可使得反射的作用發揮到完美的地步，從而實現真正的通用。 直接上程式碼 import java.

單域名版、多域名版和萬用字元版SSL證書之間的區別

本博主轉載前必先親自考證，深惡痛絕百度CP之流，有問題請與我聯絡。 單域名版SSL證書 顧名思義，只保護一個域名，這些域名形如 www.yuming.com；pay.domain.net；shop.store.cn 等； 值得注意的有兩點： 1、當您位 www 字首的域名申請證書的時

子網掩碼和萬用字元掩碼的區別

子網掩碼 子網掩碼，官方的定義是 一種用來指明一個IP地址的哪些位標識的是主機所在的子網，以及哪些位標識的是主機的掩碼。子網掩碼不能單獨存在，它必須結合IP地址一起使用。子網掩碼只有一個作用，就是將某個IP地址劃分成網路地址和主機地址兩部分。 說白了子網掩碼的工

使用泛型Generics和萬用字元來完成父子類List物件的型別匹配

基本格式 參考：參考文章1 參考文章2     //萬用字元實現 public List<Animal> find(List<? extends Animal> animals, Animal animal){

shell '%'萬用字元和 '#' 萬用字元的使用

% 萬用字元從右向左進行匹配，%%表示從右向左貪婪匹配。 說明： 1. {VAR%.* } 表示，從VAR中刪除位於 % 右側的萬用字元所匹配的字串，萬用字元從右向左進行匹配。 url=”www.jinlu.name” echo ${url%.*}

Java泛型 extends,super和萬用字元的理解

1.java泛型的特點 通常情況下，一個編譯器處理泛型有兩種方式：      1.Code specialization。在例項化一個泛型類或泛型方法時都產生一份新的目的碼（位元組碼or二進位制程式

正則表示式和萬用字元

正則表示式用於文字中查詢 萬用字元則用於應用中Shell 正則表示式：動態規劃實現 bool regular_regex(string text, string pattern) {

DMI動態方法呼叫 和 萬用字元

動態方法呼叫DMI <action name="user" class="com.action.UserAction">          <result>/user_add_success.jsp</result> </ac

Shell 學習(六、case...esac的使用和萬用字元)

#!/bin/bash echo "請輸入編號 選擇不同的顯示檔案和目錄方式:" echo "1 - 普通顯示" echo "2 - 詳細顯示" echo "3 - 顯示隱藏檔案" echo "4 - 退出" read num1 case $num1 in        

正則表示式和萬用字元概念的區別

首先，shell萬用字元和正則表示式是風馬牛不相及的東西。請首先樹立這個概念。     萬用字元，說白了一般只用於檔名匹配，它是由shell解析的。所謂的系統level的概念非常含糊，什麼是系統level的？我們知道shell是一個命令直譯器，它是核心的外殼，用於完成作業

Class T泛型和萬用字元泛型的區別

第一種是固定的一種泛型，第二種是隻要是Object類的子類都可以，換言之，任何類都可以，因為Object是所有類的根基類固定的泛型指型別是固定的，比如：Interge,String. 就是<T extends Collection><？ extends Collection> 這裡？代

【前端】CSS基礎02-萬用字元,id,類選擇器

1:萬用字元選擇器和ID選擇器的使用: 2:類選擇器的使用,CSS類選擇器的選擇符號是"."  3:綜合demo 4:複合選擇器 4.1(既...又...)不常用 4.2 後

css：選擇器（標籤、類、ID、萬用字元）

1、css概述 主要的使用場景就是美化網頁，佈局頁面 （1）html的侷限性 它只關注內容的語義，只能做一些簡單的樣式，並且非常的臃腫和繁瑣 （2）css對網頁美化的作用 css是層疊樣式表的簡稱，它和html是一樣的，都是一種標記語言，css主要用於設定html頁面的文字內容（字型、大小、對齊方式等）圖片的