首页手记从头开始复习css之选择器（中）

从头开始复习css之选择器（中）

标签：

Html5

吃饭也吃完了，开始来写一写选择器接下来的篇章吧。

前面一章说了很多基础方面的知识，怎么说呢？还是比较基础的，现在这篇文章主要来讲一讲伪类和伪元素。

一、链接伪类

关于链接伪类呢？主要介绍a元素独有的三种伪元素：

link：定义a元素未访问时的样式
visited：定义a元素访问后的样式
target：突出显示活动的 HTML 锚
首先来介绍关于link和visited的内容，来看下面一段代码：

// html
<div>
  <a href="#">链接一</a>
  <a href="#1">链接二</a>
  <a href="#2">链接三</a>
  <a href="#3">链接四</a>
  <span>链接四</span>
</div>

// css
* {
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none; // 去掉
}
a:link {
  color: red;
}
a:visited {
  color:green;
}
span:link {
  color: red
}
span:visited {
  color:green;
}

效果如下:

由上面的现象可以观察到：span元素并没有link和visited的效果。其实link和visited是a元素特有的伪类，当然也包括下面要讲的target伪类，其他的元素使用起来是不会起作用的。

说到这里我突然想插句嘴，这是之前在开发的时候发现的，请诸位注意一下，来看修改一下css代码：

// css
a:link {
  color: red;
  font-size: 18px;
}
a:visited {
  color:green;
  font-size: 28px;
}

效果如下：

由上面的现象我们可以发现：点击过的链接的文字大小并没有改变，这就是我想说的点了：
visited支持的属性仅有：color/background-color/border-color三种
有兴趣的朋友可以自己验证看一下。

最后我们来提一下target，我就直接用target来写一个tab例子了，来看下面一段代码:

// html
<div>
  <a href="#id1">链接一</a>
  <a href="#id2">链接二</a>
</div>

<div id="id1"></div>
<div id="id2"></div>
// css
* {
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none; // 去掉
}
#id1{
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
#id2{
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
:target {
  background-color: red;
}

效果如下：

关于这个伪类的话，说实话我用到的并不多，在复习的时候刚好看到了这个类，简单的做了一下知识的梳理。

二、动态伪类

关于动态伪类呢，我的定义是：需要用户主动操作才能触发的。其中包含以下两种：

hover：定义鼠标经过显示的样式
active：定义鼠标单击激活时的样式
首先来一段代码：

// html
<div>
  <a href="#id1">链接一</a>
  <a href="#id2">链接二</a>
  <span>我是三</span>
</div>
// css
* {
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none; // 去掉
}
a:hover{
  color: green;
}
a:active {
  color: yellow
}
span:hover {
  color: green;
}
span:active {
  color: yellow
}

其效果如下：

从上面的效果我们可以发现与链接不同的是：不仅a会有该伪类效果，span也会有该效果。通过上面的demo我们可以发现hover和active是所有的元素通用的，也就是hover和active伪类是支持所有元素的，而a元素却是支持所有的链接伪类和动态伪类的。
值得注意的一点是我在开发中遇到了这么一个问题，我们修改一下css代码：

a:hover{
  color: green;
}
a:active {
  color: yellow
}
a:link {
  color: black;
}
a:visited {
  color: red;
}

效果如下：

由上面的代码我们可以发现：所有动态伪类的效果都失效了。产生问题的原因是：link/visited放在了hover/activede后面，导致动态伪类将前面的链接伪类给覆盖了，所以显示不出动态伪类的效果来。针对这个问题，我在网上找到了一个很好记忆的口诀：爱恨原则（love-hate）。意思呢是叫我们要把link和visited放在前面，hover和active放在后面，这样就能避免样式被覆盖了。

三、表单伪类

接下来我们来谈一谈表单伪类，表单伪类听这个名称就知道是作用在表单里面的，我这里呢？主要来介绍4个常用的（据说现在还新增加了几个）：

enable：当表单元素未禁止时被触发
disable：当表单元素禁止时被触发
focus：当表单元素被聚焦时触发
checked：当表单元素被选择时触发
来看下面一段代码：

// html
<input type="text" disabled>
<input type="text">
// css
input:enabled {
  background: red;
}
input:disabled {
  background: blue;
}
input:focus {
  background:yellow;
}

效果如下：

从上面的效果大概可以看出来enable、disable、focus的作用，我这里就不多加赘述了。

最后关于checked，我就用一个简单的demo来表现他们的作用吧。请看下面一段代码：

//html
<label>
  <input type="radio" name="select">
  <span></span>
</label>

<label>
  <input type="radio" name="select">
  <span></span>
</label>
// css
  label {
  width: 100px;
  height: 100px;
  float: left;
  border: 1px solid yellow;
  overflow: hidden;
}
label span {
  display: flex;
  width: 100px;
  height: 100px
}
input {
  display: none;
}	
input:checked + span {
  background:red;
}

效果如下：

四、结构伪类

接下来我们介绍以下结构伪类，这个东西基本上在实际的开发中使用量会非常大，这里就分为两个模块来进行讲解：

x-child
x-of-type

4.1、 x-child属性

在x-child中呢？主要的属性有下列这几项：

first-child
last-child
nth-child
nth-last-child
only-child
首先关于first-child和last-child这两个属性，可以来看下面一段代码:

// html
<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
//css
div p:first-child{
  background-color: red;
}
div p:last-child {
  background-color: green;
}

效果如下：

由上面效果我们可以发现：first-child和last-child分别是作用于父元素的第一个子元素和最后一个子元素。

接下来我们介绍一下：nth-child和nth-last-child，我就在上面的基础上面修改一下css代码：

div p:nth-child(1){
  background-color: red;
}
div p:nth-last-child(1) {
  background-color: green;
}

效果如下：

由上面代码我可以知道nth-child和nth-last-child分别是作用于父元素的第n个元素和作用于父元素的倒数第n个元素。值得我们注意的是，这两个属性的下标都要从1开始而不是从0。

最后来说一说only-child：关于这个伪类我是这样理解的：它相当于是一个组合选择器，他组合了first-child和last-child，来请看下面一段代码.

// html
<div>
  <p>1</p>
</div>

// css
div p:only-child{
  background-color: red;
}

效果如下：

从上面的效果我么可以知道当一个父元素有且仅有一个子元素的时候，该伪类会被触发。

当然前面写的都是正常情况下，我们这里来整点异常情况：

当父元素不止一个子元素的时候，only-child伪类有没有作用呢？来看下面一段代码：

//css
div p:only-child{
  background-color: red;
}
//html
<div>
  <p>1</p>
  <p>2</p>
</div>

效果如下：

这里我们发现：当父节点有一个以上的子节点的时候，only-child将会失去效果。

当父元素的制定子元素不是预期元素时，会不会有效果呢？来看下面一段代码：

//html
<div>
  <div></div>
  <p>1</p>
  <p>2</p>
  <p>2</p>
  <p>2</p>
  <p>2</p>
  <p>2</p>
  <p>2</p>
  <p>2</p>
  <p>2</p>
</div>
// css
div p:first-child{
  background-color: red;
}

效果如下：

由上面的效果可以知道：当父元素div的第一个子元素不是p的时候,first-child就会失效。同样last-child、nth-child、nth-last-child等x-child也是一样，这就不再赘述了。所以为了解决这个问题，x-of-type横空出世。

4.2、x-of-type属性

前文说了，为了弥补x-child的缺漏，x-of-type横空处世，与x-child相同，x-of-type也有五个伪类：

first-of-type
last-of-type
nth-of-type
nth-last-of-type
only-of-type

首先来看first-of-type和last-of-type,先看下面一段代码：

// html
<div>
 <div></div>
 <p>1</p>
 <p>2</p>
 <p>2</p>
 <p>2</p>
 <p>2</p>
 <div></div>	
</div>
// css
div p:first-of-type{
  background-color: red;
}
div p:last-of-type {
  background-color: green;
}

效果如下：

这里我们就发现first-of-type和last-of-type会将父元素第指定元素给附加效果，这一定程度上弥补了x-child的弊端

然后再来简单的看一下nth-of-type和nth-last-of-type，修改一下前面的css：

div p:nth-of-type(1){
  background-color: red;
}
div p:nth-last-of-type(1){
  background-color: red;
}

效果如下：

同样nth-of-type和nth-last-of-type也产生了效果，给父元素的指定n个子元素的附加属性。

最后来看点：only-of-type:

//html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <p></p>
</ul>
// css
ul>p:only-of-type{
  background: green;
  width:100px;
  height: 40px;
}

效果如下：

这里我们当父元素的指定元素有且仅有一个的时候就能生效。

####4.3、我在开发的时候遇到的一个坑
前面说到了一个问题：如果x-of-type这么好用是不是我们就能无脑的用这个而放弃x-child呢？关于这个问题，我就分享一个我在开发的时候遇到的一个坑吧来看下面一段代码：

//html
<div>
  <div class="item">div</div>
  <p  class="item">p</p>
  <h1  class="item">h1</span>
  <h2  class="item">h2</p>
  <h3  class="item">h3</p>
  <h4  class="item">h4</p>
</div>
// css
div .item:first-of-type{
  background-color: red;
  border: 1px solid black;
}

效果如下：

这里我们发现，所有的元素都被该伪类所影响了。这就是我所说的坑，值得注意的是：x-of-type是以元素为单位的。 这里使用x-child却能起作用。从这个坑能充分验证我前面的观点：x-child和x-of-type在使用的时候要分场景来选择的。

五、伪元素

接下来关于伪元素，这一块的内容不多，没什么比较想聊的，简单的概述一下吧：

before
after
frist-letter
frist-line
selection

首先关于before和after我之前写过一篇文章封装了几个图标有兴趣的可以去瞧瞧：如何灵活的运用before和after

然后first-letter和first-line，请看下面一段代码：

//html
<p>i am klivitam <br/>i love my country</p>
// css
p::first-letter{
  color: red;
  font-size: 48px;
}
p::first-line{
  font-weight: bold;
}
p::selection{
  background: green;
  color: white;
}

效果如下：

这个意思的内容比较简单，从字面上就能看出来，我也不多加赘述了。

六、最后检查一下

最后我再仔细的翻阅了一下文档，我发现了还有：

not
empty
root
lang
这四个还没有讲到
首先关于empty和not，来看下面一段代码：

// html
<p>i am klivitam <br/>i love my country</p>
<p></p>
// css
p {
  width: 200px;
  height: 60px;
  border: 1px solid;
}
p:not(:empty){
  background: red;
  color:white;
}

效果如下：