第三天笔记，CSS语法及选择器

最新推荐文章于 2025-12-16 15:39:53 发布

原创最新推荐文章于 2025-12-16 15:39:53 发布 · 137 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了CSS选择器的权重计算规则，包括通用选择器、标签选择器、类选择器、ID选择器和行内样式的权重，并举例说明了如何使用群组选择器、伪类选择器等。此外，还探讨了不同标签如div、p、h1和a的默认样式，以及文本修饰、边框样式和居中布局等常见CSS属性的用法。

CSS选择器：

继承或*选择器（选择页面的所有标签）权重0

标签选择器（元素选择器）（p，h1，a，b）权重1

类选择器（class选择器）权重10

ID选择器（#）权重100

行内样式style=""; 权重1000

！important（写到以上选择器属性后）权重无穷大

群组选择器（p,h1{}）

div和p和h标签的区别：

div没有上下外边距，p上下外边距16px，h1上下外边距为21.44px，a文字颜色，下划线，鼠标移入有小手

ul上下外边距16px，左内边距40px

border-bottom：下边框 dashed：虚线，solid:虚线

text-decoration: none 无文本修饰(去除下划线)

text-decoration: underline加下划线

margin：0 auto 盒子整体居中

<head>
    <style>
        选择器{
            属性：属性值...;
            ...
        }
    </style>
</head>

通用选择器

<head>
    <style>
        *{
             属性：属性值...;
            ...
        }
    </style>
</head>

标签选择器（元素选择器）

<head>
    <style>
        p{
             属性：属性值...;
            ...
        }
    </style>
</head>

类选择器

<head>
    <style>
        .{
             属性：属性值...;
            ...
        }
    </style>
</head>

id选择器

<head>
    <style>
        #{
             属性：属性值...;
            ...
        }
    </style>
</head>

行内样式

<body>
    <p style="属性：属性值">
        
    </p>
</body>

！important

<head>
    <style>
        #{
             属性：属性值... ！important;
            ...
        }
    </style>
</head>

群组选择器

<head>
    <style>
        p,h{
             属性：属性值...;
            ...
        }
    </style>
</head>

后背选择器

<head>
    <style>
        div/.div p{
             属性：属性值...;
            ...
        }
    </style>
</head>

子代选择器

<head>
    <style>
        div>p{
             属性：属性值...;
            ...
        }
    </style>
</head>

伪类选择器权重10

<head>
    <style>
        a:hover(鼠标移入后显示的效果)nth-child(2)选择偶数{
             属性：属性值...;
            ...
        }
    </style>
</head>

交叉选择器（提高权重）

<head>
    <style>
        div.class1{
             属性：属性值...;
            ...
        }
    </style>
</head>