CSS 之僞類及僞元素

時間 2019-11-20

標籤 css 元素欄目 CSS 简体版

原文原文鏈接

　　僞類和僞元素用起來很是的方便，在查閱資料及測試後整理下來。php

1、僞類css

　　CSS 僞類用於向某些選擇器添加特殊的效果。僞類對元素進行分類是基於特徵(characteristics)而不是它們的名字、屬性或者內容；原則上特徵是不能夠從文檔樹上推斷獲得的。html

　　僞類即 CSS 內植類，CSS 內部自己賦予它一些特性和功能，也就是不用再class=...或id=...就能夠用僞類獲取元素，固然也能夠改變它的部分屬性（如： a:link{color:#FF0000;}）。前端

屬性	描述	通俗說明	CSS
:active	向被激活的元素添加樣式。	用鼠標點擊時，元素增長特效，鼠標鬆開時，特效消失。多用在按鈕的點擊上。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	元素得到焦點時，元素增長特效，失去焦點時，特效消失。多用在讓點擊以後的元素一直擁有某些樣式，active作不到，能夠用在<input>標籤上。	2
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。	當鼠標懸浮在元素上方時，增長特效，鼠標離開元素時，特效消失。常與cursor屬性同時使用，當屬性值爲pointer時，光標位於元素上方時會變成手型。cursor還有url屬性，其爲設置圖片地址。	1
:link	向未被訪問的連接添加樣式。	連接點擊以前添加某些樣式。	1
:visited	向已被訪問的連接添加樣式。	連接點擊以後添加某些樣式。	1
:first-child	向元素的第一個子元素添加樣式。	對某元素的第一個子元素添加樣式，經常使用在ol,ul下面的li，或者tr下面的td或th上等。	2
:lang	向帶有指定 lang 屬性的元素添加樣式。		2

　　測試Demo源碼，以下：git

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    div{ line-height:30px; }
    #divActive:active{ background-color:red; }
    #divHover:hover{ background-color:red; cursor:pointer; }
    #txtFocus:focus{ background-color:red; }
    div ul li:first-child{ background-color:red; }
    div a:link{ background-color:red; }
    div a:visited{ background-color:blue; }
    div a:visited{ background-color:blue; }
    div input:lang(fr){ background-color:red; }
  </style>
</head>
<body>
    <div id="divActive">測試Active</div>
    <div id="divHover">測試Hover</div>
    <div id="divFocus"><input id="txtFocus" type="text"></div>
    <div id="divFirst-child">
      <ul>
        <li>老大</li>
        <li>老二</li>
        <li>老三</li>
      </ul>
    </div>
    <div><a href="#">超連接</a></div>
    <div>
      <input id="text" type="text" value="文本" lang="fr" />
    </div>
</body>
</html>

2、僞元素github

屬性	描述	通俗說明	CSS
:first-letter	向文本的第一個字母添加特殊樣式。		1
:first-line	向文本的首行添加特殊樣式。		1
:before	在元素以前添加內容。	在元素文檔流前添加內容。經常使用於隱形的提示信息內容。	2
:after	在元素以後添加內容。	在元素文檔流後添加內容。經常使用於隱形的提示信息內容。	2

　　注意：僞元素若是沒有設置「content」屬性，僞元素是無用的。若是不想設置內容，能夠設置content屬性爲空引用 content:""。插入的內容在頁面的源碼裏是不可見的，只能在css裏可見。CSS繼承規則適用於插入的元素，插入的內容將是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的「前」或「後」。web

　　以：before爲例測試Demo代碼，以下：瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        input{ display: block; }
        body *:before{ content: "before"; color: red; }
    </style>
</head>
<body>
    <h1>HTML控件僞元素支持測試</h1>
    <input id="button" type="button" value="普通按鈕" />
    <input id="reset" type="reset" value="重置" />
    <input id="submit" type="submit" value="提交" />
    <input id="text" type="text" value="文本" lang="fr" />
    <input id="file" type="file" value="文件" />
    <input id="password" type="password" />
    <input id="checkbox" type="checkbox" />
    <input id="radioY" type="radio" name="sel" value="Yes" />
    <input id="radioN" type="radio" name="sel" value="No" />
    <div><input id="cbN" type="radio" name="sel" /></div>
    <input id="hid" type="hidden" />
    <textarea id="txt" rows="2" cols="20"></textarea>
    <table style="width:100%;"><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table>
    <img id="img" src="" alt="圖片" />
    <select id="sel">
        <option>請選擇</option>
    </select>
    <hr />
    <div id="div"></div>
</body>
</html>