相关疑难解决方法(0)

我应该疯了吗？

.project.work:first-child:before {
  content: 'Projects';
}
.project.research:first-child:before {
  content: 'Research';
}

<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project research">
  <p>abcdef</p>
</div>

projects:first-child工作正常,research:first-child不坚持.有任何想法吗？

演示它不起作用,但最好的方法是什么？

选择具有某个类的第一个元素的语法是什么？请指定该选择方法是否是CSS3或CSS2.1的一部分.

是否可以编写CSS规则来选择没有特定类的元素的第一个子元素？

例:

<div>
    <span class="common-class ignore"></span>
    <span class="common-class ignore"></span>
    <span class="common-class"></span>
    <span class="common-class"></span>
</div>

在这种情况下,我想选择第一个span没有课程ignore.我试过这个,但似乎没有用:

.common-class:first-child:not(.ignore) {
    ...some rules...
}

更新:

如果我向一个名为父div的类添加一个类,那么parent-classJukka建议的选择器的修改版本可以工作,除非第一个span类ignore在第一个没有之后.上述选择器如下:

.parent-class > .common-class.ignore + .common-class:not(.ignore) {
    ...some rules...
}

我很难弄清楚为什么下面的代码在Safari中呈现蓝色,但在Chrome和Firefox中呈现红色.

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

<p>
    <em>FOO</em>
</p>

https://jsfiddle.net/hzcLpf9L/

显然,Chrome和Firefox似乎不支持:not()其中包含多个级别的CSS选择器.(可能的错误？)

我非常喜欢:not()选择器,我使用Safari开发,因此当我在Chrome上发现我的网站时,我几乎心脏病发作.任何解释为什么这种奇怪的行为发生将受到高度赞赏.

可以说我们有以下代码:

<node>
  <element bla="1"/>
  <element bla="2"/>
  <element bla="3"/>
  <element bla="3"/>
  <element bla="3"/>
  <element bla="4"/>
</node>

你会如何选择属性等于3的第一个孩子？我在想,也许这可以做到这一点:

element[bla="3"]:first-child

......但它没有用

为什么不能:not(:last-of-type)在以下情况下工作？我该如何解决？

JSFiddle:http://jsfiddle.net/C23g6/589/

HTML:

<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">Shouldn't be Red</div>
<div class="hello">------------------</div>

CSS:

.comment:not(:last-of-type) {
    color: red;
}

我正在尝试通过其索引或迭代来定位一个类元素(在DOM中出现多次),严格使用CSS.

我知道实现这个的几种不同方法:我可以在一个数组中抛出元素并检索所述元素的特定索引(Javascript).我可以用#ID标记我想要定位的元素.我可以通过指定attribute(.element[href="link"])来优化目标元素.伪类:first-child和:last-child只能定位(父)元素的儿童(咄!).

示例:我.class在DOM中出现了5次,我想影响该元素第3次迭代的CSS属性.class.

我希望有一个伪类,.element:index-3.那里可能有一些东西,让你做到这一点.

我想做一些类似于justify-content:space-aroundor的事情justify-content:space-between，但使用：

• x 个项目并排在左侧，
• y 个项目并排在中间，
• z 项目并排在右侧。

通过换行元素会很简单，但我不能，因为这些项目（.left、.middle、.right）将是影响下面元素样式的复选框（并且没有良好支持的父选择器）。

我找到了这个答案来模拟first-of-class右侧，但没有找到类似于 emulate 的东西last-of-class。

/* emulate first-of-class */
.container>.right {
  margin-left: auto;
}

.container>.right~.right {
  margin-left: unset;
}

这是我当前尝试的一个片段：

/* emulate first-of-class */
.container>.right {
  margin-left: auto;
}

.container>.right~.right {
  margin-left: unset;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

input {
  display: none;
}

label {
  padding: 0 10px;
  background-color: orange;
}

.container>.right {
  margin-left: auto; …

我有一个动态列表,其中包含可见和隐藏的项目:

<ul>
    <li class="hidden">
    <li class="hidden">
    <li>
</ul>

我想将样式应用于列表中未隐藏的第一个元素.

我的第一个元素的代码:

ul li:first-child{
  font-size:10px;
}

我的代码获取非隐藏元素

ul li:not(.hidden){
  font-size:10px;
}

如何在跨浏览器解决方案中合并这两者？理想情况下它会是这样的:

ul li:not(.hidden):first-child

(哪个不起作用)

可以将CSS选择器传递给jQuery函数,例如:

jQuery('h1 + h2');

jQuery的也有一些过滤器,如:even和:odd:

jQuery('tr:even');

我正在寻找某种语法规则来区分这两种规则并且我在想,也许jQuery过滤器总是使用a :.

但是,一些CSS选择器也使用了:.例如:

• :last-child
• :root
• :empty
• :target

有没有人知道它是CSS选择器还是正在使用的jQuery过滤器？