总结伪类与伪元素_html/css_WEB-ITnose

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

li.first-item {    color: orange}

li:first-child {    color: orange}

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

.first {    font-size: 5em;}

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

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

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

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

li:first-child {    color: orange;}

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

li:last-child {    color: orange;}

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

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

<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>

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

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

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

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

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

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

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

ul :only-child {    color: orange;}

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

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

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

:target {    background: yellow;}

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

input:checked + label {    background: yellow;}

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

:default  {    background: yellow;}

<input type="text" disabled/>

:disabled {    opacity: .5;}

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

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

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

<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>

:indeterminate + label {    background: orange;}

<input type="email"/>

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

:optional {    background: yellow;}

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

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

<input type="text" value="获取焦点时背景变黄"/> <div class="editable" contenteditable>    <h1>点击这里可以编辑</h1>    <p>获取焦点时背景变黄</p></div>

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

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

<article dir="rtl"><p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p></article>

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

<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>

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

<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>

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

:root {    background: orange;}

<h1 id="element">在全屏模式下，这里的文本的背景会变成橙色.</h1><button>进入全屏模式!</button>

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();    }}

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

<h1>World</h1>

h1:before {    content: "Hello ";}

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

p:first-line {    background: orange;}

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

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

 <strong>CSS:</strong>

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;}

<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>

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