标签: css-selectors

如何使用CSS3选择器选择除最后一个孩子之外的所有孩子？

例如,只获得最后一个孩子div:nth-last-child(1).

我有一个样式规则,当它有两种样式时我想应用于标签.有没有办法在没有JavaScript的情况下执行此操作？换一种说法:

<li class='left ui-class-selector'>

我想申请我的样式规则仅如果li有两个.left及.ui-class-selector类应用.

我写了这段代码,但它不起作用.我的问题是什么？

.class {
    margin:20px;
    :hover {
        color:yellow;
    }
 }

怎么写:hover和:visited条件a:before？

我正在尝试,a:before:hover但它不起作用

有没有办法根据类中子元素的类选择父元素？与我相关的示例与http://drupal.org的精美菜单插件的HTML输出相关.输出呈现如下:

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

我的问题是,是否可以将样式应用于包含具有活动类的锚的列表项.显然,我更喜欢将列表项标记为活动,但我无法控制生成的代码.我可以使用javascript(JQuery spring to mind)执行此类操作,但我想知道是否有使用CSS选择器的方法.

为了清楚起见,我想将一个样式应用于列表项,而不是锚.

我试图将"this"从点击的跨度传递给jQuery函数,然后jQuery函数可以在该被点击元素的第一个子元素上执行jQuery.似乎无法做对......

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

使用Javascript:

function toggleSection(element) {
  element.toggleClass("redClass");
}

我如何引用元素的第一个子元素？

我正在研究CSS文件并发现需要设置文本输入框的样式,但是,我遇到了问题.我需要一个匹配所有这些元素的简单声明:

<input />
<input type='text' />
<input type='password' />

......但不符合这些:

<input type='submit' />
<input type='button' />
<input type='image' />
<input type='file' />
<input type='checkbox' />
<input type='radio' />
<input type='reset' />

这就是我想做的事情:

input[!type], input[type='text'], input[type='password'] {
   /* styles here */
}

在上面的CSS中,注意第一个选择器是input[!type].我的意思是我想选择未指定type属性的所有输入框(因为它默认为文本但input[type='text']与之不匹配).不幸的是,我找不到CSS3规范中没有这样的选择器.

有谁知道这样做的方法？

我在这两个选择器之间有点困惑.

是后代选择器:

div p

选择p一个div是否是一个直接的后代？所以,如果p它在另一个内部div仍然会被选中？

然后是子选择器:

div > p

有什么不同？孩子是指直系孩子吗？例如.

<div><p>

VS

<div><div><p>

会被选中还是不被选中？

我有以下HTML

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

以下风格:

DIV.section DIV:first-child 
{
  ...
}

由于某些原因,我不明白风格是应用于"子内容1" <div>以及"标题" <div>.

我认为样式上的选择器只适用于具有名为"section"的类的div的第一个直接子节点.如何更改选择器以获得我想要的？

我可能回答了我自己的问题,但我非常好奇.

我知道CSS可以选择父项的单个子项,但如果其父项具有一定数量的子项,则可以支持对容器的子项进行样式化.

例如

container:children(8) .child {
  //style the children this way if there are 8 children
}

我知道这听起来很奇怪,但是我的经理让我检查一下,没有找到任何东西,所以我决定在结束搜索之前转向SO.