CSS选择器复习

最新推荐文章于 2024-08-21 11:04:16 发布

三月，

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量111

点赞数

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44879122/article/details/116465241

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择器优先级

选择器	优先级
继承或*	0 0 0 0
标签选择器	0 0 0 1
类选择器或伪类选择器	0 0 1 0
id选择器	0 1 0 0
行内样式	1 0 0 0
！important	无穷大
复合选择器	叠加但不进位

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>
        /* 通配符选择器 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 标签选择器 */
        h1 {
            color: red;
        }

        /* 类选择器 */
        .blue {
            color: skyblue;
        }

        /* id选择器 */
        #four {
            color: orange;
        }

        /* 后代选择器 */
        .hot ul li a {
            color: pink;
        }

        /* 子选择器 */
        .hot>a {
            color: rgb(68, 228, 148);
        }

        /* 并集选择器 */
        h1,
        .hot {
            background-color: #666;
        }

        /* 伪类选择器 */
        /* 链接伪类选择器 */
        .test a:link {
            color: pink;
        }

        .test a:visited {
            color: red;
        }

        .test a:hover {
            background-color: skyblue;
        }

        .test a:active {
            background-color: orange;
        }

        input:focus {
            background-color: pink;
        }
    </style>
</head>

<body>
    <h1>h1标题 标签选择器 red类</h1>
    <h2 class="blue">h2标题 类选择器</h2>
    <h3 class="blue">h3标题 类选择器 可以同时选中我和h2</h3>
    <h4 id="four">h4标题 id选择器</h4>
    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>
    <ul class="test">
        <li><a href="#">link:pink</a></li>
        <li><a href="#">visited:red</a></li>
        <li><a href="#">hover:bgc_skyblue</a></li>
        <li><a href="#">active:orange</a></li>
    </ul>
    <input type="text" value="表单标签">
</body>

</html>

三月，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器复习

选择器优先级选择器优先级继承或* 0 0 0 0 标签选择器 0 0 0 1 类选择器或伪类选择器 0 0 1 0 id选择器 0 1 0 0 行内样式 1 0 0 0 ！important 无穷大复合选择器叠加但不进位 HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset.
复制链接

扫一扫

专栏目录