重写css类选择器的样式

最新推荐文章于 2023-09-11 20:04:13 发布

pyers

最新推荐文章于 2023-09-11 20:04:13 发布

阅读量1.8k

点赞数

分类专栏：前端开发类选择器文章标签： css html 经验分享

本文链接：https://blog.youkuaiyun.com/laowangism/article/details/111371463

版权

前端开发同时被 2 个专栏收录

5 篇文章

订阅专栏

类选择器

1 篇文章

订阅专栏

本文通过实例展示了如何在HTML页面中通过在<head>标签内添加<style>来重写原有的CSS类选择器样式。重点解释了重写过程中，已定义样式覆盖和未定义样式继承的规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇以自己搭建注册页面遇到的问题作为展示，来解释如何重写css类选择器的样式

示例展示

原有css样式展示

原有的css样式(类选择器)

.account {
    width: 400px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #000000;
    padding: 10px 30px 30px 30px;
    -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
    box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
}

展示效果。此时的form表单边框为黑色，宽度比较小，无背景色
在这里插入图片描述

修改

在对应的web页面head标签中添加style标签，在style标签对样式进行重写。
css样式重写时，已经定义过的属性会覆盖，未定义过的属性会继承

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
       .account{
       		#  重写边框
            border: 2px solid red;
            # 添加背景色
            background-color: gray;
        }
    </style>
</head>