标签: css-selectors

有人能告诉我为什么IE 11会忽略我的css文件的以下规则吗？

.navigation.menu ul li:nth-child(7):hover ul,
.navigation.menu ul li:nth-child(8):hover ul,
.navigation.menu ul li:last-child:hover ul {

     right:0;left:initial;

}

所有其他浏览器正在按预期读取和运行此规则,但IE甚至没有看到它.

我有一个问题nth-child,任何想法都错了吗？

HTML:

    <div class="comment">
        <div class="header">
            <div class="by">Euismod nam.</div>
        </div>
        <div class="content">
...
        </div>
        <div class="date">12-15-23</div>
    </div>
    <div class="comment">
        <div class="header">
            <div class="by">Euismod nam.</div>
        </div>
        <div class="content">
...
        </div>
        <div class="date">12-15-23</div>
    </div>

CSS:

/*--*/
.comment {
    width:600px;
    overflow:auto;
    margin:0;
    margin-top:5px;
    padding:0;
    border:solid 1px #CCC;  
    /*border-top:none;*/
}
.comment .header {
    margin:0;
    padding:1px 2px;
    overflow:auto;
    background:#B2A98A;
    color:#FFF;
}
.comment .header:nth-child(even) {
    background:#62798B;
}
.comment .header .by {
    float:right;
    z-index:90;
}
.comment .content {
    margin:0;
    padding:5px 2px;
    overflow:auto;
    background:#FeFeFe;
    color:#000;
} …

我有这样的事情:

<article class="leading-0">
    <h2>
        <a href="link">link title</a>
    </h2>
    <ul class="actions">
        <li class="print-icon">
            <a ...><img...></a>
        </li>
        <li class="email-icon">
            <a ...><img...></a>
        </li>
    </ul>
    <dl class="article-info">
        <dt class="article-info-term">...</dt>
        <dd class="hits">...</dd>
    </dl>
    <p>...</p>
</article>

当你徘徊li在ul.tools我想要设置h2元素的样式.

如果有人能提供帮助并且看看是否可能,我会很高兴.

我记得曾经做过一次,但不记得了.

我想在href链接内的span上添加不同的颜色.但由于某些原因,他们没有反思.请告诉我,我在这里做的错误是什么？

这是小提琴

HTML:

<div class="map_view_buttons">
<a href="draw"><span></span>Draw From Scratch</a>
<a href="add"><span></span>Add Area</a>
<a href="edit"><span></span>Edit Area</a>

CSS:

.map_view_buttons{
float:left;
}
.map_view_buttons a{
    display:inline-block;
    padding:3px 10px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #a8a8a8;
    font-weight:bold;
    color:#000;
    font-size:12px;
    }
    .map_view_buttons a span{
        display:inline-block;
        width:18px; height:18px;            
        vertical-align:middle;
        margin-right:5px;
        border:1px solid #ccc;
        }
        .map_view_buttons a.draw span{background:red;}
        .map_view_buttons a.draw span{background:orange;}
        .map_view_buttons a.draw span{background:green;}

如何以编程方式更改以下img结构中的以下内容？

  <div id="runner" class="nav brand pull-left">
        <a alt="motherboard" href="/tree/">
            <img alt="mega node" src="img.png"></img>
        </a>
  </div>

firefox指向我这个

#runner > a:nth-child(1) > img:nth-child(1)

我已尝试使用标准方法,具有各种命名约定

document.getElementById("#runner").src="icon.png";
document.getElementById("#runner.a.img").src="icon.png";
document.getElementById("#runner.img").src="icon.png";
document.getElementById("mega node").src="icon.png";

我甚至尝试过无用的CSS,

div#runner {
    content:url("img.png");
}

我正在使用jqGrid进行项目并检查它使用的样式我找到了这样的选择器:

.ui-jqgrid tr.ui-row-ltr td { 
... 
}

.ui-jqgrid 当然是一堂课.

td.ui-row-ltr是ui-row-ltr应用于表行元素的类的选择器.

所以我的问题:

1. 它们被空间隔开是什么意思？我知道逗号分离.class1, .class2意味着"应用于class1和class2",但空间分离是什么意思？
2. 什么是td在到底意味着什么？td.class我理解但是class td？

我想在输入字段聚焦时显示div(活动？)在下面的代码中,我想显示.text何时.input聚焦.我正在尝试这个:

HTML:

<div class="box">
    <input class="input" type="text" value="" />
    <div class="text">text</div>
</div>

CSS:

.text { display: none; }   
.input:focus .text { display: block; }

示例:

的jsfiddle

我正在使用最新的firefox 30.0.我想在所需字段的占位符之前插入一个红色字体真棒星.我在Chrome中工作没有问题,但我遇到了FF和.

这是一个说明我的问题的codepen - http://codepen.io/anon/pen/BLibw

我的加价:

<input placeholder="Address" data-required required id="id_street" name="street" type="text" />

我的CSS(sass):

[data-required] {
    &::-webkit-input-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; }
    &::-moz-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; } /* firefox 19+ */
    &:-ms-input-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; } /* ie */
}

注意:结果IE也让我很难过.

谢谢你的帮助!

我有一个CSS规则:

.ajaxwebfont a {text-transform:lowercase;}

我希望它匹配的HTML是:

<a class="fa fa-check-square-o ss-prime ss-cmd ajaxwebfont" href="..">Click me</a>

正如您所看到的,目标元素中还有其他类用于定义webfont.但是我希望我只需要匹配"ajaxwebfont".

思想赞赏.

这是我基本上想要做的事情.

http://jsfiddle.net/miiicheellee/aHwS8/151/

HTML:

<ul id="Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer">
<li><a href="" class="mainPage">1</a></div>
<li><a href="" class="mainPage">2</a></div>
<li><a href="" class="mainPage">3</a></div>
</ul>

CSS:

.mainPage:nth-of-type(2) a{
 background: red;
}

<!-- how would I get this to work if the list items do NOT have an identification? --!>

问题是我无法使用列表项的标识,因为我的网站上有ul和li的复杂嵌套,虽然我知道这样可行.有没有其他方法可以使用我在jsfiddle上的方法来做到这一点？换句话说,请不要操纵HTML - 遗憾的是,我无法控制ID和类名.