标签: pseudo-class

我面临开发自定义单选按钮的任务。为了避免样式问题，我想知道所有可能的预定义状态（例如选中、活动等），以便为它们制定 CSS 规则，以确保我不会出现一些意外的样式。

这些状态及其组合是什么？

为什么w3schools说我们在CSS中编写锚点伪类时应该a:link先写然后a:visited再写a:hover最后a:active才是有效的？

来自：https://www.w3schools.com/css/tryit.asp?filename=trycss_link

伪类的顺序如何影响有效性？

我在同一容器下有一个元素列表。其中一些具有A级，其他具有B级级。我正在寻找一个 CSS 选择器来选择 A 组中的第一个 A 元素和 B 组中的第一个 B 元素。

例子：

    <style>
    .A { background: red; }
    .B { background: blue; }
    </style>
    <ul class="list">
      <li class="item A">AAA</li><!-- I want to select this -->
      <li class="item A">aaa</li>
      <li class="item A">aaa</li>
      <li class="item B">BBB</li><!-- I want to select this -->
      <li class="item B">bbb</li>
      <li class="item B">bbb</li>
      <li class="item A">AAA</li><!-- I want to select this -->
      <li class="item A">aaa</li>
      <li class="item A">aaa</li>
    </ul>

请注意，使用伪选择器:first-of-type将不起作用，因为它将选择没有组关系的类型的第一个元素。

尝试使用 …

在意识到你不能有一个内联伪类 - 如何写一个:悬停在内联CSS？- 我调查了Javascript onMouseOver和onMouseOut模拟:hover伪类的事件做同样的工作.当鼠标位于文本上方时,我正试图从文本中删除下划线.是否有人可以提供的Javascript片段可以做到这一点？

我尝试过onMouseOver="this.style.textDecoration="none"",但我认为对比鲜明的报价会让一切都失败.

有任何想法吗？

注意:遗憾的是,必须在不使用外部或内部样式表(仅内联)的情况下实现此效果.

我试图通过使用添加替代行颜色div nth-child(odd).

我需要为具有类名alternative_cls但不具有不同类名的div添加替代颜色.

但问题是它不是跳过具有不同类名的div,替代颜色正在应用包括名为div的不同类.

这是CODE FIDDLE

我想要的是

我有一个简单的设置:链接,a:访问过:a hover和a:active all在我的样式表的顶部定义.我也有一个div,我已经为它内部的锚点定义了一个:链接颜色.当我这样做时,这些链接不会继承剩余的伪类用于悬停和活动....直到我点击该div的链接并因此被"访问",此时伪类开始工作.为什么是这样？

CSS ......

a:link {
    color: blue;
}

a:visited {
    color: purple
}

a:hover {
    color: red;
}

a:active {
    color: pink;
}

#theDiv a:link {
    color: green;
}

HTML ...

<a href="#33">The First Link</a>
<div id="theDiv">
    <a href="#33">The Second Link</a>
</div>

http://jsfiddle.net/ZKztj/7/

我需要选择<input type="submit">没有类说明符的所有元素.

附:

<input class="Submit" type="submit" value="Save" name="action_1">
<input class="Button" type="submit" value="Save as" name="action_2">
<input                type="submit" value="Save and Continue" name="action_3">
<input class="Cancel" type="submit" value="Cancel" name="action_4">

它应该只选择第三个.

我可以想象这个CSS:

input[type="submit"]:not(ANY CLASS){
}

但是,我应该写什么作为"任何类别"？还是有不同的方法alltogehter？我可以列举那里所有已知的类,但这很乏味,可能会随着时间的推移而改变.

注意:

• 我正在寻找一个只有CSS的解决方案.这使得这个答案不重复.
• 我想指定"根本没有类"而不是省略一个单独的类.这使得这个答案不重复.

我有以下HTML结构:

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li><a id="c" href="#">This one</a></li>
    <li class="active"><span>Not this</span></li>
</ol>

我想通过CSS选择#c.我试过了:

ol > li:not(.active):last-child > a {
  border: 1px solid green;
}

据我了解li:not(.active)选择所有li元素,但选择类.active.

在这个选择中,我使用:last-child来获取这些li元素中的最后一个.但这不会奏效.怎么了？我想要达到的目标是否可能？

非常感谢你 :)

PS:列表长度是动态的,元素没有任何可用于CSS选择的id(我只是在示例中使用了一些来澄清我想要选择哪个元素);)

我有一个子列表列表.每个子列表都有自己的子项.我需要将样式应用于除最后一个子列表之外的所有样式.我用:

.list:not(:last-child) > .sublist {
  color: red;
}

但它适用于所有子列表.这是一个演示代码(小提琴:http: //jsfiddle.net/8m72m53r/3/):

:not(:last-child) > .row {
  color: red;
}

<ul class="box">
  <li class="row">One</li>
  <li class="row">Two</li>
  <li class="row">Three</li>    
</ul>
<ul class="box">
  <li class="row">FOur</li>
  <li class="row">Five</li>
  <li class="row">Six</li>    
</ul>
<ul class="box">
  <li class="row">Seven</li>
  <li class="row">Eight</li>
  <li class="row">Nine</li>    
</ul>

关于以下表达式:

radio:focus > .approve, radio:focus > .dis-approve{/*statements...*/}

它是否被CSS解释器/编译器接受？

目标:同时适用于.approve和.dis-approves'无线电类型的父母都是焦点.