Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 精品免费久久久久久影院,制服丝袜综合国产精品,国产女乱淫真高清免费视频 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          一文快速讀懂CSS屬性選擇器
          
        
           
          
	
	
          
		
                        
          用CSS選擇器說明及實例分析
          CSS選擇器（Selector）是用于實現網頁頁面定義的基礎，選擇器的主要作用在于確定指定的單個元素或者一類元素。在獲取元素之后即可以對所獲取的元素進行樣式的定義。最終為用戶呈現不同交互視覺風格的前端頁面。本文主要對常用CSS選擇器基本概念與常用屬性選擇器進行說明與實例展示。
          CSS Selector類型劃分
          按照W3C技術規范劃分目前CSS Selector主要類型可以劃分為基本選擇器、關系選擇器、偽選擇器三種類型不同的選擇器。目前主要CSS選擇器類型及分類描述如下圖所示：
          CSS Selector分類圖
          CSS Selector選擇器主要分類描述如上圖，其中我們較為常用的選擇器主要包括基本選擇器、關系選擇器及偽選擇器中的部分類型。總之，一句話概括的話：選擇器的作用就是從HTML文檔中找出需要設置樣式的一個或者多個HTML元素。
          基本常用選擇器
          本文中我們選取部分常用選擇器對其語法進行簡單說明，并通過實例進行應用說明與展示。
          （一）基本選擇器
          基本選擇器中元素選擇器、類選擇器與ID選擇器是較為常用選擇器，也是大部分教材中詳細介紹過的選擇器類型。常用基本選擇器描述如下圖：
          基本選擇器中常用類型說明
          屬性選擇器
          在基本選擇器中以上4類為常用選擇器，除此之外初學者使用較少但非常重要的選擇器為屬性選擇器。屬性選擇器主要根據元素的屬性確定選擇元素并進行樣式的設置。屬性選擇器主要類型包括7種不同類型選擇器，描述如下圖所示：
          CSS 屬性選擇器
          CSS屬性選擇器常用的其中方法描述如上圖所示，通過屬性值的選擇方式確定選中的元素，進而實現元素樣式的設置。屬性選擇器說明如下：
          常用屬性選擇器說明
          以下我們通過實例進行說明，HTML代碼描述如下：
          示例代碼
          我們在頁面中添加6個不同層，并設置其基本樣式，如上圖所示，通過使用屬性選擇器實現樣式的改變。原始頁面效果如下圖：
          原始頁面效果
          1、[attr]選擇器
          該選擇器主要根據屬性名稱確定選中的標記，并對其進行設置。我們將示例文件中的前三個div設置ID屬性并以此為選擇條件進行DIV樣式修改。代碼部分如下：
          <div id="a">1</div>
<div id="2">2</div>
<div id="3">3</div>
          編寫選擇器如下：
          [id]{background-color: red;}
          通過該選擇器的使用可以準確找到需要設置樣式的元素。最終實現效果如下圖所示：
          [attr]選擇器
          2、[attr=value]選擇器
          以第一種選擇器相比較除屬性名稱之外還需要滿足取值等于value。如我們需要將上例中id值為2的DIV進行樣式設置，則可直接編寫選擇器：
          [attr="2"]{background-color:red;}
          通過value值對attr屬性進行篩選，最終找到符合條件的DIV實現背景顏色變化。測試效果如下：
          [attr=value] 選擇器
          3、[attr~=value]選擇器
          該選擇器可以選擇對應屬性attr的值為列表形式，且值列表中包含value值。如我們在定義樣式中對于多個類選擇器的使用一般寫法如下：
          <div class="cl1 cl2 cl3" id="4">4</div>
          上述代碼即符合多個屬性值，中間空格隔開，因此我們可以編寫選擇器實現對這個DIV的選擇。實現代碼如下：
          [class~="cl2"]{font-size: 36px;color:white; background-color: blue;}
          我們選中該DIV實現樣式設置，最終呈現效果如下：
          [attr~=value]選擇器
          4、[attr|=value]選擇器
          該選擇器主要對attr屬性取值為value或者以value-為前綴的元素進行選擇。我們將第五個DIV代碼進行修改描述如下：
          <div class="pure-g pure-from">5</div>
          如果要選擇這個DIV我們可以編寫以下選擇器，代碼如下：
          [class|="pure"]{font-size: 36px;color:white; background-color: gray;}
          通過以上選擇器及樣式編寫，可將第五個DIV樣式進行修改，顯示結果如下：
          [attr|=value]選擇器
          5、[attr^=value]選擇器
          該選擇器基本與|value選擇器類似，只是要求取值為value開頭的值。我們修改第六個DIV的代碼如下：
          <div id="mytest">6</div>
          通過編寫選擇器，在value中包含my進行測試，選擇器代碼如下：
          [id^="my"]{font-size: 36px;color:white; background-color: yellow;}
          代碼中我們修改了背景顏色為黃色，測試結果如下所示：
          [attr^=value]選擇器
          6、[attr*=value]選擇器
          該選擇器要求屬性attr對應的屬性值中包含value，如果包含則選中該元素。我們將第二個DIV進行代碼編寫，如下：
          <div class="val1 val2 val3">2</div>
          我們定義如下選擇器：
          [class*="val1"]{background-color:magenta;}
          通過以上選擇器我們可以選中第二個DIV，并實現樣式設置，我們將背景顏色改為magenta。實現效果如下：
          6、[attr*=value]選擇器
          7、[attr$=value]選擇器
          該方法用于選擇attr屬性值中以value結尾的元素。我們將第三個DIV代碼進行修改，如下：
          <div id="mylast">3</div>
          編寫選擇器代碼如下：
          [id$="last"]{background-color:steelblue;}
          通過該選擇器可以選擇第三個DIV并對其背景顏色進行設置，測試結果如下：
          [attr$=value]選擇器
          以上給出了常用的基本屬性選擇器與屬性選擇器的說明及實例分析。下篇文章我們將對關系選擇器進行說明。
          本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：
          Web前端設計-JavaScript動態設置CSS樣式實例分析
          前端設計-JavaScript實現復選框的分組單選
          SS是前端重要的組成部分，它能幫助我們通過選擇器給標簽添加各種樣式效果。大家可能工作中最常用的選擇器都是id、class以及標簽選擇器，但是當面對一些復雜的項目場景時，僅僅用這幾個基礎選擇器去操作就會很麻煩。為了在開發中更加得心應手，本文我們就來看看CSS中的選擇器都有哪些以及如何去靈活運用。
          一、初級選擇器
          1.1 基礎選擇器
          通配符（*）選擇器
          語法：*{屬性：屬性值；}
          說明：*表示頁面中所有的元素（標簽），我們常用來重置樣式。
          實例：
          *{
          margin: 0;
          padding: 0;
          }
          標簽（元素）選擇器
          語法：標簽名{屬性：屬性值；}
          說明：標簽選擇器就是使用結構中元素名稱直接作為選擇符。
          實例：
          div{
          width: 100px;
          height: 100px;
          }
          類（class）選擇器
          語法：.class名{屬性：屬性值；}
          說明：當我們使用類選擇器時，需要先為相應的元素添加class屬性。他的屬性值就是我們要使用類名。
          實例：
          <h1 class="title">標題1</h1>
          <h2 class="title">標題2</h2>
          .title {
          color: red;
          }
          注意：類名要盡量使用英文表示，不能使用數字或中文命名，并且盡量起一些有意義的名字，讓別人能一眼看出來這個類名的作用。
          類名可以有多個，多個類名之間要使用空格隔開。我們可以把一些標簽元素相同的樣式放到一個類調用，從而節省CSS代碼，例如版心可以寫統一樣式。
          id選擇器
          語法：#id名{屬性：屬性值；}
          說明：id選擇器是使用元素身上的id屬性作為選擇符。所以想要使用id選擇器，需要先為元素上定義id屬性。
          實例：
          <div id="box"></div>
          定義好id之后就可使用#box給對應的div上添加：
          #box {
          width: 100px;
          height: 100px;
          background-color: pink;
          }
          注意：起id名時不能用關鍵字（所有標簽和屬性都是關鍵字），并且一個id名稱只能對應文檔中一個具體的元素對象，因為id的特殊性，只能代表頁面中某一個唯一的元素對象，就好比我們的身份證號，一個人只能對應一個唯一的id。
          1.2 結構選擇器
          后代（包含）選擇器
          語法：選擇器1（父） 選擇器2（子）{屬性：屬性值；}
          說明：選擇器1和選擇器2中間用空格隔開，表示選擇選擇器1中包含選擇器2的所有后代元素。
          實例：
          <div class="box">
          <h2>標題1</h2>
          <p>段落1</p>
          <p>段落2</p>
          </div>
          .box p {
          color: red;
          }
          子代選擇器
          語法：選擇器1>選擇器2{屬性：屬性值；}
          說明：用來選擇緊挨著選擇器1（父元素）的第一層符合選擇器2的子元素。
          實例：
          <div class="box">
          <h2>標題1</h2>
          <div>
          <h2>標題2</h2>
          </div>
          </div>
          .box > h2 {
          color: red;
          }
          全部兄弟選擇器
          語法：選擇器1~選擇器2{屬性：屬性值；}
          說明：選擇當前元素所有符合條件的兄弟元素。
          實例：
          <div class="box">
          <h2>標題1</h2>
          <p>段落</p>
          <h2>標題2</h2>
          <h2>標題3</h2>
          </div>
          p ~ h2 {
          color: red;
          }
          注意：只能選中當前元素后面的元素。
          相鄰兄弟選擇器
          語法：選擇器1+選擇器2{屬性：屬性值；}
          說明：選中當前元素緊挨著的后面的兄弟元素。
          實例：上面的案例修改成：
          p + h2 {
          color: red;
          }
          注意：只能選中當前元素后面的元素，如果沒有緊挨著當前元素就不會產生效果。
          并集（群組）選擇器
          語法：選擇器1，選擇器2{屬性：屬性值；}
          說明：用于對多個標簽定義同樣的樣式，選擇器之間用逗號分隔。
          實例：這里我們依然用上述的結構：
          p,
          h2 {
          color: red;
          }
          交集選擇器
          語法：選擇器1選擇器2{屬性：屬性值；}
          說明：用于選擇同時符合選擇器1和選擇器2條件的元素。
          實例：
          <h2 class="title">標題1</h2>
          <h2>標題2</h2>
          h2.title {
          color: red;
          }
          二、屬性選擇器
          屬性選擇器是通過元素的屬性以及屬性值來選擇對應元素的，屬性名我們可以自己定義。
          屬性的或運算
          語法：選擇器[屬性名]{屬性：屬性值；}
          說明：只要選擇器元素中有當前屬性就會被選中。
          實例：
          <h2 class="title" name>標題1</h2>
          <h2>標題2</h2>
          .title[name] {
          color: red;
          }
          屬性的與運算
          語法：選擇器[屬性1][屬性2]{屬性：屬性值；}
          說明：選擇同時包含屬性1和屬性2的元素。
          實例：
          <h2 class="title" name>標題1</h2>
          <h2 name>標題2</h2>
          h2[name][class] {
          color: red;
          }
          屬性值的篩選
          語法：選擇器[屬性名='要求']{屬性：屬性值；}
          說明：選擇對應的屬性值符合要求的元素。
          實例：
          <h2 class="title" name>標題1</h2>
          <h2 class="title2" name>標題2</h2>
          h2[class='title'] {
          color: red;
          }
          前綴篩選^
          語法：選擇器[屬性名^='要求']{屬性：屬性值；}
          說明：選擇屬性值以當前要求開頭的元素。
          實例：
          <h2 class="title">標題1</h2>
          <h2 class="title2">標題2</h2>
          <h2 class="stitle">標題3</h2>
          h2[class^='tit'] {
          color: red;
          }
          后綴篩選$
          語法：選擇器[屬性名$='要求']{屬性：屬性值；}
          說明：選擇屬性值以當前要求結尾的元素。
          實例：這里我們使用上述的結構：
          h2[class$='tle'] {
          color: red;
          }
          包含限定*
          語法：選擇器[屬性名*='要求']{屬性：屬性值；}
          說明：選擇屬性值包含當前要求的元素。
          實例：這里我們使用上述的結構：
          h2[class*='title'] {
          color: red;
          }
          包含限定~
          語法：選擇器[屬性名~='要求']{屬性：屬性值；}
          說明：選擇屬性值包含一個給定要求詞（單獨存在）的元素。
          實例：
          <h2 class="title">標題1</h2>
          <h2 class="xx title xx">標題2</h2>
          <h2 class="stitle">標題3</h2>
          h2[class~='title'] {
          color: red;
          }
          包含限定|
          語法：選擇器[屬性名|='要求']{屬性：屬性值；}
          說明：選擇屬性值只有給定要求或者是以給定要求開頭后面用“-”拼接其他字符串的元素。
          實例：
          <h2 class="title">標題1</h2>
          <h2 class="title-xx">標題2</h2>
          <h2 class="title.xx">標題3</h2>
          <h2 class="xx-title">標題4</h2>
          h2[class|='title'] {
          color: red;
          }
          三、偽類選擇器:
          CSS偽類選擇器用于像某些元素添加特殊效果，比如第一個元素、某個元素的子元素、鼠標滑過的元素。
          3.1 動態偽類選擇器
          動態偽類選擇器在日常工作中主要用于超鏈接標簽。
          說明：前4個超鏈接偽類選擇器聯合使用時，就注意他們的順序，a:hover必須在a:link和a:visited之后，a:active必須在a:hover之后。錯誤的順序有時會使超鏈接的樣式失效。
          a:link{color:red;} /* 未訪問的鏈接狀態 */
          a:visited{color:green;} /* 已訪問的鏈接狀態 */
          a:hover{color:blue;} /*鼠標滑過鏈接狀態*/
          a:active{color:yellow;} /*鼠標按下去時狀態*/
          3.2 結構偽類選擇器
          結構偽類指利用頁面的布局結構選擇響應的元素。
          注意：結構偽類選擇器中，子元素的序號是從1開始的，所以，當參數n的計算結果為0 時，將不選擇任何元素。
          3.3 其他偽類選擇器
          四、偽元素選擇器::
          偽元素選擇器可以幫助我們利用CSS創建新的標簽元素（偽元素），從而達到簡化結構的目的。
          注意：利用before和after創建的元素屬于行內元素，而這個元素我們不能在結構中看到，所以稱它為偽元素。
          五、選擇器權重
          在CSS中我們用四位數字表示選擇器的權重，方便我們去判斷樣式的優先級。
          當權重相同時，樣式遵循就近原則，CSS中哪個選擇器最后定義，就執行哪個選擇器的樣式。
          !important代表權重最高（最終的樣式）。
          background-color：skyblue!important;
          所以最終樣式的優先級應該為：
          !important>行內樣式>id選擇器>class選擇器=偽類選擇器=屬性選擇器>標簽選擇器=偽元素選擇器>通配符選擇器>繼承樣式。
          總結
          以上就是為大家總結的CSS選擇器的種類及功能。總的來說，碰到各種各樣的工作場景，我們需要靈活運用這些選擇器，并且當選擇器樣式沖突時，我們就得及時發現并且完成權重的解析從而解決問題。解析規則大致如下：
          • 當不同選擇器的樣式設置有沖突時，高權重選擇器的樣式會覆蓋低權重選擇器的樣式。
          • 相同權重的選擇器，樣式遵循就近原則。哪個選擇器樣式最后定義，就會采用哪個樣式。
          • 需要注意，CSS具有繼承性，即子標簽會繼承父標簽的某些樣式。但是繼承樣式沒有權重。所以在嵌套結構中，不管父元素樣式的權重多大，在子元素定義的樣式都會覆蓋繼承來的樣式。
          SS3 選擇器——基本選擇器
          1、通配符（*）
          通配符
          <ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
.demo * {border:1px solid blue;}
          2、元素選擇器（Element）
          元素選擇器
          <ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
          li { background-color: grey; color: orange; }
          元素選擇器，是css選擇器中最常見而且最基本的選擇器。元素選擇器其實就是文檔的元素，如html,body,p,div等等，比如這個demo：中元素包括了div,ul,li等。
          3、類選擇器（.className）
          類選擇器
          <ul class="demo">
    <li>1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
          .li-2 {font-weight: bold; color: yellow;}
          上面代碼表示是給有 "li-2" 類名的元素加上一個“字體為粗體，顏色為黃色”的樣式。
          4、id選擇器（#ID）
          id選擇器
          <ul class="demo">
    <li id="first">1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li id="last">5</li>
</ul>
          #first {background: lime;color: #000;}
          #last {background: #000;color: lime;}
          上面的代碼選擇了id為"first"和"last"的li。
          5、后代選擇器（E F）
          后代選擇器
          <ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
          ul li { background-color: red; color: #fff; } 
          元素的子元素或者是孫元素或者是更深層次的關系，都將被選中，換句話說，不論li在ul中有多少層關系，都將被選中。注意他們之間需要一個空格隔開
          6、子元素選擇器(E>F)
          子元素選擇器
          <ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
          ul > li {background: green;color: yellow;}
          子元素選擇器只能選擇某元素的第一層子元素，其中ul為父元素，而li為子元素，其中ul>li所表示的是：選擇了ul元素下的所有第一層子元素li。簡單的說就是只選擇當前第一層級的子元素
          7、相鄰兄弟元素選擇器(E + F)
          相鄰兄弟元素選擇器
          <ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
          li + li {background: green;color: yellow; border: 1px solid #ccc;}
          相鄰兄弟選擇器可以選擇緊接在另一個元素后面的元素。
          上面的 li+li，其中第二個li是第一個li的相鄰元素，第三個又是第二個相鄰元素，因此第三個也被選擇，依此類推，所以后面4個li都被選中了。
          8、通用兄弟選擇器（E ? F）
          通用兄弟選擇器
          <ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
          .active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
          選擇某元素后面的所有兄弟元素（選擇相鄰的所有兄弟元素），和相鄰選擇器類似（相鄰選擇器只選擇相鄰的一個元素）
          選擇中了li.active 元素后面的所有兄弟元素li
          9、群組選擇器
          群組選擇器
          <ul class="demo">
    <li  class="first">1</li>
    <li>2</li>
    <li  class="li-3">3</li>
    <li>4</li>
    <li class="last">5</li>
</ul>
          .first, 
          .last, 
          .li-3 {background: green;color: yellow; border: 1px solid #ccc;}
          群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開
          li.first和li.last和.li-3具有相同的樣式效果，所以我們把他們寫到一個組里

          CSS3 選擇器——屬性選擇器
          1、E[attr]：只使用屬性名，但沒有確定任何屬性值
          屬性名選擇器
                 <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
    
          .demo a[id] { background: blue; color:yellow; font-weight:bold; }
          選擇了div.demo下所有帶有id屬性的a元素，并在這個元素上使用背景色為藍色，字體加粗并為黃色的樣式，
          2、E[attr="value"]選擇指定的屬性對象
          選擇指定的屬性對象
                  <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
          .demo a[id="first"] {background: blue; color:yellow; font-weight:bold; }
          選擇了.demo a[id="first"] 選擇屬性id的值為first的對象。
          3、E[attr~="value"] 包含屬性值
                  <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
          .demo a[title~="website"]{ background:orange; color:green; }
          div.demo下的a元素的title屬性中，只要其屬性值中含有"website"這個詞就會被選擇
          4、E[attr^="value"] 選擇attr屬性值以“value”開頭的所有元素
                  <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
          .demo a[href^="http://"]{ background:orange; color:green; }
          .demo a[href^="mailto:"]{ background:green; color:orange; }
          選擇了以href屬性并且以"http://"和"mailto:"開頭的所有a元素。
          5、E[attr$="value"] 選擇attr屬性值以"value"結尾的所有元素
          
        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
          .demo a[href$="png"]{ background:orange; color:green; }
          選擇div.demo中元素有href屬性，并以png值結尾的a元素。
          6、E[attr*="value"] 選擇attr屬性值中包含子串"value"的所有元素。
                  <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
          .demo a[title*="site"]{ background:black; color:white; }
          選擇了div.demo中a元素，而a元素的title屬性中只要有"site"就選中。
          7、E[attr|="value"] 選擇attr屬性值等于value或以value-開頭的所有元素
                  <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
          .demo a[lang|="zh"]{ background: gray; color: yellow; }
          選擇了div.demo中lang屬性等于zh或以zh-開頭的所有a元素。
          CSS3 選擇器——偽類選擇器
          1、:first-child 選擇某個元素的第一個子元素
          <ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
          .demo li:first-child { background: red; border: 1px solid yellow; color: #fff; }
          選擇某個元素的第一個子元素。
          2、:last-child 選擇某個元素的最后一個子元素
          <ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
          .demo li:last-child { background: red; border: 1px solid yellow; color: #fff; }
          選擇某個元素的最后一個子元素。
          3、:nth-child() 選擇某個的一個或多個特定的子元素
          • :nth-child(number);/*參數是具體數字*/
          • :nth-child(n);/*參數是n,n從0開始計算*/
          • :nth-child(n*length)/*n的倍數選擇，n從0開始算*/
          • :nth-child(n+length);/*選擇大于length后面的元素*/
          • :nth-child(-n+length)/*選擇小于length前面的元素*/
          • :nth-child(n*length+1);/*表示隔幾選一*/
          <ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
          :nth-child() 可以定義括號的值（值可以是整數，也可以是表達式）
          .demo li:nth-child(3) { background: red; border: 1px solid yellow; color: #fff; }
          選擇 div 元素下的第3個 li 子元素。
          [微風][微風]

          :nth-child(n) /*參數是n,n從0開始計算*/
          .demo li:nth-child(n) { background: red; border: 1px solid yellow; color: #fff; } 
          等于.demo li {background: lime;}
          n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          ?[微風][微風]
          :nth-child(n*length)
          .demo li:nth-child(2n) { background: red; border: 1px solid yellow; color: #fff; } 
          等于.demo li:nth-child(even) {}
          選擇偶數的對象：n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          表達示結果，如下:
          .demo li:nth-child(2n) = (2*0) = 0
          .demo li:nth-child(2n) = (2*1) = 2
          .demo li:nth-child(2n) = (2*2) = 4
          .demo li:nth-child(2n) = (2*3) = 6
          以此類推....
          ?[微風][微風]
          .demo li:nth-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; } 
          等于.demo li:nth-child(odd) {}
          選擇奇數的對象：n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          表達示結果，如下:
          .demo li:nth-child(2n-1) = (2*0-1) = -1
          .demo li:nth-child(2n-1) = (2*1-1) = 1
          .demo li:nth-child(2n-1) = (2*2-1) = 3
          .demo li:nth-child(2n-1) = (2*3-1) = 5
          以此類推....
          ?[微風][微風]
          :nth-child(n+length); /*選擇大于length后面的元素*/
          nth-child(n+5)從第五個元素開始選擇，這里的數字你可以自己定義
          .demo li:nth-child(n+5){ background: red; border: 1px solid yellow; color: #fff; }
          n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          表達示結果，如下:
          .demo li:nth-child(0+5) = 5
          .demo li:nth-child(1+5) = 6
          .demo li:nth-child(2+5) = 7
          .demo li:nth-child(3+5) = 8
          以此類推....
          ?[微風][微風]
          nth-child(-n+5)反向從第五個元素開始選擇，這里的數字你可以自己定義
          .demo li:nth-child(-n+5){ background: red; border: 1px solid yellow; color: #fff; }
          n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          表達示結果，如下:
          .demo li:nth-child(-0+5) = 5
          .demo li:nth-child(-1+5) = 4
          .demo li:nth-child(-2+5) = 3
          .demo li:nth-child(-3+5) = 2
          以此類推....
          ?[微風][微風]
          :nth-child(n*length+1); /*表示隔幾選一*/
          :nth-child(4n+1)間隔選擇對象，數字可自定義
          .demo li:nth-child(4n+1) { background: red; border: 1px solid yellow; color: #fff; }
          n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          表達示結果，如下:
          .demo li:nth-child(4*0+1) = 1
          .demo li:nth-child(4*1+1) = 5
          .demo li:nth-child(4*2+1) = 9
          .demo li:nth-child(4*3+1) = 13
          以此類推....
          4、:nth-last-child() 選擇指定的元素，從最后一個開始
          .demo li:nth-last-child(4) { background: red; border: 1px solid yellow; color: #fff; }
          選擇倒數第四個元素。
          ?[微風][微風]
          可以用表達示，選擇奇數
          .demo li:nth-last-child(2n) { background: red; border: 1px solid yellow; color: #fff; }
          n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          表達示結果，如下:
          :nth-last-child(2*1) = 2
          :nth-last-child(2*2) = 4
          :nth-last-child(2*3) = 6
          :nth-last-child(2*4) = 8
          以此類推....
          ?[微風][微風]
          可以用表達示，選擇偶數
          .demo li:nth-last-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }
          n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
          表達示結果，如下:
          :nth-last-child(2*1-1) = 1
          :nth-last-child(2*2-1) = 3
          :nth-last-child(2*3-1) = 5
          :nth-last-child(2*4-1) = 7
          :nth-last-child(2*5-1) = 9
          5、:nth-of-type 選擇指定的類型元素
          .demo li:nth-of-type(8) { background: red; border: 1px solid yellow; color: #fff; }
          指定獲取 類型為 li 的第8個元素，中間間隔了a元素
          ?[微風][微風]
          與 :nth-child區別，:nth-child不指定類型 .demo li:nth-child(8) { background: red; border: 1px solid yellow; color: #fff; }
          指定獲取元素為li第8個元素，中間間隔了a元素，因沒有指定類型，而第8個元素是a，所以無法設置樣式
          6、:nth-last-of-type() 選擇指定類型的元素，從元素的最后一個開始計算
          .demo li:nth-last-of-type(2) { background: red; border: 1px solid yellow; color: #fff; }
          數字可使用n表達式計算，從最后一個元素開始計算，獲取指定類型為 li 的第2個元素，
          7、:first-of-type 選擇指定類型的第一個元素；
          .demo li:first-of-type { background: red; border: 1px solid yellow; color: #fff; }
          :first-of-type與:first-child類型，前者區別了類型，后者無區域
          獲取第一個為 li 的元素，子元素中包含了a、li兩種元素
          8、:last-of-type 選擇指定類型的最后一個元素；
          .demo li:last-of-type { background: red; border: 1px solid yellow; color: #fff; }
          :last-of-type與:last-child類型，前者區分了類型，后者無區分
          獲取最后一個為 li 的元素，子元素中包含了a、li兩種元素
          9、:only-child 選擇的元素是它的父元素的唯一一個了元素；
                  <div>
            <p>我是子級，在父級中是唯一一個子元素。</p>
        </div>

        <div>
            <span>我是span標簽，在父級中并不是唯一的子元素，因為還有一個p標簽。</span>
            <p>我是p標簽，在父級中并不是唯一的子元素，因為還有一個span標簽。</p>
        </div>

        <p>
            我是p標簽，而我并沒有父級。
        </p>
          p:only-child { background: #ff0000; }
          我是子級，在父級中是唯一一個子元素。
          我是span標簽，在父級中并不是唯一的子元素，因為還有一個p標簽。
          我是p標簽，在父級中并不是唯一的子元素，因為還有一個span標簽。
          我是p標簽，而我并沒有父級。
          10、:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
                  <div>
            <p>我是子級p元素，在父級中是唯一的一個p元素。所以會被選擇中。</p>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
        </div>
        <div>
            <p>我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。</p>
            <p>我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。</p>
        </div>
          p:only-of-type { background:#ff0000; }
          我是子級p元素，在父級中是唯一的一個p元素。所以會被選擇中。
          我是子級span元素，在父級中并不是唯一的span元素。 我是子級span元素，在父級中并不是唯一的span元素。 我是子級span元素，在父級中并不是唯一的span元素。
          我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。
          我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。
          11、:empty 選擇的元素里面沒有任何內容。
                  <p>我是一個p標簽，我<span style="color: red;">下面</span>有個p標簽，內容是空的，所以它會被選中。</p>
        <p></p>
        <p>我是一個p標簽，我<span style="color: red;">上面</span>有個p標簽，內容是空的，所以它會被選中。</p>
        <p>我是一個p標簽。</p>
        <p>我是一個p標簽。</p>
          p:empty { background:#ff0000; }
          第2行的p標簽會被選中，因為它沒有內容。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲高清一区二区三区|
亚洲伦理一区二区|
精品aⅴ一区二区三区|
亚洲丰满熟女一区二区v|
亚洲视频一区二区|
日韩成人一区ftp在线播放|
久久久久久一区国产精品|
综合无码一区二区三区四区五区|
亚洲日韩国产一区二区三区在线|
精品视频一区二区三区在线观看|
日本韩国黄色一区二区三区|
无码中文人妻在线一区
|
亚洲一区二区三区影院|
日本一区中文字幕日本一二三区视频|
日韩精品无码一区二区三区免费
|
人妖在线精品一区二区三区|
国产成人精品a视频一区|
国产一区二区三区在线免费
|
日韩内射美女人妻一区二区三区|
亚洲国产精品一区二区三区久久|
国产人妖视频一区二区破除|
在线免费一区二区|
国产福利一区视频|
中文字幕一区二区三区在线观看|
中文字幕日韩人妻不卡一区|
国产精品亚洲专区一区|
国产精品538一区二区在线|
日本韩国一区二区三区|
高清一区二区三区|
上原亚衣一区二区在线观看|
一区二区三区国产|
亚欧成人中文字幕一区|
亚欧免费视频一区二区三区|
国产精品久久一区二区三区|
亚洲一区二区三区丝袜|
国产精品亚洲一区二区三区久久|
午夜在线视频一区二区三区|
乱人伦一区二区三区|
韩国福利一区二区三区高清视频
|
日韩在线视频一区|
精品在线视频一区|