我有2个"链接",当我点击它们时必须得到一种颜色.但他们也需要在h1标签中.
像这样:
<div id="content" class="work">
<h1 style="border-bottom:1px solid #CCC;"><a id="link-grafisk-design" href="#grafisk-design">Grafisk design</a></h1>
<h1 style="border-bottom:1px solid #CCC;"> / </h1>
<h1 style="border-bottom:1px solid #CCC; width:276px"><a id="link-webbdesign" href="#webbdesign">Webbdesign</a></h1>
</div>
但是当我点击其中一个时,它不会改变颜色.
这是CSS
#webbdesign:target ~ #link-webbdesign {
color:#00A2FF;
}
我想知道这两行之间的区别:
p.intro a{color=# ff99ff;}
p .intro a{color=# ff99ff;}
在第一示例中,在p和之间没有空间.intro,而在第二示例中,它们之间存在空间.
我想用一些例子来解释.
我有一个一开始是空的列表，并使用JavaScript动态填充。现在我想要列表，只有当不为空，有边界，但:empty并parent选择不匹配。
在html.erb文件中，列表声明为：
<ul id="cepage_list" />
li在上面的表单中根据用户输入填充（添加），效果很好。
现在我在CSS中有这个：
<ul id="cepage_list" />
默认样式正确应用，但是带有伪类选择器的样式却很奇怪。这是行为：
li，什么也没有（希望:parent选择器适用） .empty()使用jQuery），确定。但是，如果列表中:parent有child，为什么不能识别伪类li呢？
（已在Chrome和Firefox 14上测试）
假设我有这样的样式定义:
.a.b { ... }
.a.b.c { ... }
有没有办法避免.a.b使用SASS/SCSS进行部分重复？
我有以下CSS和HTML:
.moods a#Action:hover{background: red;};
.moods a#Comedy:hover{background: orange;};
<div class='moods'>
<a id='Comedy'>want to laugh</a>
<a id='Action'>edge of the seat</a>
<a id='Science Fiction'>it's all fantasy</a>
</div>
由于某种原因,css仅影响第一个选择,例如在这种情况下,只有当悬停时Action变为红色.但是,如果我在动作之前放置喜剧,那么喜剧在悬停时会变成橙色.
有人可以帮我解决这个问题吗？
谢谢
有点难以解释,所以这里有一些代码.
所以我有这个CSS,它使所有链接都呈橙色.它包含整个页面.
#pageContent a:link,a:visited, a:hover, a:active {
color: #EE4036;
}
然后我在pageContent id中的某个地方有一个id sideMenu的元素,
#sideMenu a:link, a:visited, a:hover, a:active{
color:#58595B;
}
问题在于,由于某种原因,sideMenu的给定链接颜色会覆盖pageContent的链接颜色,这些链接不是sideMenu的子代.
例如,如果我有
<div id="pageContent" >
<a>this text should be #EE4036</a>
<div id="sideMenu">
<a>this text should be #58595B</a>
</div>
</div>
sideMenu的<a>文本内容将按预期设置为#58595B颜色,但pageContent也是如此,这是我不希望的.
我对CSS有点新意,所以我觉得我错过了一些非常明显的规则,谷歌根本没有帮助.那么,有谁知道发生了什么？
我在一些我写过的CSS/HTML代码中看到了奇怪的结果.我的CSS中有两个不同的类; 我们称它们为classA和classB.A类定义没有边框的表:
div.classA table, th, td { borders:none }
B类定义了具有折叠灰色边框的表:
div.classB table, th, td { border:1px solid grey }
我的HTML然后有
<div class="classB">
<table>
<thead>
<th>Text</th><th>More text</th>
</thead>
</table>
</div>
表头(作为classB应该有边框)看起来没有边框.当我使用Firefox检查页面时,它向我显示classA已经覆盖了classB的设置,即使该表在classA div元素内.
我错过了什么？
如何nth-of-type在一个<span>元素中包含的<li>元素上使用css选择器<ul>？
我本来期望span:nth-of-type(odd)和span:nth-of-type(even)工作,但他们没有.
有问题的页面如下:
<style>
span:nth-of-type(even) {
background-color: grey;
}
span:nth-of-type(odd) {
background-color: blue;
}
</style>
<ul>
<li>
<span>Test 1</span>
</li>
<li>
<span> 2 Test</span>
</li>
</ul>
<br>
Should look like this:
<br>
<span>Test 1</span>
<br>
<span> 2 Test</span>
这是一个JSFiddle来显示实际问题.
<html>
<head>
<style>
input[type='text'], select {
background: blue
}
.error {
background: red
}
</style>
</head>
<body>
<input type="text" class="error"/>
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>
如果班级.error背景为红色,则必须为红色.即使input[type="text"]有蓝色背景.在IE和GC中测试过.