标签: pseudo-class

我刚刚学会了一点jQuery,并试图将它用于简单的变色效果.假设我有两个<div> s,#foo和#bar.#foo有很多URL,并定义了以下CSS:

#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}

现在我想在用户单击#bar时更改#foo中链接的颜色(a:link),但保持a:hover颜色不变,所以我写这样的函数:

//...
$("#bar").click(function () {
  $("#foo a").css("color", "red");
});
//...

问题是,虽然此功能确实将所有链接更改为红色,但是a:悬停颜色丢失,即当用户将光标移动到链接时,它们将保持红色,而不是像我预期的那样变黑.

因为我看到jQuery所做的是<a在#foo中将内联样式放到> s中,使它们成为<a style="color:red;" href="...">,我想这将覆盖:hover伪类.由于伪类的内联样式attr还没有被任何人实现,我怀疑我是否可以完全达到预期的效果......

还有,有什么解决方案不要求我写这样的东西

$("#foo a").hover(
    function(){ $(this).css("color", "black");},
    function(){ $(this).css("color", "blue");}
)

？

谢谢.

在页面上有与CSS一起显示的链接作为按钮:

HTML:
    <a class="button" href="#">Button</a>
CSS:
    a.button {
        display: block;
        position: relative;
        width: 50px;
        height: 50px;
        background-color: $00f;
    }
    a.button:hover {
        background-color: $f00;
    }

我有一些主要关注:href值进行加密,从而会出现混乱和丑陋时,地址显示在浏览器中,当用户将鼠标悬停在链接:

http://mysite.com/shjfgkh53hhsfd9ah390503hh35323j5hj35909ufudufdjj3   

此外,href值将变得更长,因为我无法传输POST参数(所有内容都由GET完成).

但是,我可以使用这个:

HTML:
    <input type="button" class="button" href="#" />

然后在CSS中设置bg.我只是不确定是否使用伪类如:hover是正确的并且符合标准.我个人认为:hover,:active,:visited等用于链接(即标签).

澄清这将真的帮助我很多.谢谢!

我有一个项目列表,每个项目都有一个班级,整个班级都在重复.我想只显示每个类的第一个实例.只有CSS才有可能吗？

<ul>
   <li class="red">red</li>
   <li class="red">red</li>
   <li class="blue">blue</li>
   <li class="blue">blue</li>
   <li class="yellow">yellow</li>
   <li class="red">red</li>
   <li class="yellow">yellow</li>
</ul>

ul li {display:none}
ul li .red:first-child, ul li .blue:first-child, ul li .yellow:first-child { display:block}

因此在上面的代码中,只显示第1,第3和第5个列表项.

我试图通过设置我自己的单选按钮和复选框的样式来启动我的 Web 表单。为此，我隐藏了单选框/复选框本身，并使用 :after 伪类在标签上创建了一个状态指示元素，如下所示：

.pn_multi label{
    display:    inline-block;
    border:     1px dotted #FFF;

    opacity:    0.6;

    text-align: center;
}
.pn_multi label:hover{
    border:     1px dotted #444;
    opacity:    0.8;
}

.pn_multi input[type=radio]:checked + label, .pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

/* generic icon */
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox] + label:after {

    display:    block;
    position:   absolute;
    right:      1px;
    bottom:     1px;
    overflow:   hidden;

        /* a lot more styling here, took out for space …

我有一个元素:after伪元素.点击后,它将以平滑过渡旋转.

这是我的代码笔http://codepen.io/maxwbailey/pen/ABgJq - 这适用于Mac上的Chrome,Firefox和Opera,但在Safari上不起作用.

我的代码......

HTML

<div class="expand"></div>

CSS

.expand:after {
  content:"";
  display:block;
  width:200px;
  height:200px;
  background-color:red;
  cursor:pointer;
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  transition: transform 1s ease;
} 

.expanded:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

jQuery的

$('.expand').click(function(e) {
    $(this).toggleClass('expanded');
});

想知道我做错了什么.

我在这个网站上看到它在Safari http://www.barrelny.com/blog/中工作正常(点击"按类别查看"下拉列表,看到箭头随着过渡而旋转.我在这里意识到他们不使用一个伪选择器,但有没有办法用伪类做？因为它在其他浏览器中工作只是不是Safari？

此外,这需要在:之后,我给出的示例是问题的简化版本

CSS选择器从右到左解析,然后显示.

考虑到这一点,基于以下代码:

<a href="#" class="myImage">
    <img>
</a>

哪个更高效？:

.myImage img 

要么

.myImage img:only-child

并:only-child帮助选择选择特异性？因此,不是最初匹配<img>文档中的所有内容然后查找父类,它是否仅匹配<img>唯一的子项(从而减少选择池)？

参考文献:http://csswizardry.com/2011/09/writing-efficient-css-selectors/

编辑

进一步阅读:

关于CSS3选择器的可悲事实是,如果你关心页面性能,它们根本就不应该被使用.使用类和ID来装饰标记并完全匹配这些标记,同时避免使用兄弟,子孙和子选择器,这实际上会使页面在所有浏览器中都表现得更好.

-David Hyatt(Safari和WebKit的架构师,也曾在Mozilla,Camino和Firefox工作)资​​料来源:http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

我正在尝试选择 div 的特定和直接子代的特定和直接子代（我不知道还能怎么说）。但是，在这两种情况下，元素可以是任何内容，因此我需要使用“*”通用符号来选择这些元素。

这可能已经很清楚了，这就是我所拥有的：

.some-div>*:nth-child(2)>*:nth-child(1){
  background-color: #d3fba9;
}
.some-div>*:nth-child(2)>*:nth-child(2){
  background-color: #d3ffe9;
}
.some-div>*:nth-child(2)>*:nth-child(3){
  background-color: #d3fac9;
}

正如你所看到的，我需要选择 div 的第二个子元素的 1-3 个子元素，并对它们应用样式。是否有可能做到这一点？

background当你在那个页面上时,我试图让我的菜单栏变黑,例如.如果您在SFX页面上,则SFX选项卡将为黑色,而不是红色.

这是我的HTML:

<div id="menuBar" align="left">
    <table cellspacing="5" >
        <tr>
            <td><a href="index2.php">Home</a></td>
            <td><a href="editorial.php">Editorial</a></td>
            <td><a href="sfx.php">SFX</a></td>
            <td><a href="occasion.php">Occasion</a></td>
            <td><a href="artwork.php">Artwork</a></td>
            <td><a href="body.php">Body Painting</a></td>
            <td><a href="contact.php">Contact</a></td>
            <td><a href="about.php">About</a></td>

        </tr>
    </table>
</div>

而我的CSS:

#menuBar {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 810px;
    height: 30px;
    top: 53px;
    vertical-align:central;
}
#menuBar a {
    background: #AA0000;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 11px;
    padding-right: 11px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    color: Beige;
    text-decoration: none;
    font-weight:bold;
    font-size:18px;
    font-family: Gabriola,"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", …

ul,li {
  display: block;
  margin:0;
  padding:0;
  list-style:none;
}
li {
  background: black;
  color: white;
  padding: 10px;
}
li:nth-child(2n+2) {
  background: red;
}
li:nth-child(3n+3) {
  background: green;
}
li:nth-child(4n+4) {
  background: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
</ul>

我需要什么:

1. 黑色
2. 红色
3. 绿色
4. 蓝色
5. 黑色
6. 红色
7. 绿色
8. 蓝色
9. ...

......我怎么做到这一点:nth-child？

如何在遵循BEM 方法的同时有效地使用伪类？

我的具体示例如下 - 我需要创建一个具有自定义外观的复选框功能。为此，我通常会使用input:checked + label选择器。我正在尝试将其转换为 BEM，但我能做的最好的是：

CSS：

/*.custom-checkbox 
{
}*/

.custom-checkbox__input
{
    display: none;
}

.custom-checkbox__input:checked ~ .custom-checkbox__box-label
{   
    background-image: url("../../images/pro/check.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.custom-checkbox__box-label
{
    width: 1.4rem;
    height: 1.4rem;
    position: relative;
    top: 0.2rem;
    
    display: inline-block;
    background: white;
    border: 0px solid;
    border-radius: 0.2em;
}

.custom-checkbox__box-label:hover,
.custom-checkbox__txt-label:hover
{
    cursor: pointer;
}

HTML：

   <li class="custom-checkbox">
     <input class="custom-checkbox__input" type="checkbox" id="distinctcat_cb1" checked>
     <label class="custom-checkbox__box-label" for="distinctcat_cb1"></label>
     <label class="custom-checkbox__txt-label" for="distinctcat_cb1">Categories</label>
   </li>

由于兄弟选择器 ( ~)，这与 BEM …