移动互联实训DAY05

最新推荐文章于 2024-07-22 11:03:23 发布

阴险的耕耘机

最新推荐文章于 2024-07-22 11:03:23 发布

阅读量453

点赞数 17

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_61913550/article/details/140150016

版权

1.兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-兄弟选择器</title>
    <style>
        /* 兄弟选择器 */
        .div1+div{
            width: 100px;
            height: 100px;
            background-color: rgb(19, 190, 190);
        }
        /* 通用兄弟选择器 */
        .div1~div{
            width: 100px;
            height: 100px;
            background-color: rgb(190, 19, 181);
        }
        
        
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <p>我是p标签</p>
    <div class="div4">div4</div>
</body>
</html>

2.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 序选择器 */

        /* 选中第一个 */
        /* div:first-child{
            width: 100px;
            height: 100px;
            background-color: rgb(19, 190, 190);
        } */
        /* 选中最后一个 */
        /* div:last-child{
            width: 100px;
            height: 100px;
            background-color: rgb(190, 150, 19);
        } */
        /* 选中某一个 */
        /* div:nth-child(5){
            width: 100px;
            height: 100px;
            background-color: rgb(90, 19, 190);
        } */
        /* 选中奇数个 */
        /* div:nth-child(odd){
            width: 100px;
            height: 100px;
            background-color: rgb(201, 230, 16);
        } */
        /* 选中偶数个 */
        /* div:nth-child(even){
            width: 100px;
            height: 100px;
            background-color: rgb(19, 85, 190);
        } */
        /* 选中自定义 */
        /* div:nth-child(2n+1){
            width: 100px;
            height: 100px;
            background-color: rgb(19, 85, 190);
        } */
        /* 鼠标移入或悬浮时 */
        /* div:hover{
            background-color: brown;
        } */
        /* 除了div7以外 其他标签全部应用对应样式 */
        div:not(.div7){
            width: 100px;
            height: 100px;
            background-color: rgb(19, 85, 190);
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="div5">div5</div>
    <div class="div6">div6</div>
    <div class="div7">div7</div>
    <div class="div8">div8</div>
</body>
</html>

3.动态伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 从未选中过的状态 */
        a:link{
            color:green
        }
        /* 被访问过的状态 */
        a:visited{
            color: aqua;
        }
        /* 长按或点击的状态 */
        a:active{
            color: blueviolet;
        }
        /* 鼠标移入或悬浮 */
        a:hover{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度一下</a>
</body>
</html>

4.伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在...之后 */
        p::after{
            /* 内容 */
            content: '我是后加的内容';
        }
        /* 在...之前 */
        p::before{
            /* 内容 */
            content: '我是前面加的内容';
        }
        /* 给首个文字设置样式 */
        p::first-letter{
            color: red;
            font-size: 25px;
        }
        /* 给第一行设置样式 */
        p::first-line{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        金珍妮（김제니、Jennie Kim），1996年1月16日出生于韩国首尔特别市江南区清潭洞，
        韩国女歌手，女子演唱组合BLACKPINK成员。 2016年8月8日，以BLACKPINK成员身份正
        式出道，并随组合发行首张单曲专辑《SQUARE ONE》；11月1日，随组合发行第二张单曲
        专辑《SQUARE TWO》。
    </p>
</body>
</html>

5.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 属性选择器 */
        [type=text]{
            background-color: bisque;
        }
        [type=password]{
            background-color: rgb(30, 195, 236);
        }
    </style>
</head>
<body>
    <input type="text" name="" id="">
    <input type="password" name="" id="">
</body>
</html>

6.css的继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            /* background-color: rgb(231, 134, 15); */
            /* 文字颜色 */
            color: red;
            /* 文字大小 */
            font-size: 25px;
            /* 文本居中 */
            text-align: center;
            /* 行高 */
            line-height: 40px;
        }
    </style>
</head>
<body>
    <!-- div.div1>div*3 -->
    <div class="div1">
        <div>div1
            <div>123
                <div>
                    456
                </div>
            </div>
        </div>
        <div>div2</div>
        <div>div3</div>
        <!--  a标签的⽂字颜⾊和下划线是不能继承的,当做⼦元素 -->
        <a href="">百度一下</a>
        <!-- h标签的⽂字⼤⼩是不能继承的，在做⼦元素 -->
        <h1>哈哈</h1>
    </div>
</body>
</html>

7.css的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 不同选择器(直接选中)  id>类>标签>通配符>继承>浏览器默认 */
        .div1{
            color: red;
        }
        #div11{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="div1" id="div11" style="color: #CD95F6;">div</div>
</body>
</html>