CSS高階系列之多種選擇器及權重值

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示多種選擇器</title>
    <style type="text/css">
        /*標籤選擇器*/
        p{
            color: red;
        }
        /*類選擇器 showClass就是類選擇器的類名*/
        .showClass{
            color: cyan 
;
        }
        /*id選擇器,showId就是這個id選擇器的名字*/
        #showID{
            color: yellowgreen;
        }
        /*子選擇器*/
        /*div標籤的第一個階級的span子標籤的樣式*/
        div>span{
            color: aquamarine;
        }
        /*後代選擇器*/
        div strong{
            color: chartreuse;
        }
       /*組合選擇器*/ 

        div, p{
            color: darkorchid;
        }
        /*通用選擇器*/
        *{
            background-color: deeppink;
        }

    </style>
</head>
<body>
   <div>
       <span>我是div的子span標籤</span>
       <p><span>我是div的子標籤中的子標籤</span></p> 

   </div>

   <div>
       <strong>我是什麼顏色呢</strong>
       <div>我又是什麼<strong>顏色呢?</strong></div>
   </div>

   <div>我是用來演示組合選擇器的div標籤</div>
   <p>我是用來演示組合選擇器的p標籤</p>


<!--權重值-->
<!--就近原則-->
    <!--誰離當前標籤近,那麼就是用哪個選擇器,-->
    <p>我顯示的是就近原則的顏色</p>
    <!--id選擇器>類選擇器>標籤選擇器-->

    <!--<p id="idSelector" class="classSelector">-->
        <!--我顯示的顏色-->
    <!--</p>-->
    <!--內聯式>嵌入式-->
   <p class="classSelector">歐文</p>
   <p style="color: chartreuse" id="idSelector">
       我是用來顯示內聯式
   </p>

    <!--線面色數就叫權值-->
    <!--標籤選擇器:1-->
    <!--類選擇器:10-->
    <!--id 選擇器:100-->
    <!--內聯選擇器:1000-->
</body>
</html>

CSS高階系列之多種選擇器及權重值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

CSS學習筆記之關聯選擇器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

HTML系列之各種選擇器(八)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

css備忘：id選擇器的權重>class選擇器的權重=屬性選擇器的權重>元素選擇器

基本分享 bubuko col clas AS -c 測試 com 最近的項目要自己寫前端了，重新學習下前端的一下基本知識。一般在css樣式表中，上面的會被下面的覆蓋，如下圖，文字會顯示藍色：所以按照正常的來說，下面的css樣式，測試的文字應該還是藍色但結果，測

CSS的七種基本選擇器及其權值

一、學習選擇器的優先順序，我們要知道的是：寫到選擇器裡面的樣式都會生效，只有樣式出現衝突的時候才會有優先順序的概念；二、七種常用的基本選擇器型別： 1.通配選擇器 *{ } 代表文件裡所有標籤，一般

python--前端之CSS（css頁面引入方法、選擇器之基本選擇器、組合選擇器）

gin 如果優點選擇器 alt 前端設置字體行高常用 CSS產生背景：為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，ht

CSS選擇器之兄弟選擇器（~和+）

spa 例子 inf 代碼但是 info 發現效果說話　　今天在改以以前人家寫的網頁的樣式的時候，碰到這個選擇器，‘~’，當時我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的區別，雖然我知道他們都是

CSS之分組選擇器和巢狀選擇器

分組選擇器，將一個樣式應用於多個類，或者標籤啥的每個選擇器用逗號隔開 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.c

CSS的選擇器之基本選擇器

doctype lin erl ext meta red itl size yellow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

CSS中常用的選擇器及三大特性

**1.標籤選擇器** 標籤名{ 屬性名：屬性值 } 例如： div{ width：100px； } **2.通用選擇器** *{ 屬性名：屬性值 } 例如： *{ margin：0； padding：0； } 效能極低，常用於清楚預設樣式，測試使用 **3.類選擇器** 給標籤用class命

Python爬蟲框架 scrapy之xpath選擇器 css選擇器

文章目錄一、xpath 1、節點選擇二、 css css選擇三、xpath函式操作 1

CSS之派生選擇器（上下文選擇器）

選擇器（selector）是CSS裡面非常重要地一部分知識。根據我暫時淺薄地理解，CSS就是對一份HTML程式碼裡面的元素進行運用各種樣式。所以，第一步就是要準確地定位你想要運用樣式的元素。CSS裡面通過各種選擇器來定位元素。 CSS裡面選擇器有很多種，今天就只想說說 “派生

CSS的四種基本選擇器和四種高階選擇器

CSS選擇器：就是指定CSS要作用的標籤，那個標籤的名稱就是選擇器。意為：選擇哪個容器。CSS的選擇器分為兩大類：基本選擇題和擴充套件選擇器。基本選擇器：標籤選擇器：針對一類標籤ID選擇器：針對某一個特定的標籤使用類選擇器：針對你想要的所有標籤使用通用選擇器（萬用字元）：針對

CSS選擇器及優先順序總結

一、優先順序不同級別在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。作為style屬性寫在元素內的樣式 id選擇器類選擇器元素選擇器萬用字元選擇器瀏覽器自定義或繼承總結排序：!important > 行內

CSS選擇器的權重及優先順序

最近在牛客網上刷題遇到過各類選擇器優先順序的比較問題，經查閱，現總結如下：總體來說：內聯樣式 > id>class=屬性選擇器=偽類選擇器=偽元素選擇器>標籤，大致分為四個等級：一等：

CSS選擇器及選擇器優先順序

CSS選擇器： css選擇器有四種，標籤名選擇器，id選擇器，class選擇器，屬性選擇器，其中屬性選擇器權重最低且不常用兩個選擇器A和B使用,連寫時,表示選擇滿足A或滿足B的元素#p2,#p3{ color: blue; } 兩個選擇器A和B使用

css系列教程1-選擇器全解

全棧工程師開發手冊（作者：欒鵬） css選擇器全解： css選擇器包括：基本選擇器、屬性選擇器、偽類選擇器、偽元素選擇器選擇器總是從左至右解析，不要私自新增()優先運算

CSS常用選擇器及優先順序

基礎選擇器 1. 通用選擇器，匹配任何元素：* *{ color:#FF0000; } 2.標籤選擇器，匹配指定的所有標籤： p{ color:#FF0000; } 3. class選擇器，匹配所有包含指定cl

CSS 選擇器及各樣式引用方式

Css ：層疊樣式表 (Cascading Style Sheets),定義瞭如何顯示HTML元素。 1.選擇器的分類語法結構： 1.1 Id選擇器 1.1.1 格式　　　　#id ：#+元素的id；id是區分大小寫。 1.1.2 示例 #title1 {background-color:Blu

CSS樣式之複合選擇器

1.交集選擇器交集選擇器使用的方法是其中一個為HTML的標籤,另外一個是類選擇器,示例如下: p.one 解釋: p是HTML中的<p>標籤 , .one 是一個類選擇器的書寫方式,

CSS高階系列之多種選擇器及權重值

相關推薦