CSS-HTML5伪类选择器

最新推荐文章于 2024-09-10 18:52:07 发布

「已注销」

最新推荐文章于 2024-09-10 18:52:07 发布

阅读量923

点赞数

本文链接：https://blog.csdn.net/deartors/article/details/127602271

版权

本文介绍了HTML5和CSS中的伪类选择器，包括结构伪类（如:first-child）、目标伪类（如:target）、UI元素状态选择器（如:enabled和:checked）、否定伪类（如:not()）以及其他常用选择器（如:link和:hover）。通过这些选择器，可以精确地控制元素的样式和交互效果。

摘要由CSDN通过智能技术生成

一.结构伪类选择器

通过某种结构关系去查找页面元素
例如匹配某个元素的第一个子元素。
用于选择第几个要设置伪类的元素

div：nth-child（2）{}

表示选择偶数的元素

div：nth-child（2n/even）{}

表示选择奇数的元素

div：nth-child（2n-1/odd）{}

表示选择只有一个该此节点的元素，若该div下有两个p标签则不选择

div p：only-child）{}

表示选择标签内没有任何内容的的元素，包括空格和换行符

div：empty{}

在伪类选择器中可以用==:root==代替html 部分演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=devices-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root,body{
   
            background-color: blue;
        }
        *{
   
            margin: 0;
            padding: 0;
        }
        div{
   
            width: 200px;
            height: 150px