伪类选择器,优先级,模块化 -

首页 > 博客列表 > 伪类选择器,优先级,模块化

博主信息

博文 7

粉丝 0

访问量 5861

专题推荐

更多>

优先级

id > class > tag
用公式来计算 id,class,tag => 0,0,0
实例

<!DOCTYPE html>
<html lang="en">
<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>
        #id {
            color: royalblue;
        }
        body h1 .class {
            color: lightblue;
        }
        h1 {
            color: lightcoral;
        }
    </style>
</head>
<body>
    <h1 class="class" id="id">Hello</h1>
</body>
</html>

模块化

用nth-of-type可以把html的代码更简洁

<!DOCTYPE html>
<html lang="en">
<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 li:nth-of-type(3) {
            background-color: springgreen;
        }
    </style>
</head>
<body>
    <ul class="ul">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ul>
</body>
</html>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

伪类选择器,优先级,模块化

2021-03-30 15:41:34