#

伪类(Pseudo-classes)

伪类是选择器的一种，它用于选择处于特定状态的元素

常见的伪类有

• 动态伪类
  • :link
  • :visited
  • :hover
  • :active
  • :focus
• 目标伪类
  • :target
• 语言伪类
  • :lang()
• 元素状态伪类
  • :enabled
  • :disabled
  • :checked
• 结构伪类
  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • :first-child
  • :last-child
  • :first-of-type
  • :last-of-type
  • :root
  • :only-child
  • :only-of-type
  • :empty
• 否定伪类
  • not()

常用动态伪类

• a:link 未访问的链接
• a:visited 已访问的链接
• a:hover 鼠标移动到链接上
• a:active 激活的链接， 鼠标在链接上长按未松开

注意事项

• :hover必须放在 :link, :visited后面才能完全生效
• :active 必须放在 :hover后面才能完全生效
• 所以建议的编写顺序是 :link, :visited, :hover, :active

focus

当前拥有输入焦点的元素

书写顺序 :link, :visited, :focus, :hover, :active

伪元素

常用的伪元素有

• :first-line, ::first-line
• :first-letter, ::first-letter
• :before, ::before
• :after, ::after 为方便区分伪元素和伪类，因此伪元素使用::

::first-line ::first-letter

• ::first-line 针对首行文本设置属性
• ::first-letter 针对首字母设置属性

<style>
  div {
    width: 100px;
    height: auto;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }
  div::first-letter {
    color: red;
    font-size: 20px;
  }
  div::first-line {
    background-color: orange;
  }
</style>
<div>11111,222,333,444444,hjkhsjdkhfakjsldhfuiasydf </div>

::before ::after

::before和::after用来在一个元素的内容之前或之后插入其它内容，例如文字、图片

content属性

通常使用content属性来为一个元素添加修饰性内容

<style>
  div {
    width: 100px;
    height: auto;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }
  div::before{
    content: "123";
    color: red;
  }
  div::after{
    content: "321";
    /* content: url('./img/icons.svg')  引入的是图片*/ 
    color: blue;
  }
</style>
<div>11111,222,333,444444,hjkhsjdkhfakjsldhfuiasydf </div>

这里记录一个问题：
在块级元素中，中文内容可以自动换行，但是英文和数字不能自动换行问题