标签: css-selectors

这是我的HTML:

<dl id="id">
    <dt>test</dt>
    <dd>whatever</dd>
    <dt>test1</dt>
    <dd>whatever2</dd>
    ....
</dl>

我想选择第三个dd,但我不能让它工作.这是我试过的:

dl#id dd:nth-child(3) {  
     color: yellow;
}

风格不适用,哪有错？

谢谢!

是否可以简化以下css规则,以便我不必.simpleTable.cellBorders为所有元素(td和th)复制类选择器？

.simpleTable.cellBorders td, .simpleTable.cellBorders th {
    border: 1px #ccc solid;
}

这个想法是,如果表具有类simpleTable并且cellBorders分配如下,则td和th单元格具有边框:

<table class="simpleTable cellBorders">
    <tr><th>My Header</th> ... </tr>
    <tr><td>Some cell</td> ... </tr>
</table>

好的,看一下分配给项目的CSS样式表中的一些代码,我注意到了这一点:

* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

这有点做什么？它究竟影响了哪些元素？奇怪的是,从来没有听说过使用星号作为选择器或其应该是什么.星号到底做了什么？

我正在尝试为网站上的内容创建一个阻止的网格,该网格遵循如下所示的模式.它必须完全配置CSS,没有JavaScript!

模式:

| - - - - | => 1 x 100%
| - - | - - | => 2 x 50%
| - - | - - | => 2 x 50%
| - - - - | => 1 x 100%
| - - | - - | => 2 x 50%
| - - | - - | => 2 x 50%
| - - - - | => 1 x 100%
| - - | …

我试图blockquote使用CSS伪类在页面的任一侧(奇数和偶数)上交替引用nth-child.由于某种原因(odd)不起作用.有任何想法吗？

该的jsfiddle.

HTML.并不像看起来那么复杂.只是一大堆文本和一些块引用.

<div class="post_content">
                                <p>Maxis has long been a household name for producing and bringing to market simulation games which appeal to the mass-market, including The Sims and SimCity. With its latest instalment of SimCity, Maxis has once again created a popular game, selling over 1.1 million copies in its first two weeks. However, Maxis hasn&#8217;t always been so successful, with a variety of unsuccessful titles to its name.</p>
<p><span …

我几年来一直在使用纯CSS导航,最近我们开始在我工作的公司建立一堆移动网站.我真的想继续使用纯CSS,并注意依赖jQuery,但在移动网站上,下拉菜单无法正常工作.

.click();在CSS3中有类似于jQuery的事件吗？基本上,当用户点击导航链接时,我希望下拉菜单打开并保持打开状态.我试过环顾四周,但似乎找不到任何东西.

似乎Chrome(27.0.1453.116)和IE(10.0.9200.16618 w/update to 10.0.6)都受到列出的CSS规则阻塞的影响.

给定以下CSS规则,第一个仅应用.如果我切换顺序,渲染切换.同样,an !important也会强制应用后面的规则,但第一个仍未应用.

input[type="radio"]:checked + label>div { background-color: #00A; };
input[type="radio"]:checked + label>span { color: #A00; };

这是JSFiddle上的一个MWE:http://jsfiddle.net/jzBRR/

任何反馈/建议(特别是关于最佳方法)或其他CSS + HTML等效解决方案.

我总是使用:在CSS之前意味着将内容放在选择器之前.我从来没有过任何这方面的问题,但是,我已经横跨东西是困惑我无意中发现,其中一个选择的:前追加里面的元素,而不是来之前它.我不明白为什么会这样.

这是一个小提琴:http://jsfiddle.net/vMtct/1/

这是基本代码:

<div class="block">
  <p>But this &lt;p&gt; will have content <em>before</em>.</p>
</div>

.block {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 50px; }
.block:before {
  background: #eeeeee;
  content: "Here is something that print's inside the selector";
  display: block;
  padding: 20px;
  margin-bottom: 20px; }
p:before {
  display: block;
  content: ">>>"; }

为什么你不能在CSS中使用数字,还有另一种方法可以完成这项工作吗？我有以下代码:

<div class="center 400-width" id="position">
    <div class="" id="header">
        Header
    </div>
    <div class="" id="content">
        Content
    </div>
    <div class="" id="footer">
        Footer
    </div>
</div>

CSS选择类400-width,这意味着容器的宽度为400px.这background-color是为了检查它是否属实.

.400-width{
    width:400px;
    background-color:blue;
    color:white;
}

它现在不会发生,你可以在这里看到

我通过替换400-来解决问题four.所以它变成了fourwidth.

我一直在搜索和阅读CSS优先级,我认为我有正确的代码,但它不起作用.我希望所有链接都是蓝色的,除了那些具有class ='green'的链接.CSS代码是:

a.green :link{
    color: green;
    text-decoration: none;
}
a.green :visited{
    color: green;
    text-decoration: none;
}
a:link {
        color: blue;
        text-decoration: none;
}   
a:visited {
        color: blue;
        text-decoration: none;
}
a:hover {
        color: orange;
        font-style: italic;
} 

但结果是所有链接都以蓝色显示.任何帮助都将受到欢迎.