前端-css-2

已于 2024-03-30 14:49:55 修改
阅读量1k 收藏 9
点赞数 15
分类专栏： 前端 文章标签： 前端 css
于 2024-03-29 23:14:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59868842/article/details/137155296
版权

1.背景样式

属性名作用属性值
background-color背景颜色颜色
background-image设置背景图像地址url(地址)
background-repeat设置背景图像重复方式

repeat：重复。

repeat-x：横向重复。

repeat-y：纵向重复。

no-repeat：不重复。

background-position设置背景图像位置关键字。两个长度表示的坐标。百分比
background-attachment背景图像固定scroll：随元素滚动，默认值。fixed：固定。
background背景复合属性多个值使用空格分隔

1.1背景颜色

1. 元素默认背景颜色是透明,background-color的默认值是 transparent（透明）
2. 给 body 设置背景色就是给整个页面设置背景色

<!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{
            width: 500px;
            height: 600px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, aliquam? Iste nihil quis veniam sapiente eius ex commodi ipsam, ratione, est esse unde?</div>
</body>
</html>

 1.2设置背景图像的位置 background-position

1.2.1使用关键字设置属性值：

<!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>
       .box {
            display: inline-block;
            padding: 10px;
            width: 800px;
            height: 500px;
            border: 2px solid #900;
            background-color: #ccc;
            background-repeat: no-repeat;

            /* 使用关键字设置背景图像位置 */
            /* 
                x轴位置：left right center
                y轴位置：top bottom center
            */
            /* 使用两个值 */
            background-position: left top;
            background-position: right bottom;
            background-position: right center;
            background-position: right top;
            /* 使用一个值  另一个值默认center*/
            background-position: left;   /* left center */
            background-position: bottom; /* center bottom */
            background-position: center; /* center center */
        }

        .box01{
            background-image: url(../images/bg5.jpg);
        }
        .box02{
            background-image: url(../images/bg4.jpg);
        }
    </style>
</head>
<body>
    <h1>背景图像位置</h1>
    <h2>使用关键字设置背景图像位置</h2>
    <div class="box box01">法友奔遗，慷等能游。</div>
    <div class="box box02">她之间为，朋找极娘。</div>
</body>
</html>

1.2.2通过指定坐标（用长度）设置属性值： 

web的x与y轴

<!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>
       .box {
            display: inline-block;
            padding: 10px;
            width: 500px;
            height: 300px;
            border: 2px solid #900;
            background-color: #ccc;
            background-repeat: no-repeat;

            /* 使用关键字设置背景图像位置 */
            /* 
                x轴位置：left right center
                y轴位置：top bottom center
            */
            /* 使用两个值 */
            background-position: left top;
            background-position: right bottom;
            background-position: right center;
            background-position: right top;
            /* 使用一个值  另一个值默认center*/
            background-position: left;   /* left center */
            background-position: bottom; /* center bottom */
            background-position: center; /* center center */
        }
        .item {
            display: inline-block;
            padding: 10px;
            width: 500px;
            height: 300px;
            border: 2px solid #900;
            background-color: #791e1e;
            background-repeat: no-repeat;

            /* 使用坐标设置背景图像位置 */
            /* 设置的是图像的左上角位置 */
            /* 使用两个长度（px、em） 分别是x坐标 y 坐标 */
            background-position: 0 0;
            background-position: 100px 20px;
            background-position: 520px 320px;
            background-position: -100px 100px;
            /* 只设置一个长度， 被认为是x坐标 y轴位置默认取center */
            background-position: 100px;
            /* 长度表示的坐标和关键字混搭 */
            /* background-position: right -50px;
            background-position: 100px bottom; */
            background-position: right -50px;
            background-position: 100px bottom;
        }

        .box01{
            background-image: url(../images/bg5.jpg);
        }
        .box02{
            background-image: url(../images/bg4.jpg);
        }
    </style>
</head>
<body>
    <h1>背景图像位置</h1>
    <h2>使用关键字设置背景图像位置</h2>
    <div class="item box box01">法友奔遗，慷等能游。</div>
    <div class="item box box02">她之间为，朋找极娘。</div>
</body>
</html>

 

 1.2.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>
       .box {
            display: inline-block;
            padding: 10px;
            width: 500px;
            height: 300px;
            border: 2px solid #900;
            background-color: #ccc;
            background-repeat: no-repeat;

            /* 使用关键字设置背景图像位置 */
            /* 
                x轴位置：left right center
                y轴位置：top bottom center
            */
            /* 使用两个值 */
            background-position: left top;
            background-position: right bottom;
            background-position: right center;
            background-position: right top;
            /* 使用一个值  另一个值默认center*/
            background-position: left;   /* left center */
            background-position: bottom; /* center bottom */
            background-position: center; /* center center */
        }
        .item {
            display: inline-block;
            padding: 10px;
            width: 500px;
            height: 300px;
            border: 2px solid #900;
            background-color: #ccc;
            background-repeat: no-repeat;
            /* 使用百分比设置图像位置 */
            /* 
                元素和图像各自创建一个坐标系
                原点在各自的左上角，x轴从左到右，y轴从上到下
                根据百分比从元素上找到坐标点，根据百分比从图像上找到坐标点，两点重合
            */
            /* 两个百分比 */
            /* background-position: 0% 0%;
            background-position: 50% 50%;
            background-position: 20% 10%;
            background-position: 100% 100%; */
            background-position: 50% 50%;
            background-position: 100% 100%;

            /* 百分比和其他混搭 */
            /* background-position: 100% 100px;
            background-position: left 100%; */
            background-position: 100% 100px;
            background-position: left 100%;
            /* 值使用一个百分比 被认为x方向位置，另一个方向默认center */
            /* background-position: 10%; */
            background-position: 10%;
        }

        .box01{
            background-image: url(../images/bg5.jpg);
        }
        .box02{
            background-image: url(../images/bg4.jpg);
        }
    </style>
</head>
<body>
    <h1>背景图像位置</h1>
    <h2>使用关键字设置背景图像位置</h2>
    <div class="item box box01">法友奔遗，慷等能游。</div>
    <div class="item box box02">她之间为，朋找极娘。</div>
</body>
</html>

1.3背景图像固定 background-attachment

如果设置 background-attachment 为 fixed， 背景图像定位的坐标原点是视口的左上角
背景图像只能显示图像与元素位置重合的位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .section-con {
            height: 400px;
            background: #099;
        }

        .section-bg {
            height: 300px;
            background-color: #eee;
            background-repeat: no-repeat;
            background-position: center;

            /* 设置背景图像固定 */
            background-attachment: fixed;
        }

        .section-bg01 {
            background-image: url(../images/bg5.jpg);
        }

        .section-bg02 {
            background-image: url(../images/bg4.jpg);
        }
    </style>
</head>
<body>
    <div class="section section-con"></div>
    <div class="section section-bg section-bg01"></div>
    <div class="section section-con"></div>
    <div class="section section-bg section-bg02"></div>
    <div class="section section-con"></div>


</body>
</html>

2.鼠标光标样式 

属性名作用属性值
cursor设置鼠标光标

pointer：小手。

move：移动图标。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 250px;
            background: #900;

            /* cursor: default;
            cursor: none;  
            cursor: pointer;
            cursor: move; */
            cursor: pointer;
            cursor: move;
            /* cursor: text;  
            cursor: wait;   */

            /* 自定义鼠标光标 */
            /* cursor: url(../images/arrow03.png),pointer; */
            /* cursor: url(../images/arrow04.png),pointer; */
        }

        p {
            padding: 20px;
            width: 560px;
            background: #ccc;
        }

        a {
            cursor: wait;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>何逝单手爻生的洞德愚罪帝胆易，承连德判想陀回道怒生他，笔丈亓正向投间国轻才珍明至也赏，说是救司陀变，往承作帝胆色为你贼老世斯后，是生而五风在书鲜勉争和视以若非活说丑会，一大卅出丐不为极你赐流己极尺王种车游，大骂丰是说有是的五位，感韩者若尝逃了郭，的常子们。</p>
    <a href="#">超链接</a>
</body>
</html>

3.表格样式 

属性名作用属性值
table-layout设置列宽固定

auto：默认值。

fixed：固定。

border-spacing设置单元格之间的距离长度
border-collapse合并单元格边框

separate：默认值。

collapse：合并

caption-sidecaption-side

top：表格上面。

bottom：表格下面

empty-cells没有内容的单元格显示还是隐藏

show：显示，默认值。

hide：隐藏

注意：表格相关的属性只能设置到 table 标签上才生效！ 

3.1table-layout列宽固定

未设置列宽固定（文字的长度自动适配列宽，不会换行）

 设置列宽固定

<!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>
        .n1{
            width: 800px;
            table-layout: fixed; 
        }
    </style>
</head>
<body>
    <table class="n1">
        <!-- 表格标题 -->
        <caption>用户信息表</caption>
        <!-- 表格头 -->
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>电话</th>
                <th>地址</th>
            </tr>
        </thead>
        <!-- 表格体 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>曹操</td>
                <td>男</td>
                <td>13378652389</td>
                <td>上海市松江区</td>
            </tr>
            <tr>
                <td>2</td>
                <td>刘备</td>
                <td>男</td>
                <td>13378652388</td>
                <td>上海市浦东区</td>
            </tr>
            <tr>
                <td>3</td>
                <td>高</td>
                <td>男</td>
                <td></td>
                <td>新疆维吾尔自治区伊犁哈萨克自治州</td>
            </tr>
            <tr>
                <td>4</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>13378652386</td>
                <td>上海市黄浦区</td>
            </tr>
</body>
</html>

3.2border-spacing  设置单元格之间的距离

<style>
        .n1{
            width: 800px;
            table-layout: fixed; 
            border-spacing: 5px;
        }
    </style>

3.3border-collapse 合并单元格边框

不合并时

合并后 

.n1{
            width: 800px;
            table-layout: fixed; 
            border-spacing: 5px;
            border-collapse: collapse; 
        }
        th,td{
            padding: 10px;
            border: 1px solid #223344;
        }

3.4caption-side 标题位置

将标题放到底部

.n1{
            width: 800px;
            table-layout: fixed; 
            border-spacing: 5px;
            border-collapse: collapse; 
        }
        th,td{
            padding: 10px;
            border: 1px solid #223344;
        }
        caption{
            caption-side: bottom;
        }

3.5empty-cells 没有内容的单元格显示还是隐藏

<style>
        .n1{
            width: 800px;
            table-layout: fixed; 
            border-spacing: 5px;
            /* border-collapse: collapse;  */
            empty-cells: hide;
        }
        th,td{
            padding: 10px;
            border: 1px solid #223344;
        }
        caption{
            caption-side: bottom;
        }
    </style>

 4、列表样式

注意：只有 ul、ol、li 这些标签设置列表样式才有效果！

属性名作用属性值
list-style-type设置列表项图标none：无
list-style-position设置列表项图标位置

outside：在li外面。

inside：在li里面。

list-style-image自定义列表项图标url(图片地址)
list-style复合属性多个值使用空格分隔

 4.1list-style-type，设置列表项图标

 <style>
            li {
            width: 600px;
            padding: 10px;
            margin-bottom: 10px;
            background: #ccc;
        }
        .news{
            list-style-type: square;
        }
    </style>
 <ul class="news">
        <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
        <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
        <li class="active">留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
        <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
        <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
        <li>留韩将人，大毒付即子貂，拆到程统下留足哉洪极上郭，使梵却韦。</li>
    </ul>

 4.2.list-style-position 设置列表项图标位置

 <style>
            li {
            width: 600px;
            padding: 10px;
            margin-bottom: 10px;
            background: #ccc;
        }
        .news{
            list-style-type: square;
            list-style-position: inside;
        }
    </style>

4.3.list-style-image  url(图片地址)

 <style>
            li {
            width: 600px;
            padding: 10px;
            margin-bottom: 10px;
            background: #ccc;
        }
        .news{
            list-style-type: square;
            list-style-position: outside;
            list-style-image: url(../images/hot-icon.png);
        }
    </style>

5.选择器的种类

5.1后代元素选择器

最外面的标签里面所有符合要求的标签都会被修改格式

选择器1 选择器2 {}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin-bottom: 100px;
        }

        li {
            margin-top: 10px;
            width: 600px;
            padding: 10px;
            border: 1px solid #999;
        }

        /* .news后代中的 li */
        .news li {
            border: 2px solid #900;
        }
        /* .news li{
            border: 3px solid #900;
        } */

        /* ol 后代中的 li */
        /* ol li {
            border: 2px solid #900;
        } */

        /* .news .item {
            border: 2px solid #900;
        } */

        .news ol .item {
            border: 2px solid #900;
        }
    </style>
</head>
<body>
    <ul class="news">
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li class="item">今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li>
            今则让奔找，马死程看必沫活，乏俭气，笔。
            <ol class="item">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li class="item">Lorem ipsum dolor sit amet.</li>
                <li class="item">Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
        </li>
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li class="item">
            今则让奔找，马死程看必沫活，乏俭气，笔。
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
            </ul>
        </li>
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
    </ul>

    <ol class="musics">
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li class="item">妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
    </ol>
</body>
</html>

 

5.2子元素选择器

只能一级一级向下找

选择器1 > 选择器2 {}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin-bottom: 100px;
        }

        li {
            margin-top: 10px;
            width: 600px;
            padding: 10px;
            border: 1px solid #999;
        }

        /* 先找.news 从它的子元素中找li */
        /* .news > li {
            border: 2px solid #900;
        } */
        /* .news > li{
            border: 8px dashed #090;
        } */
        /* ul > li {
            border: 2px solid #900;
        } */

        /* .news ol {
            border: 2px solid #900;
        } */
         /* .news ol{
            border:3px solid #009
         } */
        /* .news > li > ol {
            border: 2px solid #900;
        } */
        /* .news > li >ol>.item{
            border: 2px solid #900;
        } */
        .news ul > li {
            border: 2px solid #900;
        }
    </style>
</head>
<body>
    <ul class="news">
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li class="item">今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li>
            今则让奔找，马死程看必沫活，乏俭气，笔。
            <ol class="item">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li class="item">Lorem ipsum dolor sit amet.</li>
                <li class="item">Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
        </li>
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li class="item">
            今则让奔找，马死程看必沫活，乏俭气，笔。
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
                <li>Lorem ipsum dolor sit amet consectetur.</li>
            </ul>
        </li>
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
        <li>今则让奔找，马死程看必沫活，乏俭气，笔。</li>
    </ul>

    <ol class="musics">
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li class="item">妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
        <li>妙么妙视始屯德仍气重恶自于到守憾落玉，人非惜师，他此说，乐。</li>
    </ol>
</body>
</html>

5.3交集选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            width: 600px;
            padding: 20px;
            background: #aaa;
        }

        p {
            padding: 10px;
            width: 560px;
            background: #ccc;
        }

        /* 标签名是p 类名是item */
        /* p.item {
            color: #fff;
            background: #900;
        } */
        /* .wrapper p.item {
            color: #fff;
            background: #900;
        } */
       
        /* 类既是item又是active */
        /* .item.active {
            font-size: 2em;
        } */
        .active.item {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
        <p class="item active">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
        <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
        <p class="item">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
        <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
        <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
        <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
    </div>

    <p class="item">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
    <p class="item">中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
    <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>
    <p>中终身以郭恼，而罪耳失一动极杨仅水我见，着李斯要更不秦拾啊李，夫便竟老友求，是。</p>

    <ul>
        <li class="item">尚所秦病者，绛非自。</li>
        <li class="item active">尚所秦病者，绛非自。</li>
        <li class="item">尚所秦病者，绛非自。</li>
        <li class="item active">尚所秦病者，绛非自。</li>
        <li class="item">尚所秦病者，绛非自。</li>
    </ul>
</body>
</html>

选择器1选择器2 {}

.item.active {}
.active.item {}
div.item {}

5.4并集选择器

h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }

选择器1, 选择器2 {}

5.5 伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :link {
            color: pink;
        }

        :visited {
            color: #099;
        }
        a:link{
            color: chartreuse;
        }
        a:visited{
            color: pink;
        }
        a:hover{
            color: aqua;
        }
        a:active{
            color: black;
        }
/* 
        a:hover {
            color: #990;
        }

        a:active {
            color: #900;
        }

        .news {
            width: 600px;
            padding: 0;
            list-style: none;
        }

        .news li {
            padding: 10px;
        }

        .news li:hover {
            color: #fff;
            background: #900;
        } */
    </style>
</head>
<body>
    <h1>伪类选择器</h1>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.atguigu.com">尚硅谷</a>
    <a href="http://www.douban.com">豆瓣网</a>
    <a href="http://www.4399.com">4399小游戏</a>
    <a href="http://www.fackbook.com">fackbook</a>

    <ul class="news">
        <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
        <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
        <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
        <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
        <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
        <li>了的沫对次种，只终名哥得服，判之丑交千曾在评命，他躲沾，马。</li>
    </ul>
</body>
</html>

:link            选择未访问过的超链接
:visited        选择已访问过的超链接
:hover            鼠标悬停在元素上
:active            鼠标悬停在元素上且鼠标按键按下不抬起

多个伪类选择器一起使用，请按照 :link、:visited、:hover、:active 顺序书写 (love hate 记忆法) 

5.2选择器权重（优先级）

5.2.1 单个选择器之间的权重

ID选择器 > 类选择器、伪类选择器 > 标签名选择器 > 全局选择器

5.2.2组合选择器优先级比较规则

1. 两个组合选择器，先比较ID的数量，数量多者权重高，比较结束
2. ID数量无法分胜负，比较类、伪类的数量，数量多者权重高，比较结束
3. 类、伪类的数量无法分胜负，比较标签名的数量，数量多者权重高， 比较结束
4. 两个选择器权重一致，后面覆盖前面

组合： 并集选择器的组合，各自计算各自的权重，不会放在一起计算

欧冶渃
关注
  • 15
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS-2
qq_39290137的博客
03-30 217
transition 过渡 transition-property 过渡属性 transition-duration 过渡持续时间 transition-delay 延迟过渡 transition-timing-function 过渡速度曲线 animation 动画 @keyframes 关键帧规则 animation-name 动画名称 animation-duration 动画持续时间 animation-delay 动画延迟时间 animation-iterat
前端笔记2 CSS
linyuancsdn的博客
07-18 448
文章目录概念优势用法语法格式引入方式行内引入内部样式表外部样式表三种方式优先级外部样式的好处案例选择器基本选择器标签类id通用选择器 *CSS3 高级选择器层次选择器结构伪类选择器属性选择器其他选择器☆选择器权重CSS样式背景常用属性CSS 3属性简写属性CSS3 渐变色线性渐变径向渐变字体文本CSS3 特性列表表格盒子模型div 标签边框外边距外边距合并网页居中对齐内边距CSS3 新属性box-...
前端练习-CSS布局
qq_42385482的博客
02-08 1829
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
web前端-css边框（border）
苏凉.py的博客
05-27 6159
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录css边框属性css边框样式边框宽度圆角边框css所有边框属性 css边框属性 css的border属性允许您指定元素边框的样式、宽度和颜色。 css边框样式 border-style 属性指定要显示的边框类型。可以同时设置一到四个值（顺序为上边框、右边框、下边框和左..
2.前端笔记-CSS-字体属性
虽然但是
11-23 5352
字体的大小（font-size，带单位px）、字体样式(font-style斜体、正常)、font-weight(字体粗细（不带单位）)、font-family(字体系列微软雅黑)
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 346
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1164
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1655
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 473
【代码】博客前端项目学习day03——框架页。
前端性能优化--懒加载
weixin_43799793的博客
07-19 154
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 327
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 235
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 464
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 377
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 87
thinkphp8图片上传的验证
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 1037
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
web前端 React 框架面试200题（三）
最新发布
柯晓楠
07-21 203
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
Linux上的系统服务——DNS、WEB、NFS 和 AutoFS 服务的详细配置步骤
qq_68600196的博客
07-17 701
现有主机 node01 和 node02，完成如下需求：1、在 node01 主机上提供 DNS 和 WEB 服务2、dns 服务提供本实验所有主机名解析3、web服务提供 www.rhce.com 虚拟主机4、该虚拟主机的documentroot目录在 /nfs/rhce 目录5、该目录由 node02 主机提供的NFS服务共享6、该目录可以通过autofs服务实现自动挂载7、所有服务应该在重启之后依然可以正常使用。
前端使用webSocket与后台建立连接并进行心跳监测机制
On the way
07-18 398
2.在页面初始化的时候调用getWebSocket此方法。首先项目中需要引入websocket。
【芯片设计- RTL 数字逻辑设计入门 番外篇 12 -- SoC 设计中的 ECO】
CodingCos的博客
07-17 611
在芯片设计中，ECO，工程变更订单）是一个关键的环节，用于在芯片设计后期对设计进行必要的调整和优化。ECO通常应用于数字芯片的版图设计，它是对设计的layout进行局部的小范围修改和重新布线的过程，而不影响设计的其他部分的布局布线。ECO的目的是为了节省时间和成本，特别是在芯片设计的后期阶段，当RTL（寄存器传输级）代码冻结后，通过ECO来修正设计中的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

欧冶渃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值