3.24 學前端 CSS之選擇器

阿新 • • 發佈：2019-01-15

二 css的選擇器（Selector）

選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素

1 基礎選擇器

× //通用元素選擇器
    *{ margin:0; padding:0; } //匹配任何元素

E //標籤選擇器，匹配所有使用E標籤的元素  
    p { color:green; } //選擇所有的p標籤
    div{color:darkgreen;} //選擇所有的div標籤

.info
E.info // class選擇器，
    .info { background:#ff0; } //匹配所有class屬性中包含info的元素
    p.info 
 { background:blue; }

#info
E#info  //id選擇器，        
    #info { background:#ff0; }   //選擇所有id等於info的
    p#info { background:#ff0; }  //選擇所有p標籤並且id等於info

2 組合選擇器

E,F： //多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔
    div,p { color:#f00; }

E F：    //後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 可以多層
    li a { font-weight:bold;}

E>F：    //子元素選擇器，匹配所有E元素的子元素F  不管孫子層的(但是子層會把孫子層改變) 

    iv > p { color:#f00; }

E+F：    //毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F
    div+p { color:#f00; }

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1>p{
            background-color: aqua;
            color 
: deeppink;
        }
        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="div1">hello1
        <div class="div2">hello2
            <div>hello4</div>
            <p>hello5</p>
        </div>
        <p>hello3</p>
    </div>
    <p>hello6</p>
    <hr>
    <div class="main2">1
        <div>2
            <div>4</div>
        </div>
        <div>3</div>
    </div>
</body>
</html>

注意巢狀規則：

塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
塊級標籤不能放到p裡面
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內可以包含div
塊級元素與塊級元素並列、內聯元素與內聯元素並列。

3 屬性選擇器

E[att] //匹配所有具有att屬性的E元素，不考慮它的值。注意：E在此處可以省略，比如“[cheacked]”。以下同。   
    p[title] { color:#f00; }

E[att=val] //匹配所有att屬性等於“val”的E元素 
    div[class=”error”] { color:#f00; }

E[att~=val] // 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 
    td[class~=”name”] { color:#f00; }

E[attr^=val] //匹配屬性值以指定值開頭的每個元素 
    div[class^="test"]{background:#ffff00;}

E[attr$=val] //匹配屬性值以指定值結尾的每個元素 
    div[class$="test"]{background:#ffff00;}

E[attr*=val] //匹配屬性值中包含指定值的每個元素
    div[class*="test"]{background:#ffff00;}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [suoning]{       //選擇某一類屬性增加樣式
            color: blueviolet;
        }
        [suoning="sb"]{    //選擇一些 屬性為特定值的增加樣式 ，屬性是可以自己定義的
            color: blueviolet;
        }
        .he>div{
            color: bisque;
        }
    </style>
</head>
<body>
    <div class="he">111
        <p class="fr">222
            <div>333</div>
        </p>
        <div>444</div>
    </div>
----------------------------
    <div suoning="sb">ddd
         <p>pppp</p>
    </div>
    <p suoning="sb2">ddd2
        <p>pppp2</p>
    </p>
</body>
</html>

4 偽類(Pseudo-classes)

CSS偽類是用來給選擇器新增一些特殊效果。

anchor偽類：專用於控制連結的顯示效果

a:link（沒有接觸過的連結）,用於定義了連結的常規狀態。
a:hover（滑鼠放在連結上的狀態）,用於產生視覺效果。
a:visited（訪問過的連結）,用於閱讀文章，能清楚的判斷已經訪問過的連結。
a:active（在連結上按下滑鼠時的狀態）,用於表現滑鼠按下時的連結狀態。
偽類選擇器 : 偽類指的是標籤的不同狀態:
           a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */ 格式: 標籤:偽類名稱{ css程式碼; }

<html>
<head>
<style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
</body>
</html>

補充：

.outer:hover .right{color: red}

before after偽類：

:before    // 在每個元素之前插入內容
    p:before      // 在每個<p>元素之前插入內容
:after  //在每個元素之後插入內容
    p:after        //在每個<p>元素之後插入內容

p:before   //  在每個 <p> 元素的內容之前插入內容  
    p:before{content:"hello";color:red}
p:after         //在每個 <p> 元素的內容之前插入內容
    p:after{ content:"hello"；color:red}

5 css優先順序和繼承

CSS優先順序:

所謂CSS優先順序，即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：

內聯樣式表的權值最高 style=”“——————-1000；
統計選擇符中的ID屬性個數。 #id ——————————-100
統計選擇符中的CLASS屬性個數。 .class —————————-10
統計選擇符中的HTML標籤名個數。 p —————————————1

按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取捨時按照從左到右的順序逐位比較。

<style>
    #p{
        color: rebeccapurple;
    }
    .p{
        color: #2459a2;
    }
    p{
        color: yellow;
    }
</style>
<p id="p" class="p" style="color: deeppink">hello yuan</p>

CSS的繼承性:

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。
繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文字中。

body{color:red;}
<p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

p{color:green}

發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

div{
    border:1px solid #222
}
<div> hello <p>yuan</p></div>

附加說明:

文內的樣式優先順序為1,0,0,0，所以始終高於外部定義。這裡文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。

有!important宣告的規則高於一切。

如果!important宣告衝突，則比較優先權。

如果優先權一樣，則按照在原始碼中出現的順序決定，後來者居上。

由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全域性選擇符*定義的規則)。

3.24 學前端 CSS之選擇器

二 css的選擇器（Selector）選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素 1 基礎選擇器 × //通用元素選擇器 *{ margin:0; padding:0; } //匹配任何元素 E //

3.29 學前端 jquery之操作元素之CSS操作

3.2 CSS操作 3.2.1(樣式) css("{color:'red',backgroud:'blue'}") 3.2.2(位置) offset() position() scrollTop

css之選擇器

開頭 code tro title 查找 ul li -s div href css選擇器基本選擇器 1,id選擇器 1、作用：根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然後設置屬性 2、格式 id名稱 { 屬性：值; } 3、註意點： 1、在

css之選擇器2

HA 完全 clas style 之間 title html 設置 oct 交集選擇器與並集選擇器交集選擇器 1、作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性 2、格式：選擇器1選擇器2 { 屬性：值; } 3、註意： 1、選擇器與選擇器之間沒有任何鏈接符

Css之選擇器使用

我們都知道，CSS 指層疊樣式表 (Cascading Style Sheets)，主要用來為html 元素定義顯示樣式。本文主要來看一下css的選擇器，選擇器用來定義css的樣式，一般有以下幾種： ID選擇器 ID選擇器，通過#識別符號來為selec

CSS之選擇器及其優先順序

在單純使用HTML的過程中，設定網頁每個標籤元素的樣式會很麻煩，對於每個標籤都要進行樣式設定的話，那麼無疑程式碼量會十分龐大，尤其有很多標籤的樣式是相同的，程式碼過多的重複，冗餘，使得html的程式碼可讀性不高。因此，如果有一種方法能將一些表示樣式的程式碼抽離

CSS之選擇器命名規則...

今天在寫CSS控制html時，死活不出效果，鬱悶呀,差點就懷疑RP問題了！...左思右想，想到程式設計時，變數的定義不都是有規則的嗎？而我的div的id名為: //注意其中有一個點. div_QZONE.COM 截圖如下: 試著改變了下id的名字，呵呵，哥想要的效果出現了

3.24 學前端 http協議

一 HTTP概述 HTTP（hypertext transport protocol），即超文字傳輸協議。這個協議詳細規定了瀏覽器和全球資訊網伺服器之間互相通訊的規則。 HTTP就是一個通訊規則，通訊規則規定了客戶端傳送給伺服器的內容格式，也規定了伺服器傳送

3.29 學前端 jquery之操作元素之文件處理

3.3 文件處理內部插入 $("#c1").append("<b>hello</b>");//把hello插入#c1到最後一項 $("p").appendTo("div

3.29 學前端 jquery之操作元素之擴充套件

$(function(){ BindSingleCheck('#edit_mode', '#tb1'); }); function BindSingleCheck(mode, tb){ $(tb).find(':checkbox').bind('click', function(){

3.26 學前端 JavaScript之控制語句

控制語句 if 控制語句功能說明如果表示式的值為true則執行語句1, 否則執行語句2 //if-else基本格式 if (表示式){ 語句１; ......; } else{

前端 CSS的選擇器基本選擇器

pre inf sca mil logs blog port 就是分享基本選擇器包括：標簽選擇器類選擇器 ID選擇器通用選擇器標簽選擇器就是通過標簽名來選擇元素：選中p標簽 <!DOCTYPE html&g

前端 CSS的選擇器基本選擇器類選擇器

code content 基本公有開頭 ext utf-8 span 公共類類選擇器符號是.開頭然後類的名字樣式類名不要用數字開頭（有的瀏覽器不認）。所謂類就是class，.class與id非常相似，任何標簽都可以加類，但是類可以重復

前端 CSS的選擇器高級選擇器

height mpat mage block active textarea img sca gree 高級選擇器分為：後代選擇器兒子選擇器並集選擇器交集選擇器後代選擇器使用空格表示

css之選擇器總結

本文轉載於:猿2048網站➪css之選擇器總結首先我們來看下有哪些選擇器？？？一.基礎選擇器： html標籤選擇器：通過ht

CSS基礎第二篇之選擇器

lec blue auto 添加內容 cal device 鍵值對種類 one 我這裏就簡單舉例9種常用選擇器： 1、通配符選擇器說明：為頁面上的所有元素設置樣式。優先級最低。 *{ margin:0; padding:0; } 2、元素選擇器說明：也叫標簽選擇器

css編輯與檢視之選擇器宣告

選擇器宣告集體宣告在HTML頁面中，有時如果存在多種型別的標籤同時具備相同的樣式宣告時，我們可以採用集體宣告。它們是同級關係。例如： <style> div,p{ colo

CSS的選擇器之基本選擇器

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

前端html--css樣式選擇器

CSS 1. CSS 介紹 CSS : Cascading Style Sheet 層疊樣式表作用 : 調整頁面元素的顯示外觀,實現網頁佈局2. CSS使用在HTML文件中使用CSS樣式表,有三種方式 1. 內聯樣式/行內樣式特點 : 在標籤中通過style屬性,為元素設定樣式語法 : <標籤名

html之css屬性選擇器，偽類，繼承，選擇器優先順序，float

屬性選擇器可以給標籤寫一個自定義屬性： <div class="c2" quincy="q1"></div> 查詢時可以根據自定義屬性名和值去查詢標籤： div[quincy] 或者div[quincy='q1']

3.24 學前端 CSS之選擇器

二 css的選擇器（Selector）

相關推薦