2020.11.2学习总结：CSS3选择器

最新推荐文章于 2023-01-30 21:08:36 发布

在下小秦

最新推荐文章于 2023-01-30 21:08:36 发布

阅读量98

点赞数 2

分类专栏： Html 文章标签： html

本文链接：https://blog.csdn.net/possible999/article/details/109456667

版权

Html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2020.11.2学习总结：

学习内容：

CSS3选择器：
1. 动态伪类
2. UI元素状态伪类
3. 结构类--first-child、nth-child(n)

知识总结：

源代码：

动态伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态伪类</title>
    <style text="text/css">
    a{
        text-decoration: none;
    }
        a:link{
            color:aqua;
        }
        a:hover{
            color:red;
        }
    input{
        width:200px;
        height: 250px;
        border:3px solid red;
    }
    input:focus{
        background-color: bisque;
    }
    </style>
</head>
<body>
    <a href="#">动态伪类</a>
    <input type="text">
</body>
</html>

UI元素状态伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI元素状态伪类</title>
    <style type="text/css">
        input{
            width:200px;
            height: 150px;
            border: 3px solid black;
        }
        input:disabled{
            background-color: bisque;
        }
        input:checked{
            
        }
    </style>
</head>
<body>
    <p>
        我们把“:enabled,:disabled,:checked”称为UI元素状态伪类。
        enabled可输入
        disabled不可输入
        checked检查
    </p>
<input type="text" disabled="disabled">
<input type="text" enabled="enabled">
<input type="text">
<input type="text">
</body>
</html>

结构类--first-child、nth-child(n)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构类First-child和Last-child和nth-child</title>
</head>
<style type="text/css">
    pre{
        font-size: 20px;

    }
    section>div:First-child{
        color:red;
        background-color: bisque;
    }
    section>div:last-child{
        /* 某一个元素的最后一个 */
        color:blue;
        background-color: rgb(235, 212, 181);
    }
    ul{
        list-style-type: none;
    }
    ul>li:nth-child(3n){
        color:red;
    }
</style>
<body>
    <pre>
选择方法：
        :first-child
        :last-child
        :nth-child(N)匹配器父元素第N个子元素，不论元素类型。
        :nth-last-child()
        :nth_of-type()
        :nth-last_of-type()
        :first-of-type
        :last-of-type
        :only-child
        :only-of-type
        :empty
    </pre>
    <section>
        <div>1_1</div>
        <div>1_2</div>
        <div>1_3</div>
    </section>
    <section>
        <div>2_1</div>
        <div>2_2</div>
        <div>2_3</div>
    </section>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

</body>
</html>

在下小秦

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2020.11.2学习总结：CSS3选择器

2020.11.2学习总结：学习内容：CSS3选择器：1. 动态伪类 2. UI元素状态伪类 3. 结构类--first-child、nth-child(n)知识总结：源代码：动态伪类<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
复制链接

扫一扫

专栏目录