• 伪类选择器
  • 简介
  • 伪类示例
  • 用户行为伪类
• 伪元素
  • 简单示例
  • 伪元素选择器其他参数
    • 首字调整、文本前/后添加渲染文本
• 伪类参考表
  • 伪类
• 伪元素参考表
  • 伪元素

伪类选择器

简介

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护；

伪类就是开头为冒号的关键字：

:pseudo-class-name

伪类示例

/*css代码*/
.first {
    font-size: 120%;
    font-weight: bold;
}   

    
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.

    
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    

如果想修改的是第一段的话，并不是通过类选择器去匹配修改，可以使用:first-child伪类选择器，这将一直选中文章中的第一个子元素，我们将不再需要编辑HTML（编辑HTML并不总是可行，也许是因为它是由一个CMS生成的）；

/*css*/
article p:first-child {
    font-size: 120%;
    font-weight: bold;
}   

    
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.

    
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：

• :hover：只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素；
• :focus：只会在用户使用键盘控制，选定元素的时候激活；

:hover示例

a:hover{
    color:red;
}

百度

:focus示例

input:focus {
            background-color: red;
        }

INPUT:

伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::；

语法：

::pseudo-element-name

注意一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素；

简单示例

例如，如果你想选中一段的第一行，你可以把它用一个元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变HTML的方式来可预测地这么做是不可能的；

::first-line伪元素选择器能做到这件事——即使单词/字符的数目改变，它也只会选中第一行；

article p::first-line {
    font-size: 120%;
    font-weight: bold;
}   
  

    
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.

    
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

伪元素选择器其他参数

首字调整、文本前/后添加渲染文本

调整第一个字

Hammer is very good！
心态摆平
为人端正

伪类参考表

伪类

伪元素参考表

伪元素