整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端-html和css基礎知識

          TML(網頁)

          Web領域的一些基本概念。

          WEB

          Web(World Wide Web)叫全球廣域網,俗稱萬維網(www)。

          W3C

          W3C(World Wide Web Consortium)叫萬維網聯盟,是國際最著名的標準化組織,制定了web標準。

          WEB標準

          一個網頁包含了html元素 Css JavaScript,Html元素決定了網頁結構,Css進行了修飾美化,JavaScript控制了交互行為和動態效果。

          web標準包含了下面三個方面:

          • 結構標準(HTML):用于對網頁元素進行整理和分類。
          • 表現標準(CSS):用于設置網頁元素的版式、顏色、大小等外觀樣式。
          • 行為標準(JavaScript):用于定義網頁的交互和行為。

          HTML定義

          Html不是一種編程語言,而是描述性的標記語言,主要作用是定義內容的結構。

          2014年10月萬維網聯盟(W3C)完成了HTML5標準制定,是目前最新的HTM版本。

          HTML5的出世,標志著web進入一個富客戶端(具有很強的交互性和體驗的客戶端程序)時代,像APP網頁,小程序都是HTML5的應用場景。

          Html5新特性:

          • 用于繪畫的 canvas 元素。
          • 用于媒介回放的 video 和 audio 元素。
          • 對本地離線存儲的更好的支持。
          • 新的特殊內容元素,比如 article、footer、header、nav、section。
          • 新的表單控件,比如 calendar、date、time、email、url、search。

          頁面基本結構

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8"> <!--字符集-->
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
              <meta name="Author" content="">
              <meta name="Keywords" content="關鍵詞" />
              <meta name="Description" content="頁面描述" />
              <title>頁面標題</title>
          </head>
          <body>
          
          </body>
          </html>

          關于viewport

          viewport用戶網頁的可視區域,一個針對移動網頁優化的頁面 viewport meta 標簽如下:

          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          • width:控制 viewport 的大小,可以指定的一個值,如 600,或者特殊的值,如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。
          • height:和 width 相對應,指定高度。
          • initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。
          • maximum-scale:允許用戶縮放到的最大比例。
          • minimum-scale:允許用戶縮放到的最小比例。
          • user-scalable:用戶是否可以手動縮放。

          常見元素

          head區域元素:

          meta title style link script base。

          body區域元素:

          • div、section、article、aside、header、footer
          • p
          • span、em、strong
          • table、thead、tbody、tr、td
          • ul、ol、dl、dt、dd
          • a
          • form、input、select、textarea、button

          元素分類

          塊級元素:每個元素都是獨占一行

          • address – 地址
          • blockquote – 塊引用
          • center – 舉中對齊塊
          • dir – 目錄列表
          • div – 常用塊級容易,也是css layout的主要標簽
          • dl – 定義列表
          • fieldset – form控制組
          • form – 交互表單
          • h1-h6 – 標題
          • hr – 水平分隔線
          • isindex – input prompt
          • menu – 菜單列表
          • noframes – frames可選內容,(對于不支持frame的瀏覽器顯示此區塊內容)
          • noscript – )可選腳本內容(對于不支持script的瀏覽器顯示此內容)
          • ol – 排序表單
          • p – 段落
          • pre – 格式化文本
          • table – 表格
          • ul – 非排序列表

          行內元素:元素在同一行水平排列

          • a – 錨點
          • abbr – 縮寫
          • acronym – 首字
          • b – 粗體
          • big – 大字體
          • br – 換行
          • em – 強調
          • font – 字體設定(不推薦)
          • i – 斜體
          • img – 圖片
          • input – 輸入框
          • label – 表格標簽
          • s – 中劃線(不推薦)
          • select – 項目選擇
          • small – 小字體文本
          • span – 常用內聯容器,定義文本內區塊
          • strike – 中劃線
          • strong – 粗體強調
          • sub – 下標
          • sup – 上標
          • textarea – 多行文本輸入框
          • tt – 電傳文本
          • u – 下劃線
          • var – 定義變量

          inline-block:元素可以排列在同一行顯示,并且可以設置一些塊元素屬性

          通過Css:display:inline-block 改變元素。

          元素默認樣式

          很多元素都自帶了默認樣式,不同瀏覽器下默認樣式表現不一致,為了統一或者滿足一些需求我們需求將所有默認樣式清空,這種處理方式又稱為 Css Reset,比如:

          *{
              margin: 0;
              padding: 0;
          }

          另外一種方案使用normalize.css,它將不同瀏覽器下的默認樣式進行了統一,

          https://github.com/necolas/normalize.css

          CSS(層疊樣式表)

          Css的單位

          html中的單位是像素px

          絕對單位

          • in:英寸,1in = 2.54cm = 96px
          • pc:皮卡,1皮卡 = 1/16英寸
          • pt:點,1點 = 1/72英寸
          • px:像素,1點 = 1/96英寸

          相對單位

          • em:font-size中相對于父元素的字體大小,在元素屬性中使用是相對于自身字體大小
          • rem:根元素的字體大小,在元素屬性中使用是相對于根元素字體大小
          • 1h:元素的line-height
          • vw:視窗寬度的1%
          • vh:視窗高度的1%
          • vmin:視窗較小尺寸的1%
          • vmax:視圖大尺寸的1%

          字體屬性

          屬性:字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性(粗體、斜體、下劃線)

          p{
              font-size: 20px;        /*字體大小*/
              line-height: 30px;      /*行高*/
              font-family: PingFang SC;   /*字體類型:顯示PingFang SC,沒有就顯示默認*/
              font-style: italic ;        /*italic表示斜體,normal表示不傾斜*/
              font-weight: bold;  /*粗體或寫(400|500|600)*/
              font-variant: small-caps;  /*小寫變大寫*/
          }

          行高(line-height)

          一般約定行高、字號都是偶數,這樣保證它們的差一定偶數除2得到整數,如下圖所示:

          line-height

          文本垂直居中

          對于單行文本可以設置行高 = 盒子高度

          對于多行元素的垂直對齊,我們可以使用vertical-align: middle屬性,不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

          vertical-align

          vertical-align: baseline;
          vertical-align: sub;
          vertical-align: super;
          vertical-align: text-top;
          vertical-align: text-bottom;
          vertical-align: middle;
          vertical-align: top;
          vertical-align: bottom;
          /* 指定長度值 */
          vertical-align: 10em;
          vertical-align: 4px;
          /* 使用百分比 */
          vertical-align: 20%;
          /* 全局值 */
          vertical-align: inherit;
          vertical-align: initial;
          vertical-align: revert;
          vertical-align: unset;

          文本屬性

          • letter-spacing: 0.5em ; 單個字母之間的間距。
          • word-spacing: 1em; 單詞之間的間距。
          • text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
          • color:red; 字體顏色。
          • text-align: center; 文字對齊方式,屬性值可以是:left、right、center、justify。
          • text-transform: lowercase; uppercase(大寫)、lowercase(小寫)capitalize(首字母大寫)。
          • text-indent:10px; 文本首行縮進。
          • text-shadow:2px 2px #ff0000; 文字陰影效果。
          • white-space: normal; 設置元素空白處理,normal,nowrap,break-spaces。

          Overflow屬性

          內容溢出處理

          • visible:默認值,多余的內容會全部顯示出來。
          • hidden:超過元素的內容隱藏。
          • auto:內容超出顯示滾動條。
          • scroll:Windows總是顯示滾動條。Mac和auto 屬性相同。

          濾鏡

          filter:gray()

          背景屬性

          • background-color:#fff; 設置背景顏色。
          • background-image:url(img.png); 設置圖像為背景。
          • background-repeat: no-repeat; no-repeat不要平鋪,repeat-x橫向平鋪;repeat-y縱向平鋪。
          • background-position:center top; 設置背景圖片在容器的位置,top,bottom,left,right,center。
          • background-attachment:scroll; 設置背景圖片隨滾動條移動,scroll(跟隨滾動),fixed(固定)。
          • background-origin:border-box; css3,border-box(背景相對于邊框框定位),padding-box(背景相對于填充框定位),content-box(背景相對于內容框定位)。
          • background-clip:border-box; css3,背景裁切。
          • background-size:cover; css3,調整尺寸,contain(在不裁剪或拉伸圖像的情況下,在其容器內盡可能大地縮放圖像),cover(盡可能大地縮放圖像以填充容器,必要時拉伸圖像。),auto(在相應的方向上縮放背景圖像,以保持其固有比例。)。

          優先級

          理解優先級很重要,有助于我們排查一些問題。瀏覽器將優先級分為兩部分:HTML的行內樣式和選擇器的樣式。

          行內樣式

          行內樣式是直接作用在元素,它的優先級高于選擇器樣式,使用!important可以提高樣式表的優先級。

          <div style="font-size:16px">
          </div>

          選擇器樣式

          <style type="text/css">
              p{
                font-size: 16px;
              }
          </style>
          <link rel="stylesheet" href="style/app.css">

          優先級規則如下:

          • 如果選擇器的ID數量最多的勝出。
          • 如果ID數量一致,那么擁有最多類的選擇器勝出。
          • 如果以上兩次比較都一致,那么擁有最多標簽名的選擇器勝出。

          優先級

          我們通過下圖這種標記方式,就可以判斷出選擇器的優先級。

          優先級

          兩條經驗法則

          1. 盡量不要使用ID選擇器,因為它會大幅提升優先級。當需要覆蓋這個選擇器時,通常找不到另一個有意義的ID,于是就需要復制原來的選擇器加上另一個類來讓它區別于想要覆蓋的選擇器。
          2. 不要使用!important。它比ID更難覆蓋,一旦用了它,想要覆蓋原先的聲明,就需要再加上一個!important,而且依然要處理優先級的問題。

          基礎選擇器

          • 類型或標簽選擇器,匹配目標元素的標簽名,如 :p,input[type=text],優先級(0,0,1)。
          • 類選擇器,匹配class屬性中有指定類名的元素,如:.box,優先級(0,1,0)。
          • ID選擇器,匹配擁有指定ID屬性的元素,如:#id, 優先級(1,0,0)。
          • 通用選擇器(*),匹配所有元素 ,優先級(0,0,0)。

          組合選擇器

          由多個基礎選擇器組合成的復雜選擇器。

          • 后代組合器(單個空格()表示),比如 .nav li,表示li是一個擁有nav類的元素的后代。
          • 子組合器(>),匹配的元素是直接后代,.parent > .child。
          • 相鄰兄弟組合器(+),匹配的元素緊跟在后面其它元素后面,div + p。
          • 通用兄弟組合器(~),匹配所有跟隨在指定元素之后的兄弟元素,它不會選中目標元素之前的兄弟元素,li.active ~ li。

          復合選擇器

          多個基礎選擇器連起來(中間沒有空格)組成一個復合選擇器(如:ul.nav)。復合選擇器選中的元素將匹配其全部基礎選擇器,.box.nav 可以選中 class="box nav" ,但是不能選中 class="box"。

          偽類選擇器

          用于選中某種特定狀態的元素,優先級(0,1,0)。

          • :first-child——匹配的元素是其父元素的第一個子元素。
          • :last-child——匹配的元素是其父元素的最后一個子元素。
          • :only-child——匹配的元素是其父元素的唯一一個子元素(沒有兄弟元素)。
          • :nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數,該公式指定要選中哪個元素。要了解一個公式的工作原理,請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

          :nth-child(an+b)

          • :nth-last-child(an+b)——類似于:nth-child(),但不是從第一個元素往后數,而是從最后一個元素往前數。括號內的公式與:nth-child()里的公式的規則相同。
          • :first-of-type——類似于:first-child,但不是根據在全部子元素中的位置查找元素,而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
          • :last-of-type——匹配每種類型的最后一個子元素。
          • :only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
          • :nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素,類似于:nth-child。
          • :nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素,從其中最后一個元素往前算,類似于:nth-last-child。
          • :not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器,它只能指定元素本身,無法用于排除祖先元素,同時不允許包含另一個排除選擇器。
          • :focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
          • :hover——匹配鼠標指針正懸停在其上方的元素。
          • :root——匹配文檔根元素。對HTML來說,這是html元素,但是CSS還可以應用到XML或者類似于XML的文檔上,比如SVG。在這些情況下,該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
          • :disabled——匹配已禁用的元素,包括input、select以及button元素。
          • :enabled——匹配已啟用的元素,即那些能夠被激活或者接受焦點的元素。
          • :checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
          • :invalid——根據輸入類型中的定義,匹配有非法輸入值的元素。例如,當<inputtype="email">的值不是一個合法的郵箱地址時,該元素會被匹配。

          更多參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS

          偽元素選擇器

          偽元素選擇器可以向HTML標記中未定義的地方插入內容,優先級(0,0,1)。

          • ::before——創建一個偽元素,使其成為匹配元素的第一個子元素。該元素默認是行內元素,可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現,如:.nav::before。
          • ::after——創建一個偽元素,使其成為匹配元素的最后一個子元素。該元素默認是行內元素,可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現,如:.nav::after。
          • ::first-letter——用于指定匹配元素的第一個文本字符的樣式,如:h1::first-letter。
          • ::first-line——用于指定匹配元素的第一行文本的樣式。
          • ::selection——用于指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數屬性可以使用,包括color、background-color、cursor、text-decoration。

          屬性選擇器

          屬性選擇器用于根據HTML屬性進行匹配元素,優先級(0,1,0)。

          • [attr]——匹配的元素擁有指定屬性attr,無論屬性值是什么,如:input[disabled]。
          • [attr="value"]——匹配的元素擁有指定屬性attr,且屬性值等于指定的字符串值,如:input[type="radio"]。
          • [attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值的開頭是指定的字符串值,例如:a[href^="https"]。
          • [attr*="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值包含指定的字符串值,如:[class*="sprite-"]。
          • [attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值是一個空格分隔的值列表,列表中的某個值等于指定的字符串值,如:a[rel="author"]。
          • [attr|="value"]——匹配的元素擁有指定屬性attr,且屬性值要么等于指定的字符串值,要么以該字符串開頭且緊跟著一個連字符(-)。

          小結

          本文要點回顧,歡迎留言交流。

          • Web中的一些基本概念介紹。
          • Html頁面結構,元素分類。
          • Css優先級。
          • Css選擇器,(基礎選擇器,組合選擇器,復合選擇器,偽類選擇器,偽元素選擇器,屬性選擇器)。

          1.1 onblur和onfocus
          馬克-to-win:onblur失去焦點和onfocus得到焦點事件。

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <head>
          <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
          <SCRIPT LANGUAGE="JavaScript">
          <!--
          function check(a)
          {
          var username = a.value;
          if (username == "")
          {
          /*String.fontcolor() (Method)
          Encapsulates the string within an <FONT COLOR="..."> tag context.*/
          document.getElementById("error").innerHTML = "用戶名不能為空!".fontcolor("red");
          }
          }
          function rese()
          {
          document.getElementById("error").innerHTML = "";
          }
          //-->
          </SCRIPT>
          </HEAD>
          <BODY onload="document.getElementById('u').focus()">

          篇幅有限更多請見擴展鏈接:http://www.mark-to-win.com/tutorial/js_4_onbluronfocus.html「鏈接」

          悉前端的人都會聽過 css 的偽類與偽元素,然而大多數的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發,區分這兩者的區別,并且列出大部分偽類與偽元素的具體用法,即使你有用過偽類與偽元素,但里面總有一兩個你沒見過的吧。

          偽類與偽元素

          先說一說為什么 css 要引入偽元素和偽類,以下是 css2.1 Selectors 章節中對偽類與偽元素的描述:

          CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

          直譯過來就是:css 引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說,偽類和偽元素是用來修飾不在文檔樹中的部分,比如,一句話中的第一個字母,或者是列表中的第一個元素。下面分別對偽類和偽元素進行解釋:

          偽類用于當已有元素處于的某個狀態時,為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的。比如說,當用戶懸停在指定的元素時,我們可以通過:hover 來描述這個元素的狀態。雖然它和普通的 css 類相似,可以為已有的元素添加樣式,但是它只有處于 dom 樹無法描述的狀態下才能為元素添加樣式,所以將其稱為偽類。

          偽元素用于創建一些不在文檔樹中的元素,并為其添加樣式。比如說,我們可以通過:before 來在一個元素前增加一些文本,并為這些文本添加樣式。雖然用戶可以看到這些文本,但是這些文本實際上不在文檔樹中。

          偽類與偽元素的區別

          這里通過兩個例子來說明兩者的區別。

          下面是一個簡單的 html 列表片段:

          <ul>
           <li>我是第一個</li>
           <li>我是第二個</li>
          </ul>
          

          如果想要給第一項添加樣式,可以在為第一個<li> 添加一個類,并在該類中定義對應樣式:

          HTML:

          <ul>
           <li class="first-item">我是第一個</li>
           <li>我是第二個</li>
          </ul>
          

          CSS:

          li.first-item {
           color: orange
          }
          

          如果不用添加類的方法,我們可以通過給設置第一個<li> 的:first-child 偽類來為其添加樣式。這個時候,被修飾的<li> 元素依然處于文檔樹中。

          CSS:

          li:first-child {
           color: orange
          }
          

          下面是另一個簡單的 html 段落片段:

          <p>Hello World, and wish you have a good day!</p>
          

          如果想要給該段落的第一個字母添加樣式,可以在第一個字母中包裹一個<span> 元素,并設置該 span 元素的樣式

          HTML:

          <p><span class="first">H</span>ello World, and wish you have a good day!</p>
          

          CSS:

          .first {
           font-size: 5em;
          }
          

          如果不創建一個<span> 元素,我們可以通過設置<p> 的:first-letter 偽元素來為其添加樣式。這個時候,看起來好像是創建了一個虛擬的<span> 元素并添加了樣式,但實際上文檔樹中并不存在這個<span> 元素。

          CSS:

          p:first-letter {
           font-size: 5em;
          }
          

          從上述例子中可以看出,偽類的操作對象是文檔樹中已有的元素,而偽元素則創建了一個文檔數外的元素。因此,偽類與偽元素的區別在于:有沒有創建一個文檔樹之外的元素。

          偽元素是使用單冒號還是雙冒號?

          CSS3 規范中的要求使用雙冒號 (::) 表示偽元素,以此來區分偽元素和偽類,比如::before 和::after 等偽元素使用雙冒號 (::),:hover 和:active 等偽類使用單冒號 (:)。除了一些低于 IE8 版本的瀏覽器外,大部分瀏覽器都支持偽元素的雙冒號 (::) 表示方法。

          然而,除了少部分偽元素,如::backdrop 必須使用雙冒號,大部分偽元素都支持單冒號和雙冒號的寫法,比如::after,寫成:after 也可以正確運行。

          對于偽元素是使用單冒號還是雙冒號的問題,w3c 標準中的描述如下:

          Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { ... }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

          大概的意思就是:雖然 CSS3 標準要求偽元素使用雙冒號的寫法,但也依然支持單冒號的寫法。為了向后兼容,我們建議你在目前還是使用單冒號的寫法。

          實際上,偽元素使用單冒號還是雙冒號很難說得清誰對誰錯,你可以按照個人的喜好來選擇某一種寫法。

          偽類與偽元素的具體用法

          這一章以含義解析和例子的方式列出大部分的偽類和偽元素的具體用法。下面是根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖:

          某些偽類或偽元素仍然處于試驗階段,在使用前建議先在 Can I Use 等網站查一查其瀏覽器兼容性。接下來,我們會一一列舉每種用法的具體運用,大家可以更直觀的理解和記憶,處于試驗階段的偽類或偽元素會在標題中標注。

          偽類

          狀態

          由于狀態偽類的用法大家都十分熟悉,這里就不用例子說明了。

          1 :link

          選擇未訪問的鏈接

          2 :visited

          選擇已訪問的鏈接

          3 :hover

          選擇鼠標指針浮動在其上的元素

          4 :active

          選擇活動的鏈接

          5 :focus

          選擇獲取焦點的輸入字段

          結構化

          1 :not

          一個否定偽類,用于匹配不符合參數選擇器的元素。

          如下例,除了第一個<li> 元素外,其他<li> 元素的文本都會變為橙色。

          HTML:

          <ul>
           <li class="first-item">一些文本</li>
           <li>一些文本</li>
           <li>一些文本</li>
           <li>一些文本</li>
          </ul>
          

          CSS:

          li:not(.first-item) {
           color: orange;
          }
          

          2 :first-child

          匹配元素的第一個子元素。

          如下例,第一個<li> 元素的文本會變為橙色。

          HTML:

          <ul>
           <li>這里的文本是橙色的</li>
           <li>一些文本</li>
           <li>一些文本</li>
          </ul>
          

          CSS:

          li:first-child {
           color: orange;
          }
          

          3 : last-child

          匹配元素的最后一個子元素。

          如下例,最后一個<li> 元素的文本會變為橙色。

          HTML:

          <ul>
           <li>一些文本</li>
           <li>一些文本</li>
           <li>這里的文本是橙色的</li>
          </ul>
          

          CSS:

          li:last-child {
           color: orange;
          }
          

          4 first-of-type

          匹配屬于其父元素的首個特定類型的子元素的每個元素。

          如下例,第一個<li> 元素和第一個<span> 元素的文本會變為橙色。

          HTML:

          <ul>
           <li>這里的文本是橙色的</li>
           <li>一些文本 <span>這里的文本是橙色的</span></li>
           <li>一些文本</li>
          </ul>
          

          CSS:

          ul :first-of-type {
           color: orange;
          }
          

          5 :last-of-type

          匹配元素的最后一個子元素。

          如下例,最后一個<li> 元素的文本會變為橙色。

          HTML:

          <ul>
           <li>一些文本<span>一些文本</span> <span>這里的文本是橙色的</span></li>
           <li>一些文本</li>
           <li>這里的文本是橙色的</li>
          </ul>
          

          CSS:

          ul :last-of-type {
           color: orange;
          }
          

          6 :nth-child

          :nth-child 根據元素的位置匹配一個或者多個元素,它接受一個 an+b 形式的參數,an+b 匹配到的元素示例如下:

          • 1n+0,或 n,匹配每一個子元素。
          • 2n+0,或 2n,匹配位置為 2、4、6、8… 的子元素,該表達式與關鍵字 even 等價。
          • 2n+1 匹配位置為 1、3、5、7… 的子元素、該表達式與關鍵字 odd 等價。
          • 3n+4 匹配位置為 4、7、10、13… 的子元素。

          如下例,有以下 HTML 列表:

          <ol>
           <li>Alpha</li>
           <li>Beta</li>
           <li>Gamma</li>
           <li>Delta</li>
           <li>Epsilon</li>
           <li>Zeta</li>
           <li>Eta</li>
           <li>Theta</li>
           <li>Iota</li>
           <li>Kappa</li>
          </ol>
          

          CSS:

          選擇第二個元素,”Beta” 會變成橙色:

          ol :nth-child(2) {
           color: orange;
          }
          

          選擇位置序號是 2 的倍數的元素,”Beta”, “Delta”, “Zeta”, “kappa” 會變成橙色:

          ol :nth-child(2n) {
           color: orange;
          }
          

          選擇位置序號為偶數的元素:

          ol :nth-child(even) {
           color: orange;
          }
          

          選擇從第 6 個開始,位置序號是 2 的倍數的元素,”Zeta”, “Theta”, “Kappa” 會變成橙色:

          ol :nth-child(2n+6) {
           color: orange;
          }
          

          7 :nth-last-child

          :nth-last-child 與:nth-child 相似,不同之處在于它是從最后一個子元素開始計數的。

          8 :nth-of-type

          :nth-of-type 與 nth-child 相似,不同之處在于它是只匹配特定類型的元素。

          如下例,第二個<p> 元素會變為橙色。

          HTML:

          <article>
           <h1>我是標題</h1>
           <p>一些文本</p>
           <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
           <p>這里的文本是橙色的</p>
          </article>
          

          CSS:

          p:nth-of-type(2) {
           color: orange;
          }
          

          9 :nth-last-type

          :nth-last-of-type 與 nth-of-type 相似,不同之處在于它是從最后一個子元素開始計數的。

          10 :only-child

          當元素是其父元素中唯一一個子元素時,:only-child 匹配該元素。

          HTML:

          <ul>
           <li>這里的文本是橙色的</li>
          </ul>
           
          <ul>
           <li>一些文本</li>
           <li>一些文本</li>
          </ul>
          

          CSS:

          ul :only-child {
           color: orange;
          }
          

          11 :only-of-type

          當元素是其父元素中唯一一個特定類型的子元素時,:only-child 匹配該元素。

          如下例,第一個 ul 元素只有一個 li 類型的元素,該 li 元素的文本會變為橙色。

          HTML:

          <ul>
           <li>這里的文本是橙色的</li>
           <p>這里不是橙色</p>
          </ul>
           
          <ul>
           <li>一些文本</li>
           <li>一些文本</li>
          </ul>
          

          CSS:

          li:only-of-type {
           color: orange;
          }
          

          12 :target

          當 URL 帶有錨名稱,指向文檔內某個具體的元素時,:target 匹配該元素。

          如下例,url 中的 target 命中 id 值為 target 的 article 元素,article 元素的背景會變為黃色。

          URL:

          http://example.com/#target

          HTML:

          <article id="target">
           <h1><code>:target</code> pseudo-class</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
          </article>
          

          CSS:

          :target {
           background: yellow;
          }
          

          表單相關

          1 :checked

          :checked 匹配被選中的 input 元素,這個 input 元素包括 radio 和 checkbox。

          如下例,當復選框被選中時,與其相鄰的<label> 元素的背景會變成黃色。

          HTML:

          <input type="checkbox"/>
          <label>我同意</label>
          

          CSS:

          input:checked + label {
           background: yellow;
          }
          

          2 :default

          :default 匹配默認選中的元素,例如:提交按鈕總是表單的默認按鈕。

          如下例,只有提交按鈕的背景變成了黃色。

          HTML:

          <form action="#">
           <button>重置</button>
           <button type="submit">提交</button>
          </form>
          

          CSS:

          :default {
           background: yellow;
          }
          

          3 :disabled

          :disabled 匹配禁用的表單元素。

          如下例,被禁用 input 輸入框的透明度會變成 50%。

          HTML:

          <input type="text" disabled/>
          

          CSS:

          :disabled {
           opacity: .5;
          }
          

          4 :empty

          :empty 匹配沒有子元素的元素。如果元素中含有文本節點、HTML 元素或者一個空格,則:empty 不能匹配這個元素。

          如下例,:empty 能匹配的元素會變為黃色。

          第一個元素中有文本節點,所以其背景不會變成黃色;

          第二個元素中有一個空格,有空格則該元素不為空,所以其背景不會變成黃色;

          第三個元素中沒有任何內容,所以其背景會變成黃色;

          第四個元素中只有一個注釋,此時該元素是空的,所以其背景會變成黃色;

          HTML:

          <div>這個容器里的背景是橙色的</div>
          <div> </div>
          <div></div>
          <div><!-- This comment is not considered content --></div>
          

          CSS:

          div {
           background: orange;
           height: 30px;
           width: 200px;
          }
           
          div:empty {
           background: yellow;
          }
          

          5 :enabled

          :enabled 匹配沒有設置 disabled 屬性的表單元素。

          6 :in-range

          :in-range 匹配在指定區域內元素。

          如下例,當數字選擇器的數字在 5 到 10 是,數字選擇器的邊框會設為綠色。

          HTML:

          <input type="number" min="5" max="10">
          

          CSS:

          input[type=number] {
           border: 5px solid orange;
          }
           
          input[type=number]:in-range {
           border: 5px solid green;
          }
          

          7 :out-of-range

          :out-of-range 與:in-range 相反,它匹配不在指定區域內的元素。

          8 :indeterminate

          indeterminate 的英文意思是“ 不確定的”。當某組中的單選框或復選框還沒有選取狀態時,:indeterminate 匹配該組中所有的單選框或復選框。

          如下例,當下面的一組單選框沒有一個處于被選中時,與 input 相鄰的 label 元素的背景會被設為橙色。

          HTML:

          <ul>
           <li>
           <input type="radio" name="list" id="option1">
           <label for="option1">Option 1</label>
           </li>
           <li>
           <input type="radio" name="list" id="option2">
           <label for="option2">Option 2</label>
           </li>
           <li>
           <input type="radio" name="list" id="option3">
           <label for="option3">Option 3</label>
           </li>
          </ul>
          

          CSS:

          :indeterminate + label {
           background: orange;
          }
          

          9 :valid

          :valid 匹配條件驗證正確的表單元素。

          如下例,當 email 輸入框內的值符合 email 格式時,輸入框的邊框會被設為綠色。

          HTML:

          <input type="email"/>
          

          CSS:

          input[type=email]:valid {
           border: 1px solid green;
          }
          

          10 :invalid

          :invalid 與:valid 相反,匹配條件驗證錯誤的表單元素。

          11 :optional

          :optional 匹配是具有 optional 屬性的表單元素。當表單元素沒有設置為 required 時,即為 optional 屬性。

          如下例,第一個 input 的背景不會被設為黃色,第二個 input 的背景會被設為黃色。

          HTML:

          <input type="text" required />
          <input type="text" />
          

          CSS:

          :optional {
           background: yellow;
          }
          

          12 :required

          :required 與:optional 相反匹配設置了 required 屬性的表單元素。

          13 :read-only

          :read-only 匹配設置了只讀屬性的元素,表單元素可以通過設置“readonly” 屬性來定義元素只讀。

          如下例,input 元素的背景會被設為黃色。

          HTML:

          <input type="text" value="I am read only" readonly>
          

          CSS:

          input:read-only {
           background-color: yellow;
          }
          

          14 :read-write

          :read-write 匹配處于編輯狀態的元素。input,textarea 和設置了 contenteditable 的 HTML 元素獲取焦點時即處于編輯狀態。

          如下例,input 輸入框和富文本框獲取焦點時,背景變成黃色。

          HTML:

          <input type="text" value="獲取焦點時背景變黃"/>
           
          <div class="editable" contenteditable>
           <h1>點擊這里可以編輯</h1>
           <p>獲取焦點時背景變黃</p>
          </div>
          

          CSS:

          :read-write:focus {
           background: yellow;
          }
          

          15 :scope(處于試驗階段)

          :scope 匹配處于 style 作用域下的元素。當 style 沒有設置 scope 屬性時,style 內的樣式會對整個 html 起作用。

          如下例,第二個 section 中的元素的文本會變為斜體。

          HTML:

          <article>
           <section>
           <h1>很正常的一些文本</h1>
           <p>很正常的一些文本</p>
           </section>
           <section>
           <style scoped>
           :scope {
           font-style: italic;
           }
           </style>
           <h1>這里的文本是斜體的</h1>
           <p>這里的文本是斜體的</p>
           </section>
          </article>
          

          注:目前支持這個偽類的瀏覽器只有火狐。

          語言相關

          1 :dir(處于實驗階段)

          :dir 匹配指定閱讀方向的元素,當 HTML 元素中設置了 dir 屬性時該偽類才能生效。現時支持的閱讀方向有兩種:ltr(從左往右)和 rtl(從右往左)。目前,只有火狐瀏覽器支持:dir 偽類,并在火狐瀏覽器中使用時需要添加前綴 ( -moz-dir() )。

          如下例,p 元素中的阿拉伯語(阿拉伯語是從右往左閱讀的)文本會變成橙色。

          HTML:

          <article dir="rtl">
          <p>??????? ???? ?? ???? ?????? ?????? ???? ????? ??????? ????? ??? ???????? ?????? ?????? ??? ????? ?????.</p>
          </article>
          

          CSS:

          article :-moz-dir(rtl) {
           color: orange;
          }
           
          /* unprefixed */
          article :dir(rtl) {
           color: orange;
          }
          

          如下例,p 元素中的英語文本會變成藍色

          HTML:

          <article dir="ltr">
           <p>?If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p>
          </article>
          

          CSS:

          article :-moz-dir(ltr) {
           color: blue;
          }
           
          /* unprefixed */
          article :dir(ltr) {
           color: blue;
          }
          

          2 :lang

          :lang 匹配設置了特定語言的元素,設置特定語言可以通過為了 HTML 元素設置 lang=”” 屬性,設置 meta 元素的 charset=”” 屬性,或者是在 http 頭部上設置語言屬性。

          實際上,lang=”” 屬性不只可以在 html 標簽上設置,也可以在其他的元素上設置。

          如下例,分別給不同的語言設置不同的引用樣式:

          HTML:

          <article lang="en">
           <q>Lorem ipsum dolor sit amet.</q>
          </article>
          <article lang="fr">
           <q>Lorem ipsum dolor sit amet.</q>
          </article>
          <article lang="de">
           <q>Lorem ipsum dolor sit amet.</q>
          </article>
          

          CSS:

          :lang(en) q { quotes: '“' '”'; }
          :lang(fr) q { quotes: '?' '?'; }
          :lang(de) q { quotes: '?' '?'; }
          

          其他

          1 :root

          :root 匹配文檔的根元素。一般的 html 文件的根元素是 html 元素,而 SVG 或 XML 文件的根元素則可能是其他元素。

          如下例,將 html 元素的背景設置為橙色

          :root {
           background: orange;
          }
          

          2.:fullscreen

          :fullscreen 匹配處于全屏模式下的元素。全屏模式不是通過按 F11 來打開的全屏模式,而是通過 Javascript 的 Fullscreen API 來打開的,不同的瀏覽器有不同的 Fullscreen API。目前,:fullscreen 需要添加前綴才能使用。

          如下例,當處于全屏模式時,h1 元素的背景會變成橙色

          HTML:

          <h1 id="element">在全屏模式下,這里的文本的背景會變成橙色.</h1>
          <button>進入全屏模式!</button>
          

          JAVASCRIPT:

          var docelem = document.getElementById('element');
          var button = document.querySelector('button');
          button.onclick = function() {
           if (docelem.requestFullscreen) {
           docelem.requestFullscreen();
           }else if (docelem.webkitRequestFullscreen) {
           docelem.webkitRequestFullscreen();
           } else if(docelem.mozRequestFullScreen) {
           docelem.mozRequestFullScreen();
           } else if(docelem.msRequestFullscreen) {
           docelem.msRequestFullscreen();
           }
          }
          

          CSS:

          h1:fullscreen {
           background: orange;
          }
           
          h1:-webkit-full-screen {
           background: orange;
          }
           
          h1:-moz-full-screen {
           background: orange;
          }
           
          h1:-ms-fullscreen {
           background: orange;
          }
          

          偽元素

          1 ::before/:before

          :before 在被選元素前插入內容。需要使用 content 屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。

          HTML:

          <h1>World</h1>
          

          CSS:

          h1:before {
           content: "Hello ";
          }
          

          2 ::after/:after

          :after 在被元素后插入內容,其用法和特性與:before 相似。

          3 ::first-letter/:first-letter

          :first-letter 匹配元素中文本的首字母。被修飾的首字母不在文檔樹中。

          CSS:

          h1:first-letter {
           font-size: 5em;
          }
          

          4 ::first-line/:first-line

          :first-line 匹配元素中第一行的文本。這個偽元素只能用在塊元素中,不能用在內聯元素中。

          CSS:

          p:first-line {
           background: orange;
          }
          

          5 ::selection

          ::selection 匹配用戶被用戶選中或者處于高亮狀態的部分。在火狐瀏覽器使用時需要添加-moz 前綴。該偽元素只支持雙冒號的形式。

          CSS:

          ::-moz-selection {
           color: orange;
           background: #333;
          }
           
          ::selection {
           color: orange;
           background: #333;
          }
          

          6 ::placeholder

          ::placeholder 匹配占位符的文本,只有元素設置了 placeholder 屬性時,該偽元素才能生效。

          該偽元素不是 CSS 的標準,它的實現可能在將來會有所改變,所以要決定使用時必須謹慎。

          在一些瀏覽器中(IE10 和 Firefox18 及其以下版本)會使用單冒號的形式。

          HTML:

          <input type="email" placeholder="name@domain.com">
          

          CSS:

          input::-moz-placeholder {
           color:#666;
          }
           
          input::-webkit-input-placeholder {
           color:#666;
          }
           
          /* IE 10 only */
          input:-ms-input-placeholder {
           color:#666;
          }
           
          /* Firefox 18 and below */
          input:-moz-input-placeholder {
           color:#666;
          }
          

          7 ::backdrop(處于試驗階段)

          ::backdrop 用于改變全屏模式下的背景顏色,全屏模式的默認顏色為黑色。該偽元素只支持雙冒號的形式

          HTML:

          <h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
          <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
          

          CSS:

          h1:fullscreen::backdrop {
           background: orange;
          }
          

          轉載自:http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/


          主站蜘蛛池模板: 精品爆乳一区二区三区无码av| 一区二区三区免费在线视频| 国产乱码精品一区二区三区香蕉| 国产人妖在线观看一区二区| 日韩电影一区二区三区| 无码人妻精品一区二区三区在线| 精品一区二区三区在线观看l| 国产午夜精品一区二区三区小说 | 男人免费视频一区二区在线观看| 日韩爆乳一区二区无码| 激情综合丝袜美女一区二区| 国产乱码精品一区二区三区香蕉| 无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看 | 亚洲一区电影在线观看| 视频一区二区中文字幕| 亚洲日本va一区二区三区| 国产激情无码一区二区app| 国产一区二区影院| 亚洲AV成人精品日韩一区| 一区二区三区国产精品| 亚洲成av人片一区二区三区| 国产萌白酱在线一区二区| 乱码人妻一区二区三区| 国产精品一级香蕉一区| 亚洲一区免费视频| 午夜影视日本亚洲欧洲精品一区 | 国产成人精品一区在线| 无码精品人妻一区二区三区免费 | 国模极品一区二区三区| 亚洲性无码一区二区三区| 精品一区二区三区无码免费视频| 国产在线精品一区二区中文| 中文字幕在线观看一区| 国产成人久久精品麻豆一区| 无码AV一区二区三区无码| 日本一区二区三区精品国产 | 欧亚精品一区三区免费| 亚洲AV无码片一区二区三区| 亚洲爆乳精品无码一区二区| 亚洲AV无码一区二区三区牲色| 亚洲精品色播一区二区|