css3伪类和伪元素你都懂了吗

桃扇骨 2021-10-15 15:34 223阅读 0赞

# 什么是伪类？ #

伪类用于定义元素的特殊状态。 例如，它可用于：

*  当用户将鼠标悬停在元素上时为其设置样式
 *  访问和未访问的链接不同样式
 *  在获得焦点时设置元素的样式

# 伪类的语法 #

后代选择器匹配作为指定元素后代的所有元素。以下示例选择<div>元素内的所有元素：

选择器:伪类 { 属性:值; }

链接可以以不同方式显示：

/* 未访问的链接 */ 
    a:link {
           color: red; } 
    /* 已浏览过的链接 */
     a:visited {
           color: green; } 
    /* 鼠标悬停时候的链接 */ 
    a:hover {
           color: hotpink; }
     /* 选定的链接 */ 
    a:active {
           color: blue; }

注意：**a:hover**必须在CSS定义**a:link**之后和**a:visited**之后才能生效！**a:active**必须 **a:hover**在CSS定义之后才能有效！伪类名称不区分大小写。

# 伪类和CSS类 #

伪类可以与CSS类结合使用：当您将鼠标悬停在示例中的链接上时，它将更改颜色：

a.highlight:hover {
         color: #ff0000; }

# 将鼠标悬停在<div>上 #

:hover在<div>元素上使用伪类的示例：

div:hover {
         background-color: blue; }

# 简单的工具提示悬停 #

将鼠标悬停在<div>元素上以显示元素（如工具提示）

p {
        display: none;background-color: yellow;padding: 20px; } 
    div:hover p {
        display: block; }

# :first-child伪类 #

**:first-child**伪类指定的元素是另一个元素的第一个子匹配。 在以下示例中，选择器匹配任何元素的第一个子元素元素：

p:first-child {
         color: blue; }

匹配所有元素中的第一个元素

p i:first-child {
         color: blue; }

匹配所有第一个子元素中的所有元素

p:first-child i {
         color: blue; }

# :lang伪类 #

**:lang**伪类允许定义不同语言的特殊规则。在下面的示例中，:lang使用lang=“no”定义<q>元素的引用：

q:lang(no) {
         quotes: "~" "~"; }

# 所有CSS伪类 #

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>例子</th> 
 <th>描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-active-selector/1525.html" rel="nofollow">:active</a></td> 
 <td>a:active</td> 
 <td>选择active激活链接</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-checked-selector/1529.html" rel="nofollow">:checked</a></td> 
 <td>input:checked</td> 
 <td>选择每个选中的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-disabled-selector/1531.html" rel="nofollow">:disabled</a></td> 
 <td>input:disabled</td> 
 <td>选择每个禁用的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-empty-selector/1532.html" rel="nofollow">:empty</a></td> 
 <td>p:empty</td> 
 <td>选择每个没有子元素的&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-enabled-selector/1533.html" rel="nofollow">:enabled</a></td> 
 <td>input:enabled</td> 
 <td>选择每个启用的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-first-child-selector/1534.html" rel="nofollow">:first-child</a></td> 
 <td>p:first-child</td> 
 <td>选择作为其父级的第一个子元素的每个&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-first-of-type-selector/1537.html" rel="nofollow">:first-of-type</a></td> 
 <td>p:first-of-type</td> 
 <td>选择每个&lt;p&gt;元素，它是其父元素的第一个&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-focus-selector/1538.html" rel="nofollow">:focus</a></td> 
 <td>input:focus</td> 
 <td>选择具有焦点的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-hover-selector/1539.html" rel="nofollow">:hover</a></td> 
 <td>a:hover</td> 
 <td>选择鼠标悬停时的链接</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-in-range-selector/1540.html" rel="nofollow">:in-range</a></td> 
 <td>input:in-range</td> 
 <td>选择具有指定范围内的值的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-invalid-selector/1542.html" rel="nofollow">:invalid</a></td> 
 <td>input:invalid</td> 
 <td>选择具有无效值的所有&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-lang-selector/1543.html" rel="nofollow">:lang(language)</a></td> 
 <td>p:lang(it)</td> 
 <td>选择具有以“it”开头的lang属性值的每个&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-last-child-selector/1544.html" rel="nofollow">:last-child</a></td> 
 <td>p:last-child</td> 
 <td>选择作为其父级的最后一个子元素的每个&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-last-of-type-selector/1546.html" rel="nofollow">:last-of-type</a></td> 
 <td>p:last-of-type</td> 
 <td>选择每个&lt;p&gt;元素，它是其父元素的最后一个&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-link-selector/1547.html" rel="nofollow">:link</a></td> 
 <td>a:link</td> 
 <td>选择所有未访问的链接</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-not-selector/1548.html" rel="nofollow">:not(selector)</a></td> 
 <td>:not(p)</td> 
 <td>选择不是&lt;p&gt;元素的每个元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-nth-child-selector/1549.html" rel="nofollow">:nth-child(n)</a></td> 
 <td>p:nth-child(2)</td> 
 <td>选择作为其父级的第二个子元素的每个&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-nth-last-child-selector/1550.html" rel="nofollow">:nth-last-child(n)</a></td> 
 <td>p:nth-last-child(2)</td> 
 <td>选择每个&lt;p&gt;元素作为其父元素的第二个子元素，从最后一个子元素开始计算</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-nth-last-of-type-selector/1551.html" rel="nofollow">:nth-last-of-type(n)</a></td> 
 <td>p:nth-last-of-type(2)</td> 
 <td>选择每个&lt;p&gt;元素作为其父元素的第二个&lt;p&gt;元素，从最后一个子元素开始计算</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-nth-of-type-selector/1552.html" rel="nofollow">:nth-of-type(n)</a></td> 
 <td>p:nth-of-type(2)</td> 
 <td>选择每个&lt;p&gt;元素，它是其父元素的第二个&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-only-of-type-selector/1553.html" rel="nofollow">:only-of-type</a></td> 
 <td>p:only-of-type</td> 
 <td>选择每个&lt;p&gt;元素，它是其父元素的唯一&lt;p&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-only-child-selector/1554.html" rel="nofollow">:only-child</a></td> 
 <td>p:only-child</td> 
 <td>选择每个&lt;p&gt;元素，它是其父元素的唯一子元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-optional-selector/1555.html" rel="nofollow">:optional</a></td> 
 <td>input:optional</td> 
 <td>选择没有“required”属性的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-out-of-range-selector/1556.html" rel="nofollow">:out-of-range</a></td> 
 <td>input:out-of-range</td> 
 <td>选择&lt;input&gt;元素，其值超出指定范围</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-read-only-selector/1558.html" rel="nofollow">:read-only</a></td> 
 <td>input:read-only</td> 
 <td>选择具有指定“readonly”属性的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-read-write-selector/1559.html" rel="nofollow">:read-write</a></td> 
 <td>input:read-write</td> 
 <td>选择没有“readonly”属性的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-required-selector/1560.html" rel="nofollow">:required</a></td> 
 <td>input:required</td> 
 <td>选择指定了“required”属性的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-root-selector/1561.html" rel="nofollow">:root</a></td> 
 <td>root</td> 
 <td>选择文档的根元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-target-target/1563.html" rel="nofollow">:target</a></td> 
 <td>#news:target</td> 
 <td>选择当前活动的#news元素（单击包含该锚名称的URL）</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-valid-selector/1564.html" rel="nofollow">:valid</a></td> 
 <td>input:valid</td> 
 <td>选择具有有效值的所有&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-visited-selector/1565.html" rel="nofollow">:visited</a></td> 
 <td>a:visited</td> 
 <td>选择所有访问过的链接</td> 
 </tr> 
 </tbody> 
</table>

# 所有CSS伪元素 #

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>例子</th> 
 <th>描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-after-selector/1526.html" rel="nofollow">::after</a></td> 
 <td>p::after</td> 
 <td>在每个&lt;p&gt;元素后插入内容</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-before-selector/1527.html" rel="nofollow">::before</a></td> 
 <td>p::before</td> 
 <td>在每个&lt;p&gt;元素之前插入内容</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-first-letter-selector/1535.html" rel="nofollow">::first-letter</a></td> 
 <td>p::first-letter</td> 
 <td>选择每个&lt;p&gt;元素的第一个字母</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-first-line-selector/1536.html" rel="nofollow">::first-line</a></td> 
 <td>p::first-line</td> 
 <td>选择每个&lt;p&gt;元素的第一行</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.jc2182.com/css-selection-selector/1562.html" rel="nofollow">::selection</a></td> 
 <td>p::selection</td> 
 <td>选择用户选择的元素部分</td> 
 </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/jc2182/p/11267925.html