标签: css-specificity
为什么我不能打多个班级的ID？
可能重复:
CSS特异性的要点
这是我的意思的一个例子:
不知何故,1个ID将击败看似无限数量的类.这是如何计算的？
<style>
div {
height:200px;
width:200px;
}
#big .little {
/* Specificy value = 110 */
background-color:red;
}
#big .little.little {
/* Specificy value = 120 */
background-color:blue;
}
.little.little.little.little.little.little.little.little.little.little.little.little.little {
/* Specificy value = 130, why doesn't this win? */
background-color:green;
}
</style>
<div id="big">
<div class="little"></div>
</div>?
推荐指数
解决办法
查看次数
两个css规则"看似"具有相同的特异性权重,但不会产生相同的结果
好吧,我正在尝试将CSS级联和特异性理解为"科学",而不是总是将其视为"命中或错过"方法.我希望有人会帮助我.
我有一条规则:
.bluebutton {margin: 0 10px 6px 0;} /* rule 1 */
我需要覆盖以更改特定实例中的边距.
所以我添加了一个class到div写道:
.aside-right .bluebutton a {margin:30px 0 0 100px;} /* rule 2 */
但是,规则2没有覆盖规则1.
所以我将规则2修改为:
.aside-right a.bluebutton {margin:30px 0 0 100px;} /* rule 3 */
它会覆盖" .bluebutton"规则./*规则1*/
起初我写了这个HTML
<a class="blueButton aside-right" href="enrollNow.html"><span>Enroll Now</span></a> <!-- html-1 -->
然后我修改并包含a中的按钮div并写道:
<div class="aside-right"><a class="blueButton" href="enrollNow.html"><span>Enroll Now</span></a></div> <!-- html-2 -->
html-2使用规则3.
有人可以帮助我理解为什么规则3会覆盖规则1,规则2是否会覆盖规则1？看起来规则2和3具有相同的权重(对我而言).是不是因为第2个目标的任何anchor标记与任何元素中class的.bluebutton和.aside,但规则只3个目标anchor标签用class的.bluebutton？我希望我解释了我想要清楚理解的内容. …
推荐指数
解决办法
查看次数
HTML.将具有子类的多个类分配给元素
我正在努力学习HTML课程.我在CSS中有这些类:
.a{}
.a .b{}
.a .c{}
我正在尝试为这样的元素分配两个类:
<div class="a b"></div>
<div class="a c"></div>
但这些都不起作用,元素只继承"a"类.我认为逻辑上必须以绝对方式分配第二类,如:
<div class="a (a b)"></div>
但我找不到正确的方法.也许我正在尝试做的是愚蠢但我找不到另一种方式(保持CSS的特异性).
推荐指数
解决办法
查看次数
不能将<a>元素与列表分开设置
我有一个ul:
<ul class="myListClass">
<li><a class="theSelected" href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
文本的颜色通过样式应用:
.myListClass li a
{
color: red;
}
我希望这个类theSelected有不同的颜色,但这对样式没有影响:
.theSelected
{
color: white;
}
知道为什么吗？
推荐指数
解决办法
查看次数
List项的CSS颜色没有变化
我把一个class='active'放在主页列表项上:
为什么不改变它的颜色？
body {
background: #000;
}
#wrapper {
width: 68%;
margin: 0 auto;
/*border:1px solid #000;*/
background: #fff;
margin-top: 55px;
}
.container {
padding: 20px;
/*border:1px solid red;*/
border-bottom: 3px solid #d6e1df;
}
#header {
/*border:5px solid #4b9f52;*/
padding: 0 100px 0 100px;
text-align: center;
font: 18px Josefin;
color: #bbb;
font-weight: 100;
padding-top: 0;
}
#header h1 {
font-family: Roboto;
font-size: 30px;
text-transform: uppercase;
font-weight: 100;
color: #5d5d5d;
/*border:1px solid #000;*/
}
ul {
margin: 0;
padding: …推荐指数
解决办法
查看次数
not()和first-child选择器之间的特异性
所以我们有以下关于not()和p:first-child{}selectors的例子.这是一个例子:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
</head>
<body>
<p>This a paragraph.</p>
</body>
</html>
为什么段落最后是红色的？有人可以解释(如果可能的话)为什么 p:first-child{}比not()选择器具有更大的特异性???
推荐指数
解决办法
查看次数
CSS和特异性 - 类vs ids
考虑以下html:
<div id="rightBar">
<div class="barElement">
<div class="barText"><a href="#">Not underlined</a><br /></div>
<div class="barLinks"><a href="#">Should be underlined</a></div>
</div>
</div>
以下css:
#rightBar a
{
text-decoration: none;
}
#rightBar a.barLinks
{
text-decoration: underline;
}
"应加下划线"链接没有下划线,不应该是因为它继承了类barLinks和id右栏.另外'#rightBar a.barLinks'(0,1,1,1)比'#rightBar a'(0,1,0,1)更具特异性,所以它应该覆盖后者吗？
除了使用任何内联规范(css或html)之外,我还能如何得到"应加下划线"链接的下划线
推荐指数
解决办法
查看次数
Css忽略了类规则
非常基本的问题,但似乎我的CSS忽略了我的类规则,仍然在左侧和右侧应用填充:
这使它落到了最后.有人能看到我在做错了吗？
#num {float: left; background: pink; width: 16.8%; text-align: center; margin: 2%;}
.first {margin-left: 0px; background: blue; height: 50px;}
.last {margin-right: 0px;}
<div id="num" class="first">0</div>
<div id="num">1</div>
<div id="num">4</div>
<div id="num">6</div>
<div id="num" class="last">9</div>
推荐指数
解决办法
查看次数
JavaFX Tableview使特定单元格着色
TableColumn tc = new TableColumn();
tc.getStyleClass.add(".style in css file")
我用css文件设置tablecolumn.我想让每个细胞都有不同的背景.有什么办法吗？
tableColumn row 1 bakcground color = green,row2 = red,row3 = blue ....等
推荐指数
解决办法
查看次数
背景颜色超过背景图像 - 原因是什么？
我遇到了奇怪的问题（对于我作为 CSS 世界的初学者来说）。我试图在其顶部有一个带有透明颜色的背景图像。图像是主页背景：
body {
font-family: 'Raleway', 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
background: rgba(0,0,0,.3) url('..img/image.jpg') no-repeat;
background-size: cover;
min-height: 100vh; }
这对我不起作用。不知道为什么？
我检查了开发工具，添加了单独的背景颜色，但效果不佳。我试图在这里找到解决方案：Semi-transparent color layer over background-image? 和 treid 提出的解决方案。不适合我。
但是当我添加类并创建此行时：
.body {
background:
linear-gradient(
rgba(0, 0, 0,.5),
rgba(0, 0, 0,.5)
),
url('../img/bg_image.jpg') no-repeat;
background-size: cover; }
有效！但我还是不知道为什么？
是特异性问题吗？也许有什么不同？如果有人可以回答我的问题（以 qucik 为例），我将不胜感激。
所以我自己找到的解决方案是上面的代码，但我不明白之前的尝试对我不起作用。
干杯，卡米尔
css background background-image css-specificity background-color
推荐指数
解决办法
查看次数
为什么 BODY 标签不覆盖 HTML 标签属性？
我已将此 css 应用于我的 html 文档：
html {
background-color: red;
}
body {
background-color: yellow;
}并且页面的背景变为红色而不是黄色。body 在 html 之后，所以它必须覆盖html 的红色。为什么不发生？提前致谢。
推荐指数
解决办法
查看次数
标签 统计
css ×11
css-specificity ×11
html ×7
class ×2
background ×1
css3 ×1
javafx ×1
tablecolumn ×1
tableview ×1