CSS进阶学习之特别技巧

插件

多个标签拥有一些相同的属性，同时拥有一些不同属性，可以给这些拥有相同属性的标签添加一个额外的class，并将这些相同的属性写在这个class中，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        .a1 .item{
            background-color: blue;
            color: white;
        }
        .a2 .item{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <div class="a1">
        <h1 class="item">alex</h1>
        <h1 class="item">seven</h1>
    </div>
    <div class="a2">
        <h1 class="item">alvin</h1>
        <h1 class="item">eric</h1>
    </div>
</body>
</html>

原始写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        .plugin{
            color: white;
        }
        .a1 .item{
            background-color: blue;
        }
        .a2 .item{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="a1">
        <h1 class="item plugin">alex</h1>
        <h1 class="item plugin">seven</h1>
    </div>
    <div class="a2">
        <h1 class="item plugin">alvin</h1>
        <h1 class="item plugin">eric</h1>
    </div>
</body>
</html>

改良写法

:after的特殊用法

当一个块标签a内只包含一个块标签b，而b的属性有float时，会出现b撑不起a的情况（即不论b的高度是多少，a的高度仍然是0）为了让a能够保持与b的高度同步需要在b后添加一个块标签c并赋予其clear：both的属性，即：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        .a{
            background-color: red;
        }
        .b{
            float: left;
        }
        .c{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">123</div>
        <div class="c"></div>
    </div>
</body>
</html>

View Code

若出现多个类似的标签，写过多的标签c显然是不靠谱的，可以利用：after来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        .a{
            background-color: red;
        }
        .b{
            float: left;
        }
        .clearfix:after{
            display: block;
            clear: both;
            content: '随意填写';
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="a clearfix">
        <div class="b">123</div>
    </div>
</body>
</html>

View Code

：hover的特殊用法

对标签a使用：hover只能在鼠标放在标签a时改变自己本身的属性，但若是在标签a内含有其他标签b，却无法改变标签b的属性。为了实现当鼠标放在a上时，可以改变器子标枪b的属性，可以使用a：hover .b来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        .a{
            background-color: #3b5998;
        }
        .b{
            background-color: red;
        }
        .a:hover .b{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="a">123
        <div class="b">456</div>
    </div>
</body>
</html>

View Code