用jquery选择伪元素[重复]

Question

你会如何将这段 css 转换成 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 选择整个锚点之前选择。

$(".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

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

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的样子...

Answer 1

Javascript 不能修改 :before、:after 伪选择器。

您的问题的解决方案是将 css 规则直接添加到 css 文件中。 https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

Answer 2

先将css存入一个对象：

     var css =
            {
           "content":"",
           "position":"absolute",
           "height":"0",
           "width":"0", 
           "border":"5px solid transparent",
           "top":"50%",
           "right":"5px"
            };

然后在任何其他函数之前调用 css 函数：

        $(".nav li a:first-child:nth-last-child(2)").css(css).before(function(){


        });

我相信您需要在调用其他函数之前调用 css 函数。

Answer 3

不确定这是否与:before 完全相同，但是如果您使用jQuery 插入<span>-tag，然后调整<span> 的CSS 会怎样？即

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

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