我想使用以下内容来定位我div中最后一个ul的最后一个链接(a).所以这就是我想到的:
#menu ul:last-child li a {
/*.....*/
}
我不能手动向该元素添加一个类,即使我想动态地执行它,我仍然必须以上述方式定位元素.
任何想法为什么这不起作用？
这是我的代码:
HTML
<div id="corner">
<div id="cornerbox"></div>
</div>
CSS
#corner {
background-color: red;
width: 200px; height: 200px;
}
#corner #cornerbox {
background-color:black;
width: 100px; height: 100px;
opacity: 0.4;
}
#corner:hover #cornerbox, #corner #cornerbox.show{
opacity: 1;
}
JavaScript
$(document).keypress(function(e) {
//console.log("keypress event from document: ",e.which);
if (e.which == 63) { // question mark (?) key
$("#cornerbox").toggleClass("show");
}
});
因此,只要#corner:hover,CSS就会使"#cornerbox"改变不透明度,只要按下问号(？)键,JavaScript就会切换"#cornerbox"类的"show".
我注意到如果我改变上面的CSS看起来像这样:
#corner {
...
}
#corner #cornerbox {
...
}
#corner:hover #cornerbox, #cornerbox.show {
...
}
按(？)键时不改变不透明度,但"#cornerbox"接收类"show".
所有其他可能性都有效
这有效.
#corner { …我正在使用FirefoxDeveloperEdition并遇到意外的选择器优先级.我已经阅读了Smashing Magazine的文章"CSS特异性:你应该知道的事情",并且,据我所知,已经构建了CSS选择器,因为它们应该是为了达到每个特定的预期水平.但是,错误的声明正在被取消.
这是什么问题？我是不是完全围绕选择器特异性的运作？这是一个错误吗？或者是其他东西？
/index.html
<head>
<link href="css/style.css">
</head>
<body>
<section class="hud">
<section class="main float-l">
<a href="#0" class="button">
<div class="outer container">
<div class="inner container">
<p class="show"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. -->
View Details
</p>
<div class="arrow"></div>
<p class="hide"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. …我试图弄清楚为什么.x比*.x预期后者获胜更具特异性.
不*.x应该有0-0-1-1(1类,1标签)的具体情况,而.x只是一个类0-0-1-0？
请考虑以下基本代码:
*.x { color: blue; }
.x { color: red }<p class="x">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nam.</p>它应该是蓝色的.为了演示预期的行为,我替换*为另一个元素(p):
p.x { color: blue; }
.x { color: red }<p class="x">This time it works.</p>我是LESS的新手,我们在中级CSS和预处理器课程中学习了一些关于参数混合的基础知识.我正在我的项目网站上工作,喜欢LESS可以做的事情,但并不总是按照我想要的方式工作.
例如,在第143行附近,我正在设置导航背景颜色,如下所示:
background-color: lighten(@color5, 50%);
@ color5先前在导入的palette.less文件中定义为深紫色.nav元素的背景颜色是预期的淡紫色,告诉我lighten()函数本身正在工作.
但是,在文件的下方,在"桌面"显示的媒体查询中(我使用的是移动优先方法)我设置了nav未访问的链接颜色,如下所示:
color: lighten(@color5, 75%);
我期望这个任务输出更淡的薰衣草色调,但相反,它只显示白色(#ffffff).我仔细检查以确保颜色不仅仅是紫色的超浅色 - 不.它是白色的.
在相同的媒体查询中,我还使用该spin()方法将链接悬停颜色设置为不同的色调.但是,它也没有工作,我的悬停颜色被翻译为白色.没有意义.
以下是我的代码的一些片段,但我不确定SE片段是否与LESS一起使用.或者我在CodePen上发布了它:
CodePen | CAS215 - Wk8 - MobileFirstResponsive
style.less
/*
Assignment: CAS 215 - Module 8 Lecture Assignment
File Name: style.less
Date: 11/17/16
Programmer: Eric Hepperle
*/
@import 'palette.less';
@import 'mixins.less';
/* /END PARAMETRIC MIXINS */
/* MOBILE STYLESHEET ------------------------- */
/* UNIVERSAL SELECTOR */
* {
box-sizing: border-box;
}
/* BODY */
body …当Javascript修改CSS时,CSS特性是什么？
如:
document.getElementById("demo").style.color = "red";
它被认为是内联样式吗？
实际上我想说的是对不起,如果标题是我们的,那么我有一个框架(Richfaces)正在应用它自己的风格.我有一个公司CSS,我不是CSS专家,我只需要覆盖来自richfaces的css,这样就不会在公司CSS中应用任何东西.
以下是来自richfaces的CSS,我不想应用它:
*.rf-dt-hdr-c {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C4C0C9;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #C4C0C9;
background-color: #D4CFC7;
background-image: url(/rfRes/colHdrGrad.png.xhtml?v=4.0.0.Final&db=eAFjZJBjZDBiZBBh!H!!zlXG!1fOH2dgAgA4fAdk&ln=org.richfaces.images);
background-position: top left;
color: #000000;
font-family: Arial, Verdana, sans-serif ;
font-size: 11px;
font-weight: bold;
padding: 4px;
text-align: center;
}
哪些类别选择器规则对于 10 分具有更高的特异性？
.A.E.F .C .D
或者
.A .B .C span
HTML：
<div class="A E F">
<div class="B">
<div class="C">
<div class="D">
<span>17590</span>
<span>Points</span>
</div>
</div>
</div>
</div>
CSS：
.A.E.F .C .D /* span */ {
font-size: 1em;
}
.A .B .C span {
font-size: .95em;
}
这是一个演示该问题的 JS 小提琴：http://jsfiddle.net/UgkZY/
我本以为第一条规则会获胜。5 个类别，而不是 3 个类别 + 1 个类型。然而，第二条规则胜出，因为 .AEF 似乎只得分为 1 级。
如果我使用以下在线CSS特异性计算器，http://specity.keegan.st/，它认为第一条规则将会获胜。事实上，在 Chrome 浏览器中，第二个获胜。
有人可以澄清一下，就 CSS 特异性而言 .ABC 确实被视为一类吗？
顺便说一句，如果我将跨度选择器添加到第一条规则中，它将获胜。
根据 CSS 规范，我认为第一个应该获胜。
http://www.w3.org/TR/selectors/#specificity
LI.red.level /* a=0 …
我在规范Calculating a selector's specificity 中使用了示例来确定选择器的权重。两个选择器都有特殊性：11 分。11 = 10（类名）+ 1（元素名）
根据规范w3c 级联规则，第二个选择器应该覆盖第一个选择器，因为它出现在文件的后面。因此，我的问题是为什么该段仍然是红色的？
p.c11 {
color: darkred;
}
p .c11 {
color: magenta;
} <p>
<p class="c11">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, eius iusto provident laudantium voluptates adipisci voluptatem amet repudiandae ex aspernatur rem voluptatibus recusandae vero corporis distinctio quia reprehenderit dolores facere.
</p>
</p>color父块的属性有一个!important声明。为什么孩子的财产优先？怎么解释？
我看到了特殊性的解释，但我不明白如何将它们应用于这个特殊情况。
也许我错过了文档中的一些基本位置......
div {
color: purple !important;
font-family: 'Open Sans', serif;
font-size: 30px;
font-weight: bold;
}
span {
color: red; /* Why does parent's `!important` lose? */
}<div>
Parent
<span>Child</span>
</div>