CSS 属性设置优先级问题

1.多个选择器可能会选择同一个元素,有3个规则,从上到下重要性降低:       !important的用户样式       !important的作者样式       作者样式       用户样式       浏览器定义的样式 

2. CSS规范为不同类型的选择器定义了特殊性权重,特殊性权重越高,样式会被优先应用。 权重设定如下: html选择器,权重为1; 类选择器,权重为10; id选择器,权重为100; 这里还有一种情况:在html标签中直接使用style属性,这里的style属性的权重为1000; 即如下情况: #x34y {color:red} <p id=x34y style="color:green">  优先选择style=""设定的样式。 

例子: h1{color:blue}  权重为1 p  em{color:yellow}  权重为2 .warning{color:red}  权重为10 p.note em.dark{color:grag}  权重为22 #main{color:black}  权重为100     这里还有一种情况: 权重一样时如何处理? 

3.CSS样式的层叠原则——谁离我近,谁说了算。 当权重一样时,会采用“层叠原则” 后定义的会被应用。 如:p{color:yellow}         p{color:red} 作用到这里   <. p >我的什么颜色呢?< /p> 结果会是red的。 

4.CSS样式的特殊标记——谁有特权,谁说了算。 如果有人看不顺眼,非得要自己说了算,那可以搞点特权,如下即可 p {color:blue !important;} 加上 !important; 可将自己权重设为最高。
时间: 2024-10-21 23:46:49

CSS 属性设置优先级问题的相关文章

css属性设置元素的垂直对齐方式

vertical-align 属性设置元素的垂直对齐方式. 可能的值 值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-he

前端教程(9)css入门教程-css属性设置

一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜 3.font-size:文字大小 fs:一般是12px或13px或14px 注意: 1.通过font-size设置文字大小一定要带单位

「CSS」文本编排相关的CSS属性设置

1.font-family:设置字体族. 格式为font-family:字体1,字体2,--,通用字体族|inherit. 通用字体族,是指一类相似的字体.W3C的CSS规则规定,要指定一个通用字体族,避免客户端没有安装指定字体时能使用本机上的通用字体族中的字体.该属性及其值的涵义如下图 2.font-size:设置文本的大小.该属性及其值的涵义如下图 3.font-weight:设置文本加粗.该属性及其值的涵义如下图 4.font-style:可设置字体是正常还是斜体.该属性及其值的涵义如下图

css属性设置

position属性 static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用,默认值. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进

css属性设置第几行出现省略号 设置单行省略号

设置第几行出现省略号 display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 设置单行出现省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 原文地址:https://www.cnblogs.com/HeighWord/p/11444519.html

强制汉字词组换行css属性设置

<table border=1><tr><td width=300><a style="white-space:nowrap">中文</a><a style="white-space:nowrap">中文</a><a style="white-space:nowrap">中文</a><a style="white-space

jQuery修改css属性

jQuery CSS 操作jQuery 拥有三种用于 CSS 操作的重要函数:$(selector).css(name,value)$(selector).css({properties})$(selector).css(name) 函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值:实例$(selector).css(name,value)$("p").css("background-color","red"); 函

agruments应用——求出函数参数的总合&amp;&amp;css函数——设置/读取对象的属性&amp;&amp;当前输入框高亮显

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS基础学习十四:盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "