1. 伪类 & 伪元素
- 伪类和伪元素用来修饰不在文档树中的部分
- 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式
- 伪元素：用于创建一些不在文档树中的元素，并为其添加样式
2. 伪类
伪类详解图：
伪类.png
状态
-
:link选择未访问的链接 -
:visited选择已访问的链接 -
:hover选择鼠标指针浮动在其上的元素 -
:active选择活动的链接 -
:focus选择获取焦点的输入字段
注意：a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
结构
-
not
否定伪类，用于匹配不符合参数选择器的元素
HTML:
<div class="div-type">我不会变色</div>
<div> 我会变成橙色</div>
<div class="div-type">我不会变色</div>
<div>我会变成橙色</div>
CSS:
div:not(.div-type) {
color: orange;
}
-
first-child
匹配元素的第一个子元素
HTML:
<div>
<div>我会变成蓝色</div>
<div>我不会变成蓝色</div>
</div>
CSS:
div:first-child{
color: blue;
}
last-child
匹配元素的最后一个子元素， 与first-child用法类似first-of-type
匹配属于其父元素的首个特定类型的子元素的每个元素
HTML
<ul>
<li>这里的文本是橙色的。。。<span>我是第一个li 的子元素，所以我的文本是橙色的</span></li>
<li>一些文本 </li>
<li>一些文本</li>
</ul>
CSS
li:first-of-type {
color: orange;
}
-
last-of-type
匹配元素的最后一个子元素， 与first-of-type用法类似 -
:nth-child
根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：- 1n+0，或n，匹配每一个子元素
- 2n+0，或2n，匹配位置为2、4、6、8…的子元素
- 2n+1匹配位置为1、3、5、7…的子元素
- 3n+4匹配位置为4、7、10、13…的子元素
-
:nth-last-child
与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的 -
:nth-of-type
与:nth-child相似，不同之处在于它是只匹配特定类型的元素
HTML:
<article>
<h1>我是标题</h1>
<p>一些文本</p>
<p>这里的文本是橙色的</p>
</article>
CSS:
p:nth-of-type(2) {
color: orange;
}
-
:nth-last-type
与:nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的 -
:only-child
当元素是其父元素中唯一一个子元素时，:only-child匹配该元素 -
:only-of-type
当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素 -
target
当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素
表单相关
-
checked
匹配被选中的 input 元素，这个 input 元素包括 radio 和 checkbox
如下，当复选框被选中时，与其相邻的<label>元素的背景会变成黄色
HTML:
<input type="checkbox"/>
<label>正确</label>
CSS:
input:checked + label {
background: yellow;
}
-
disabled
匹配禁用的表单元素.如下，被禁用input输入框的透明度会变成50%
HTML:
<input type="text" disabled/>
CSS:
:disabled {
opacity: .5;
}
3. 伪元素
伪元素详解图：
伪元素.png
-
::before/:before
在被选元素前插入内容
HTML:
<h1>World</h1>
CSS:
h1:before {
content: "Hello ";
}
-
::after/:after
在被元素后插入内容 -
::first-letter/:first-letter
匹配元素中文本的首字母,被修饰的首字母不在文档树中 -
::first-line/:first-line
匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中 -
::selection
匹配用户被用户选中或者处于高亮状态的部分 -
::placeholder
匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
