4.25号作业伪类选择器的应用 - 作业

Home > List of blog posts > 4.25号作业伪类选择器的应用

Blogger Information

Blog 20

fans 0

comment 0

visits 29209

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0425作业</title>
    <link rel="stylesheet" href="weilei.css">
    <style>
        ul {
            margin: 0 auto;
            padding-left: 0;
        }
        /*ul去除页面原始的padding和margin的数值*/
        ul li {
            display: inline-block;
            width: 50px;
            height: 50px;
            /*background-color: bisque;*/
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            box-shadow: 2px 2px 1px black;
            /*color: aliceblue;*/
        }

        /*通过对标签ul li 设置样式 ，初步做成圆形，开始测试选择器*/

        #bg1 {
            /*background-color: darkblue;*/
        }
        /*id 选择器可以起作用*/

        .bg2 {
            background-color: chocolate;
        }
        /*类选择器很好用*/

        li[bg3] {
            background-color: aqua;
        }
        /*这里有问题，等下看看视频*/

        #bg1, .bg2 {
            /*background-color: black;*/
        }
        /*群组选择器，直接一起设置id 和 class简单方便*/
        #bg1 + * {
            background-color: brown;
        }
        /*相邻选择器，用在特殊的使用场景，也是一种良好的解决方案。*/

        #bg1 ~ * {
            /*background-color: crimson;*/
        }
        /*兄弟选择器，一行代码解决同级结构样式，不错*/

        /*开始伪类选择器*/

        /*1.子元素选择器*/

        ul :first-child {
            background-color:yellow;
        }

        ul :last-child {
            background-color:yellow;
        }

        ul :nth-child(6) {
            background-color: darkmagenta;
        }

        /*子元素选择器最重要的一点就是 标签后面一定要跟空格 或者效果出不来。切记*/

        /*2.伪类类型选择器*/

        ul li:nth-of-type(8) {
            background-color: crimson;
        }

        /*两个选择器的区别在于位置和类型，精髓在于理解*/

        div p:nth-of-type(2) {
            background-color: chocolate;
            /*伪类类型选择器标签直接跟冒号*/

        }
        div :nth-child(2) {
            background-color: blanchedalmond;
        }
        /*伪类子元素选择器标签后面空格跟冒号*/

        form :checked + * {
            color: crimson;
        }
        /*利用相邻设置让选中的变色，给用户提示，提升用户体验*/

        button:hover {
            height: 30px;
            width: 60px;
            background-color: crimson;
            border: none;
            color: aliceblue;
        }

    </style>
</head>
<body>
<p>
    4月25日作业
    理解选择器 注意混肴的: nth-child(), nth-of-type()
</p>
<hr>

<ul>
    <li id="bg1">1</li>
    <li class="bg2">2</li>
    <li id="bg3">3</li>
    <li>4</li>
    <li class="bg2">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<hr>

<div>
    <p>中学语文</p>
    <li>历史老师</li>
    <p>语文老师</p>
</div>

<div>
    <p>历史</p>
    <li>中国</li>
</div>

<hr>
<form action="">
    <h3>用户登陆</h3>
    <p>
    <label for="email" id="email">邮箱：</label>
    <input type="email">
    </p>

    <p>
        <label for="password" id="password">密码：</label>
        <input type="password">
    </p>

    <p>
        <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
        <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>

    </p>

    <p>
        <button value="登录">登录</button>
    </p>
</form>
<p>
    <!--本章内容比较多，需要记住的很多东西，还需要再后面的实战中不断的联系来学习。-->
    <!--这个浏览器外部引入css代码有延迟。-->
</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

在php中文网好好学习

2019-05-04 23:18:07

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例