Web領域的一些基本概念。
Web(World Wide Web)叫全球廣域網,俗稱萬維網(www)。
W3C(World Wide Web Consortium)叫萬維網聯盟,是國際最著名的標準化組織,制定了web標準。
一個網頁包含了html元素 Css JavaScript,Html元素決定了網頁結構,Css進行了修飾美化,JavaScript控制了交互行為和動態效果。
web標準包含了下面三個方面:
Html不是一種編程語言,而是描述性的標記語言,主要作用是定義內容的結構。
2014年10月萬維網聯盟(W3C)完成了HTML5標準制定,是目前最新的HTM版本。
HTML5的出世,標志著web進入一個富客戶端(具有很強的交互性和體驗的客戶端程序)時代,像APP網頁,小程序都是HTML5的應用場景。
Html5新特性:
<!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 meta 標簽如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
head區域元素:
meta title style link script base。
body區域元素:
塊級元素:每個元素都是獨占一行
行內元素:元素在同一行水平排列
inline-block:元素可以排列在同一行顯示,并且可以設置一些塊元素屬性
通過Css:display:inline-block 改變元素。
很多元素都自帶了默認樣式,不同瀏覽器下默認樣式表現不一致,為了統一或者滿足一些需求我們需求將所有默認樣式清空,這種處理方式又稱為 Css Reset,比如:
*{
margin: 0;
padding: 0;
}
另外一種方案使用normalize.css,它將不同瀏覽器下的默認樣式進行了統一,
https://github.com/necolas/normalize.css
html中的單位是像素px
絕對單位
相對單位
屬性:字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性(粗體、斜體、下劃線)
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;
內容溢出處理
filter:gray()
理解優先級很重要,有助于我們排查一些問題。瀏覽器將優先級分為兩部分:HTML的行內樣式和選擇器的樣式。
行內樣式
行內樣式是直接作用在元素,它的優先級高于選擇器樣式,使用!important可以提高樣式表的優先級。
<div style="font-size:16px">
</div>
選擇器樣式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">
優先級規則如下:
優先級
我們通過下圖這種標記方式,就可以判斷出選擇器的優先級。
優先級
兩條經驗法則
由多個基礎選擇器組合成的復雜選擇器。
多個基礎選擇器連起來(中間沒有空格)組成一個復合選擇器(如:ul.nav)。復合選擇器選中的元素將匹配其全部基礎選擇器,.box.nav 可以選中 class="box nav" ,但是不能選中 class="box"。
用于選中某種特定狀態的元素,優先級(0,1,0)。
:nth-child(an+b)
更多參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS
偽元素選擇器可以向HTML標記中未定義的地方插入內容,優先級(0,0,1)。
屬性選擇器用于根據HTML屬性進行匹配元素,優先級(0,1,0)。
本文要點回顧,歡迎留言交流。
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 匹配到的元素示例如下:
如下例,有以下 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/
*請認真填寫需求信息,我們會在24小時內與您取得聯系。