前端-css-2 - 技术栈

1.背景样式

|-----------------------|------------|---------------------------------------------------------|
| 属性名 | 作用 | 属性值 |
| background-color | 背景颜色 | 颜色 |
| background-image | 设置背景图像地址 | url(地址) |
| background-repeat | 设置背景图像重复方式 | repeat：重复。 repeat-x：横向重复。 repeat-y：纵向重复。 no-repeat：不重复。 |
| background-position | 设置背景图像位置 | 关键字。两个长度表示的坐标。百分比 |
| background-attachment | 背景图像固定 | scroll：随元素滚动，默认值。fixed：固定。 |
| background | 背景复合属性 | 多个值使用空格分隔 |

1.1背景颜色

元素默认背景颜色是透明,background-color的默认值是 transparent（透明）

给 body 设置背景色就是给整个页面设置背景色

html 复制代码

<!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使用关键字设置属性值：

html 复制代码

<!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轴

html 复制代码

<!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使用百分比设置属性值：

html 复制代码

<!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，背景图像定位的坐标原点是视口的左上角

背景图像只能显示图像与元素位置重合的位置

html 复制代码

<!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：移动图标。 |

html 复制代码

<!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-side | caption-side | top：表格上面。 bottom：表格下面 |
| empty-cells | 没有内容的单元格显示还是隐藏 | show：显示，默认值。 hide：隐藏 |

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

3.1table-layout列宽固定

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

设置列宽固定

html 复制代码

<!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 设置单元格之间的距离

html 复制代码

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

3.3border-collapse 合并单元格边框

不合并时

合并后

html 复制代码

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

3.4caption-side 标题位置

将标题放到底部

html 复制代码

.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 没有内容的单元格显示还是隐藏

html 复制代码

<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，设置列表项图标

html 复制代码

 <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 设置列表项图标位置

html 复制代码

 <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(图片地址)

html 复制代码

 <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 {}

html 复制代码

<!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 {}

html 复制代码

<!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交集选择器

html 复制代码

<!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并集选择器

html 复制代码

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

选择器1, 选择器2 {}

5.5 伪类选择器

html 复制代码

<!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组合选择器优先级比较规则

两个组合选择器，先比较ID的数量，数量多者权重高，比较结束

ID数量无法分胜负，比较类、伪类的数量，数量多者权重高，比较结束

类、伪类的数量无法分胜负，比较标签名的数量，数量多者权重高，比较结束

两个选择器权重一致，后面覆盖前面

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