用jQuery选择伪元素 [英] Select pseudo-elements with jquery

问题描述

您如何将这部分CSS转换为jquery?

How would you convert this block of css into jquery?

.nav li a:first-child:nth-last-child(2):before { 
    content:""; 
    position: absolute; 
    height:0; 
    width: 0; 
    border: 5px solid transparent; 
    top: 50% ;
    right:5px;  
}

我尝试了几种不同的方法，但没有任何方法可以正常工作.该css仅在jquery选择整个锚点之前选择.

I've tried a couple different ways but nothing I tried worked properly. Where this css selects only before the the jquery selects the whole anchor.

$(".nav li a:first-child:nth-last-child(2)").before().css(...); // did not work

$(".nav li a:first-child:nth-last-child(2)").before(function(){
    $(this).css(...);
}); // did not work

我也尝试了其他很多东西，让我知道你们的想法，谢谢！

I tried a lot of other stuff as well, let me know what you guys think, Thanks!

HTML:

<ul class="nav">
    <li><a href="index.php">Home</a></li>
    <li><a href="index.php">Class Assignments</a>
        <ul>
            <li><a href="#">Java</a>
                <ul>
                    <li><a href="java1.php">Java 1</a></li>
                    <li><a href="java2.php">Java 2</a></li>
                    <li><a href="java3.php">Java 3</a></li>
                    <li><a href="java4.php">Java 4</a></li>
                </ul>
            </li>
            <li><a href="#">JavaScript</a>
                <ul>
                    <li><a href="javaScript1.php">JavaScript 1</a></li>
                    <li><a href="javaScript2.php">JavaScript 2</a></li>
                    <li><a href="javaScript3.php">JavaScript 3</a></li>
                    <li><a href="javaScript4.php">JavaScript 4</a></li>
                </ul>
            </li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">C#</a></li>
        </ul>
    </li>
    <li><a href="index.php">Projects</a>
        <ul>
            <li><a href="project.php">Project</a></li>
            <li><a href="project.php">Project</a></li>
            <li><a href="project.php">Project</a></li>
            <li><a href="project.php">Project</a></li>
        </ul>
    </li>
    <li><a href="index.php">Contact</a></li>
</ul>

这就是CSS的外观...

This is what it looks like with the css...

推荐答案

不确定该方法是否与:before完全相同，但是如果您使用jQuery插入<span> -tag，然后进行调整，该怎么办? <span>的CSS?即

Not sure that would work exactly the same as with :before, but what if you used jQuery to insert a <span>-tag instead, and then adjust the CSS of the <span>? I.e.

$(".nav li a:first-child:nth-last-child(2)").prepend('<span class="before-hack" />');
$('.before-hack').css(...);

这是一个小提琴: http://jsfiddle.net/Niffler/287y3s4s/9/

这篇关于用jQuery选择伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！