伪类与伪元素详解

伪类：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的．比如说，当用户悬停在指定的元素时，我们通过：:hover来描述这个元素的状态．虽然它和普通的CSS类相似，可以为已有元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以称其为伪类．

伪类总结图：

伪类.png

伪元素：

伪元素用于创建一些不在文档树中的元素，并为其添加样式．比如说，可以通过：:before来在一个元素前增加一些文本，并为这些文本添加样式，虽然用户可以看到这些文本，但是这些文本实际上不在文档树中．

伪元素总结图：

伪元素.png

举例说明两者的区别：

1.以下是HTML片段：

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

如果想给第一项添加样式，可以再为第一个<li>添加一个类，并在该类中定义对应样式．

 <ul>
      <li class="first-item">我是第一个</li>
      <li>我是第二个</li>
 </ul>
 
 //CSS
 li .first-item{
    color:orange;
 }

如果不用添加类的方法，可以通过给设置第一个<li>的：first-child伪类来为其添加样式：

 li:first-child{
    color:orange; 
 }

2.以下是HTML片段：

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

如果想给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该元素的样式．

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

如果不创建元素，可以通过设置元素的：first-letter伪元素来为其添加样式．

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

伪类的操作对象是文档中已有的元素，而伪元素则创建了一个文档树外的元素．因此，它们的区别在于：有没有创建一个文档树之外的元素

伪元素是使用单冒号还是双冒号？

CSS3规范要求用双冒号（::）．除一些低于IE8版本的浏览器，大部分浏览器都支持双冒号（::）表示方法．但少部分伪元素（::backdrop）必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法．
为了向后兼容，建议目前使用单冒号的写法．（W3C）

伪类分类

状态
1.:link：选择未访问的链接；
2.:visited：选择已访问过的链接；
3.:hover：选择鼠标指针浮动在其上的元素；
4.:active：选择活动的链接；
5.:focus：选择获取焦点的输入字段
结构化

结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素中的样式．

1.:not：一个否定伪类，用于匹配不符合参数选择器的元素。
举例：

//HTML 
<ul>
    <li class="first-item">一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
 </ul>
//CSS
li:not(.first-item) {
   color: orange;
}

2.:first-child：匹配元素的第一个子元素。

<ul>
   <li>这里的文本是橙色的</li>
   <li>一些文本</li>
   <li>一些文本</li>
</ul>
//CSS
li:first-child {
   color: orange;
}

3.:last-child：匹配元素的最后一个子元素。(用法与第一个类似)
4.:first-of-type：匹配属于其父元素的首个特定类型的子元素的每个元素。
举例：

 <ul>
    <li>这里的文本是橙色的</li>
    <li>一些文本 <span>这里的文本是橙色的</span></li>
    <li>一些文本</li>
</ul>
ul :first-of-type {
   color: orange;
}

第一个<li>元素和第一个元素的文本会变为橙色。

5.:last-of-type：匹配属于其父元素的特定类型的最后一个子元素的每个元素。(用法与:first-of-type类似)
6.:nth-child：根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数。
举例：

 <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;
  }//选择第二个元素，”Beta”会变成橙色;
  
  ol :nth-child(2n) {
     color: orange;
  }//选择位置序号是2的倍数的元素，”Beta”, “Delta”, “Zeta”, “kappa”会变成橙色;

  ol :nth-child(even) {
      color: orange;
  }//选择位置序号为偶数的元素

7.:nth-last-child：与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的。
8.:nth-of-type：与:nth-child相似，不同之处在于它是只匹配特定类型的元素。

<article>
    <h1>我是标题</h1>
    <p>一些文本</p>
    <a href="">![](images/rwd.png)</a>
    <p>这里的文本是橙色的</p>
</article>

p:nth-of-type(2) {
    color: orange;
}//第二个<p>元素会变为橙色。

9.:nth-last-of-type：与:nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。
10.:only-child：当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。
11.:only-of-type：当元素是其父元素中唯一一个特定类型的子元素时，:only-of-type匹配该元素。
举例：

//第一个ul元素只有一个li类型的元素，该li元素的文本会变为橙色。
<ul>
    <li>这里的文本是橙色的</li>
    <p>这里不是橙色</p>
</ul>
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

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：匹配被选中的input元素，这个input元素包括radio和checkbox。

 //当复选框被选中时，与其相邻的<label>元素的背景会变成黄色。
 //HTML
 <input type="checkbox"/>
 <label>我同意</label>

 //CSS
 input:checked + label {
    background: yellow;
 }

2.:default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
举例：

//提交按钮的背景变成了黄色。
//HTML
<form action="#">
   <button type="submit">提交</button>
</form>

//CSS
:default  {
   background: yellow;
}

3.:disabled：匹配禁用的表单元素。
举例：

 //被禁用input输入框的透明度会变成50%。
 <input type="text" disabled/>
 
 :disabled {
     opacity: .5;
 }

4.:empty：匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素。
举例：

 //:empty能匹配的元素会变为黄色。
 <div>这个容器里的背景是橙色的</div>
    <div> </div>
    <div></div>
 <div><!-- This comment is not considered content --></div>
 
 div {
    background: orange;
    height: 30px;
    width: 200px;
 }
 div:empty {
    background: yellow;
 }

5.:enabled匹配没有设置disabled属性的表单元素。
6.:in-range匹配在指定区域内元素。
举例：

 //当数字选择器的数字在5到10时，数字选择器的边框会设为绿色。
 <input type="number" min="5" max="10">

 input[type=number] {
    border: 5px solid orange;
 }

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

7.:out-of-range：与:in-range相反，它匹配不在指定区域内的元素。
8.:indeterminate：indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该组中所有的单选框或复选框。
举例：

//当下面的一组单选框没有一个处于被选中时，与``input``相邻的``label``元素的
背景会被设为橙色。
<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;
}

9.:valid：匹配条件验证正确的表单元素。
举例：

 //当email输入框内的值符合email格式时，输入框的边框会被设为绿色。
 <input type="email"/>

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

10.:invalid：与:valid相反，匹配条件验证错误的表单元素。
11.:optional：匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性。
如下例，第一个input的背景不会被设为黄色，第二个input的背景会被设为黄色。

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

 :optional {
    background: yellow;
 }

12.:required：与:optional相反匹配设置了required属性的表单元素。
13.:read-only：匹配设置了只读属性的元素，表单元素可以通过设置“readonly”属性来定义元素只读。

如下例，input元素的背景会被设为黄色。

 <input type="text" value="I am read only" readonly>
 input:read-only {
    background-color: yellow;
 }

14.:read-write匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态。

如下例，input输入框和富文本框获取焦点时，背景变成黄色。

 <input type="text" value="获取焦点时背景变黄"/>

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

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

15.:scope匹配处于style作用域下的元素。当style没有设置scope属性时，style内的样式会对整个html起作用。

如下例，第二个section中的元素的文本会变为斜体。

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

注：目前支持这个伪类的浏览器只有火狐。

语言相关
1.:dir(处于实验阶段)：匹配指定阅读方向的元素，当HTML元素中设置了dir属性时该伪类才能生效。
现时支持的阅读方向有两种：ltr（从左往右）和rtl（从右往左）。目前，只有火狐浏览器支持:dir伪类，并在火狐浏览器中使用时需要添加前缀( -moz-dir() )。

如下例，p元素中的阿拉伯语（阿拉伯语是从右往左阅读的）文本会变成橙色。

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

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

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

如下例，p元素中的英语文本会变成蓝色

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

注：我运行以上两个例子的时候，没有任何效果，可能是因为该伪类处于实验阶段．
2.:lang：匹配设置了特定语言的元素，设置特定语言可以通过为了HTML元素设置lang=""属性，设置meta元素的charset=""属性，或者是在http头部上设置语言属性。
实际上，lang=""属性不只可以在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>

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

其他
1.:root：匹配文档的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素则可能是其他元素。

如下例，将html元素的背景设置为橙色:

:root {
   background: orange;
}

2.:fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式，而是通过Javascript的Fullscreen API来打开的，不同的浏览器有不同的Fullscreen API。目前，:fullscreen需要添加前缀才能使用。

如下例，当处于全屏模式时，h1元素的背景会变成橙色:

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

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属性来指定要插入的内容。被插入的内容实际上不在文档树中。

<h1>World</h1>

h1:before {
  content: "Hello ";
}

2.::after/:after：:after在被元素后插入内容，其用法和特性与:before相似。
3.::first-letter/:first-letter：匹配元素中文本的首字母。被修饰的首字母不在文档树中。
4.::first-line/:first-line：匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
5.::selection匹配被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。

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

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

6.::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。
该伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。
在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。

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

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(处于试验阶段)：用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式.

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

注：我运行的时候没有出现预期的效果．

参考文档：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

最后编辑于：2017.12.06 12:56:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

伪类与伪元素详解

伪类：

伪元素：

举例说明两者的区别：

伪元素是使用单冒号还是双冒号？

伪类分类

推荐阅读更多精彩内容