CSS基础（三）：伪类、伪元素选择器CSS伪类选择器动态伪类选择器伪类就是伪装的分类，是元素状态的一种描述对于li

CSS伪类选择器

动态伪类选择器

<a href="https://www.baidu.com">baidu</a>
<a href="https://www.jd.com">jd</a>
<input type="text">

伪类就是伪装的分类，是元素状态的一种描述

/* 选择 a 标签中那些未访问过的链接（link） */
a:link { color: green; }

/* 选择 a 标签中那些已访问过的链接（visited） */
a:visited { color: gray; }

/* 选择 a 标签中那些鼠标悬浮的链接（hover） */
a:hover { color: red; }

/* 选择 a 标签中那些鼠标按住的链接（active） */
a:active { color: blue; }

/* 选择 input 标签中那些获取焦点的（focus） */
input:focus { background-color: gray; }

对于link visited hover active 这4个伪类选择器，它们的顺序通常是固定的：

在默认状态下，链接只有的状态是：link
当鼠标悬浮在链接上，链接的状态是叠加的：link hover
当鼠标点击链接按住不动，链接的状态是叠加的：link hover active
当鼠标点击过链接后，链接的状态是：visited hover

如果编写的样式顺序中visited放在最后，那么当链接点击过，鼠标悬浮在链接上时的状态就是：hover visited；

此时无论如何hover都呈现不出变化效果，因为悬浮前是visited，而悬浮时则被visited覆盖了。

结构伪类选择器

尝试选择div中第一个p：

<div>
  <p>1st</p>
  <p>2nd</p>
  <p>3rd</p>
  <p>4th</p>
</div>

使用first-child选择第一个元素：

div>p:first-child { color: green; }

使用last-child选择最后一个元素：

div>p:last-child { color: green; }

使用nth-child()选择某个顺位元素：

div>p:nth-child(3) { color: green; }

对于div>p:first-child的含义是在div的子代中p作为一个子元素（结构状态），如果说p不是作为一个子元素那么就没选中，比如下面的其实是span作为第一个子元素：

<div>
  <span>test</span>
  <p>1st</p>
  <p>2nd</p>
  <p>3rd</p>
  <p>4th</p>
</div>

再比如下面的div p:first-child含义是div的后代中p作为第一个子元素，那么被选择的就有P1和P2；在这里P2即是属于div的后代，也是作为某个父元素中的（第一个）子元素；同样地如果使用p:first-child（p作为某个父元素中的第一个子元素）也可以实现选中P1和P2：

<style>
  div p:first-child { color: green; }
</style>

<div>
  <p>P1</p>
  <div>
    <p>P2</p>
  </div>
  <p>P3</p>
</div>

如果要实现无论第一个子元素是什么，也只选择指定的元素类型，则使用first-of-type选择第一个此类型元素：

<style>
  div>p:first-of-type { color: green; }
</style>

<div>
  <span>test</span>
  <p>1st</p>
  <p>2nd</p>
  <p>3rd</p>
  <p>4th</p>
</div>

否定伪类选择器（排除）

尝试选择<div>中所有的<p>元素，但排除class="exclude"

<div>
  <p>P1</p>
  <p>P2</p>
  <p class="exclude">P3</p>
  <p class="exclude">P4</p>
</div>

使用:not()实现否定伪类选择器

div>p:not(.exclude) {}

:not()中可以是任意的选择器，比如:not(:first-child)排除第一个

div>p:not(:first-child) {}

UI伪类选择器

主要应用于<input>

<input type="checkbox">
<input type="text" disabled>

控件相关的状态选择器

/* 控件被选中时 */
input:checked { width:10px; height:10px}

/* 控件被禁用时 */
input:disabled {}

目标伪类选择器

主要与锚点配合

<a href="#first"goto D1></a>
<a href="#second"goto D2></a>
<a href="#third"goto D3></a>

<div id="first">D1</div>
<div id="second">D2</div>
<div id="third">D3</div>

当锚点指向特定元素（id=""）时，元素就是一个目标，使用:target目标伪类选择器

div:target {}

语言伪类选择器

尝试选择lang="en"的元素

<div>中文</div>
<div lang="en">English</div>

使用:lang()表示语言伪类选择器

div:lang(en) {}

CSS伪元素选择器

尝试让文字段落的第一个字母样式改变

<div>Hello, World!</div>
<input type="text" placeholder="">
<p>199</p>

伪元素使用::表示

/* 选择元素中第一个文字/字母 */
div::first-letter {}

/* 选择元素中第一行文字 */
div::first-line {}

/* 选择元素中文字被鼠标选中的 */
div::selection {}

/* 选择元素中的 placeholder 文字 */
input::placeholder {}

/* 选择元素文字开始前的位置，并加上自定义内容
  这样用户就只能选中文字内容，而无法选择自定义内容
*/
p::before { content: "¥"; }