CSS3僞類選擇器

時間 2019-11-14

標籤 css3 css 選擇器欄目 CSS 简体版

原文原文鏈接

C3僞類選擇器html

*什麼是僞類選擇器?
　　*更改元素的不一樣的狀態的樣式
　　　　*:hover :link :visited :activegoogle

一、目標僞類
　　*什麼是目標僞類
　　　　　*突出顯示活動的HTML錨，用於選取當前活動的目標元素
　　　　　　　*語法:
　　　　　　　　　p:target
　　　　　　　　　p:targeturl

二、元素狀態僞類spa

　　*什麼是元素狀態僞類
　　　　主要匹配元素的禁用、啓用、選中狀態多數應用在表單元素上
　　*經常使用的狀態僞類
　　　　:disabled 匹配每一個被禁用的元素
　　　　:enabled 匹配每一個已啓用的元素
　　　　:checked 匹配每一個被選中的元素(只用於單選按鈕和複選框)3d

三、結構僞類
　　什麼是結構僞類
　　　　主要從元素的結構(層級結構)上來進行劃分的
何時使用結構僞類
　　　　找第一個子元素、最後一個子元素、沒有子元素、僅僅只包含一個子元素優先使用結構僞類
　　如何使用結構僞類
　　　　:first-child 匹配屬於其父元素的首個子元素
　　　　:last-child 匹配屬於其父元素的最後一個子元素
　　　　:empty 匹配沒有子元素(包含文本)的元素
　　　　<p>這是一個段落</p> 非empty
　　　　<div></div> empty
　　　　:only-child 匹配屬於其父元素的惟一子元素
　　　　<div>
　　　　<span></span>
　　　　<span></span>
　　　　</div>
　　　　<div>
　　　　<span></span>
　　　　</div>code

四、否認僞類
　　匹配非指定元素/選擇器的每一個元素
　　語法:
　　:not(selecotr)
　　eg:
　　　　一、獲取 input 可是 type不是text的全部元素
　　　　　　input[type=text]
　　　　　　input:not([type=text])
　　　　二、獲取除第一個div子元素意外的其餘div子元素
　　　　　　div:first-child
　　　　　　div:not(div:first-child)htm

二、僞元素選擇器
　　主要針對元素中的文本內容進行匹配的。
　　　　一、:first-letter
　　　　　　選取指定選擇器的首字母
　　　　　　　　eg:
　　　　　　　　p:first-letter{}通常用於排版、首字符突出等操做blog

　　　　二、:first-line
　　　　　　選取指定選擇器的首行
　　　　三、::selection
　　　　　　匹配用戶選取的部分utf-8

<!DOCTYPE html>
<html>
 <head>
  <title> 內容生成 </title>
  <meta charset="utf-8" />
  <style>
    /*div.lw:before{
        content:"老王:";
        padding-right:5px;
    }
    div.xm:before{
        content:"小明:";
        padding-right:5px;
    }
    div.content a{
        display:block;
    }
    div.content a:before{
        content:url(Images/m1.gif);
    }*/
    /*內容生成：計數器*/
    /*一、聲明計數器,名稱爲chapter,初始值爲1*/
    body{
        counter-reset:chapter divCounter;
    }
    /*二、在h1中實現數字的增加，即在h1中設置計數器的增量 1*/
    h1{
        counter-increment:chapter 1;
    }
    div{
        counter-increment:divCounter 5;
    }
    /*三、在h1中使用計數器*/
    h1:before{
        content:"第"counter(chapter)"章";
    }
    /*四、在div中使用計數器*/
    div:before{
        content:"第"counter(divCounter)"行";
    }
  </style>
 </head>
 <!-- 
    1、lw 的前面 要添加 老王:
    2、xm 的前面 要添加 小明:
    3、:與其餘文本要有5px間隔
       老王: 今天有.....
 -->
 <body>
  <div class="lw">
    今天下午有時間嗎?
  </div>
  <div class="xm">
    你要幹什麼?
  </div>
  <div class="lw">
    我妹來了，今天下午去接我妹，行嗎?
  </div>
  <div class="xm">
    我去，接你妹!
  </div>
  <div class="lw">
    你妹的。
  </div>
  <div class="content">
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.google.com">谷歌</a>
    <a href="http://www.yahoo.com">雅虎</a>
  </div>
  <h1>Web 基礎知識</h1>
  <h1>HTML 快速入門</h1>
  <h1>網頁中的文本</h1>
 </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。