标签: pseudo-class

我有这个小 HTML：

<div id="column">
    <div class="ticker">
        <ul>
            <li>Item 1</li>
        </ul>
    </div>
</div>

对于类ul外部的元素.ticker，但在#columnid内部存在此 CSS：

#column ul:not(.a):not(.b) {
    margin: 1em;
}

但在.ticker课堂上，我不想要这个边距。所以我想我可以使用：

#column .ticker ul {
    margin: 0;
}

也就是说，我知道第一个 CSS 选择器的特异性更高，因为有两个:not()伪类。但是为了获得更高的特异性，我也必须将:not()第二个 CSS 片段中的这两个附加到ul. 所以这有效：

#column .ticker ul:not(.c):not(.d) {
    margin: 0;
}

那不是傻吗？事实上，在两个:not()伪类中使用什么并不重要。他们只需要在那里。这对我来说没有任何意义。

这只是 CSS3 的一部分，它并不完美，还是我的大脑还没有想出一个解决方案？

在这里查看它的实际效果：http : //jsfiddle.net/9BDw5/2/

可以明确地说，我不是要为 css 做（伪）开始。只是想检查是否可以在伪元素上添加伪类。例如：

.some-class:after:hover {
}

似乎不起作用。

这虽然有效：

.some-class:hover:after {
}

当然，这不会：

.some-class:hover:after:hover {
 }

我想做的是 - 有一个 div。如果您将鼠标悬停在该 div 上，我将使用 :after 在 div 上附加一个删除图标。我想设计这个图标的样式（比如，把它放大到 1.1 左右）。这完全可以在 CSS 上实现吗？我只需要它在 Chrome 上工作。

我知道:link允许选择未访问的元素，并且我知道LoVe-HAte 技巧可以记住放置各种链接伪类的顺序。但在实践中，我总是这样设计链接：

a {
    /* common styles for all links, regardless of state */
    /* this includes unvisited links, and thus a:link */
}
a:visited {
    /* specific styles for visited links */
}
a:hover {}
a:active {}

由于链接要么被访问，要么未被访问，这涵盖了所有可能的情况，我真的不明白:link伪类添加到表中的内容。

我错过了什么吗？

我在"w3schools"中研究CSS,在"链接"一章中,他们说:

"为多个链接状态设置样式时,有一些订单规则:

a:悬停必须在a:link和a之后:访问a:主动必须在a:hover之后来

我想知道为什么正确的顺序是LVHA,而不是LHVA或其他.

我有一个这样的场景：

.container {
  background: yellow;
  padding: 40px;
}

.container:focus-within {
  background: red;
}

iframe {
  background: white;
}

<div class="container">
  <input type="text" placeholder="Input 1">
  <iframe srcdoc="<input type='text' placeholder='Input 2'>"></iframe>
</div>

如您所见，当我单击输入 1 进行输入时，由于 :focus-within选择器。但是当我关注输入 2（在 iframe 内）时，它没有。

.container如果 iframe 中的某些内容被聚焦，是否可以使用 CSS 选择器？我也可以控制 iframe 内的 CSS。

I have floating placeholder in the input field.

Placeholder will appear in center when we input value has not been provided. as shown in the below screenshot (Email and password is placeholder).

Now when you provide the value to email it does look like below. Observer the Email and password has been pulled up when value has been provided

The problem occurs when browser starts auto-filling/autocomplete this value from the saved credentials on page load like username, email, password so …

我想选择不是特定类的后代的跨度,让我们称之为"不".这是我的CSS:

div:not(.no) span{background-color:#00f;}

这是HTML

<div>
    <span>yes 1</span>
</div>
<div class="no">
        <span>no 1</span>
</div>
<div class="no">
    <div>
           <span>no 2</span>
    </div>
</div>

两个问题:

1. 为什么我的CSS适用于yes 1和no 2？

2. 如果切换到通用选择器,为什么整个事情会破裂？

   *:not(.no) span{background-color:#00f;}
   

   Run Code Online (Sandbox Code Playgroud)

这是JSFiddle中的代码:http://jsfiddle.net/stephaniehobson/JtNZm/

我想在整个文档中找到当前关注的元素.我尝试使用:focusjQuery 1.6引入的伪类:

$(document).find(":focus")

但$(document).find(":focus").length总是回归0

我使用jquery来切换元素.我使用的按钮是用CSS设置的.
我想根据切换元素()的状态更改内容,从\25BC(向下箭头)到\25B2(向上箭头$(#categories ul)).
应该怎么做？

代码:

   a#categories-toggle:after{
      content: "\25BC";
   }

   $().ready(function(){
      $("#categories-toggle").on('click', function(eve){
         eve.preventDefault(); 
         $("#categories ul").toggle();
      });
   });

我已将字体图标添加到这样的列表中:

a:before {
    font-family: FontAwesome;
    content: "\f015";
    .. etc..
}

当父锚标记悬停时,我想要这样:在伪旋转之前.我尝试过这个,但它不起作用:

a:hover:before {
            -webkit-transform:rotate(360deg);
            -moz-transform:rotate(360deg);
            -o-transform:rotate(360deg);
}

这不行吗？如果父元素悬停,我该怎样才能在:before元素上获得旋转效果？