CSS 选择器以及优先级

最新推荐文章于 2024-09-21 23:59:03 发布

Echo、江

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量59

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36656427/article/details/133025601

版权

1. id选择器

<style>
    #container {
        width: 100px;
    }
</style>
<body>
    <div id="container"></div>
</body>

2. class选择器 | 类选择器

<style>
    .container {
        width: 100px;
    }
</style>
<body>
    <div class="container"></div>
</body>

3. 元素选择器

<style>
    div {
        width: 100px;
    }
</style>
<body>
    <div></div>
</body>

4. 通用选择器

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
</style>
<body>
    <div></div>
</body>

5. 属性选择器

<style>
    /* 存在title属性的<a> 元素 */
    a[title] {
        color: purple;
    }

    /* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
    a[href="https://example.com"]
    {
        color: green;
    }

    /* 存在href属性并且属性值包含"example"的<a> 元素 */
    a[href*='link'] {
        font-size: 2em;
    }

    /* 存在href属性并且属性值结尾是".org"的<a> 元素 */
    a[href$='.org'] {
        font-style: italic;
    }

    /* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
    a[class~='logo'] {
        padding: 2px;
    }

    /* 表示带有以 class 命名的属性，且属性值是以 link6 开头的元素。 */
    a[class$='link7'] {
        color: red;
    }
</style>
<body>
    <a href="#" title="链接">link1</a>
    <a href="https://example.com">link2</a>
    <a href="https://link.com">link3</a>
    <a href="https://link2.org">link4</a>
    <a class="link logo">link5</a>
    <a class="link621312">link6</a>
    <a class="asdblink7">link7</a>
</body>

6. 选择器列表

<style>
    a,
    p {
        color: red;
    }
</style>
<body>
    <a href="#">1</a>
    <p></p>
</body>

7. 后代选择器

<style>
    ul.container li {
        color: red;
    }
</style>
<body>
    <ul class="container">
        <li>idx</li>
        <li>idx</li>
        <li>idx</li>
    </ul>
</body>

8. 一般兄弟选择器

<style>
    p ~ span {
        color: red;
    }
</style>
<body>
    <span>This is not red.</span>
    <p>Here is a paragraph.</p>
    <code>Here is some code.</code>
    <span>And here is a span.</span>
</body>

8. 相邻兄弟选择器

<style>
    li:first-of-type + li {
        color: red;
    }
</style>
<body>
    <ul>
        <li>One</li>
        <li>Two!</li>
        <li>Three</li>
    </ul>
</body>

9. 伪类

<style>
    p:hover {
        color: red;
    }
</style>
<body>
    <p>hover</p>
</body>

css 优先级

选择器的优先级由四个部分相加

千位：如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

选择器	千位	百位	十位	个位	优先级
`h1`	0	0	0	1	0001
`h1 + p::first-letter`	0	0	0	3	0003
`li > a[href*="en-US"] > .inline-warning`	0	0	2	2	0022
`#identifier`	0	1	0	0	0100
内联样式	1	0	0	0	1000

比较时，按照首位开始比较谁大，比如千位为1，那么优先级最高，如果千位为0，那么看百位，有id就加一，谁大谁优先级高
1000 > 0100 > 0010 > 0001 > 0000
1000 > 0200 > 0030 > 0009 > 0000

*优先级最低为 0000

如果使用vscode，在定义style时，可以鼠标划入类，会显示优先级，如下图：

Echo、江

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫