!important 的使用。

!important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

现在选择的是类选择器 spe2的样式

<!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">

    <title>Title</title>

    <style>

        p{

            color: red;

            font-size: 30px;

        }

        .spe1{

            color: yellow;

            font-size: 40px;

        }

        .spe2{

            color: green;

            font-size: 40px;

        }

    </style>

</head>

<body>

    <div>

        <p class="spe1 spe2">我是什么颜色</p>

        <p class="spe1 spe2">我是什么颜色</p>

    </div>

</body>

对选择器 的样式设置 !important ，这个样式马上应用

<!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">

    <title>Title</title>

    <style>

        p{

            color: red !important;

            font-size: 30px !important;

        }

        .spe1{

            color: yellow;

            font-size: 40px;

        }

        .spe2{

            color: green;

            font-size: 40px;

        }

    </style>

</head>

<body>

    <div>

        <p class="spe1 spe2">我是什么颜色</p>

        <p class="spe1 spe2">我是什么颜色</p>

    </div>

</body>

</html>

前端 CSS 优先级 样式设置important的更多相关文章

  1. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  2. 前端css 同级元素 设置不同样式 :first-child :nth-child() 的操作收藏

    说明:最近在写前端vue  调样式的时候遇到了一个问题 同一个div下对多个同级别的<span>标签进行 边距设置 <div class="shuju-div"& ...

  3. web前端----css选择器样式

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  4. 前端css优先级以及继承

    1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . fo ...

  5. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  6. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  7. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  8. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  9. CSS 特殊样式设置集合

    1. 父窗口宽度不定,要求内部两个子块, 第一个子块宽度固定,第二个子块宽度自适应. 第一个子块宽度固定,定位为绝对定位 position:absolute;  第二个子块设置margin-left即 ...

随机推荐

  1. apply_nodes_func

    import torch as th import dgl g=dgl.DGLGraph() g.add_nodes(3) g.ndata["x"]=th.ones(3,4) #n ...

  2. Python(1) 整型与浮动型

    整型与浮动型 整数/浮动数=浮点型整数/整数 = 浮点型 例如:>>> type(1/1)<class 'float'>>>> type(1/1.0)& ...

  3. Deepin（Ubuntu）安装rpm软件包

    1.首先安装alien和fakeroot这两个软件,alien可以将rpm转换为deb包. 在终端中输入命令 sudo apt-get install alien fakeroot 2.使用alien ...

  4. Python 基本数据类型详解

    1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647在64位系统上,整数的位数为64位,取值范围为-2* ...

  5. IO操作基本步骤

    package com.study02; import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundE ...

  6. 前端面试题常考&必考之--盒子模型和box-sizing（项目中经常使用）

    主要考察width的值,包括padding\border\content等属性??? box-sizing属性是css3特有的哦*** 1>当box-sizing:content-box;时,跟 ...

  7. css雪碧图-css精灵图

    先将图片拼接在一张图上.类似实现的效果图 图片地址为合并后的图片地址,通过background-position调整背景图的位置.效果如: HTML: <div class="logo ...

  8. Codeforces 878A - Short Program(位运算)

    原题链接:http://codeforces.com/problemset/problem/878/A 题意:给出n个位运算操作, 化简这些操作, 使化简后的操作次数不多于5步. 思路:我们可以对二进 ...

  9. BFC、IFC、GFC和FFC

    基本概念 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不 ...

  10. WWDC2017-advanced_animations_with_uikit

    最后修改时间: 2017-12-1 官方视频链接 这个Session主要讲一下的几个内容: Basic(基础的): 动画工作原理 以及 动画如何计时 Interactive and Interrupt ...