!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. eclipse把函数内容折叠的方法

    eclipse 将方法折叠要先启动折叠功能启用方法:Ctrl+ / (小键盘) 或者:右键点击行号左边的空白,弹出的选项中,选择“Folding”下的“Enable Folding”这样启动foldi ...

  2. getopt：命令行选项、参数处理

    在写shell脚本时经常会用到命令行选项.参数处理方式,如: ./test.sh -f config.conf -v --prefix=/home -f 为短选项,它需要一个参数,即config.co ...

  3. django开发环境搭建（参考流程)

    django开发环境搭建(参考流程) 2013-08-08 01:09:06 分类: LINUX 原文地址:django开发环境搭建(参考流程) 作者:bailiangcn 对于一个初学者,在实际的开 ...

  4. spark-2.1.1 yarn(高可用)搭建

    一.概述 spark分布式搭建方式大致分为三种:standalone.yarn.mesos.三种分类的区别这里就不一一介绍了,不明白可自行了解.standalone是官方提供的一种集群方式,企业一般不 ...

  5. Delphi 2010 secondsBetween Bug

    在设置定时任务时,无意之间发现一个BUG, 定时在00:10:00的任务,执行了2次, 百思不得其解, 一调试发现, 00:10:00,00:09:59的secondsBetween结果值是0, 正确 ...

  6. A Network in a Laptop: Rapid Prototyping for Software-Defined Networks

    文章名称:A Network in a Laptop: Rapid Prototyping for  Software-Defined Networks 文章来源:Lantz B , Heller B ...

  7. Internet History, Technology, and Security（week4）——History: Commercialization and Growth

    Explosive Growth of the Internet and Web: The Year of the Web 1994年后,由NCSA的老员工们构成的Netscape(网景)的成立.Ne ...

  8. JSP异常处理

    JSP异常处理 当编写JSP程序的时候,程序员可能会遗漏一些BUG,这些BUG可能会出现在程序的任何地方.JSP代码中通常有以下几类异常: 检查型异常:检查型异常就是一个典型的用户错误或者一个程序员无 ...

  9. [Codeforces 274E]:Mirror Room（模拟）

    题目传送门 题目描述 有一个$n\times m$的格子图,其中有一些是黑色的,另一些为白色.从某个白色格子的中心点向左上($NW$),左下($SW$),右上($NE$),右下($SE$)四个方向中的 ...

  10. leetcode-mid-array-334 Increasing Triplet Subsequence-NO

    mycode   time limited class Solution(object): def increasingTriplet(self, nums): """ ...