谢谢大家! 我设法做了我想做的事:D http://jsfiddle.net/Tfc9j/42/ 让我们来看看

我想有一个外部div的不透明度是不同于内部div的不透明度和改变点击somwewhere;) 谢谢!

   $('#ena').on('click', function () {
        $('head').append("<style>#ena:before { opacity:0.3; }</style>");
    });

$('#duop').on('click', function (e) {

        $('head').append("<style>#ena:before { opacity:0.8; }</style>");

     e.stopPropagation(); 
    });

#ena{
    width:300px;
    height:300px;
    border:1px black solid;
    position:relative;
}
#duo{
    opacity:1;
    position:absolute;
    top:50px;
  width:300px;
    height:100px;
      background-color:white;
}
#ena:before {
    content: attr(data-before);
    color: white;
    cursor: pointer;
    position: absolute;
    background-color:red;
    opacity:0.9;
    width:100%;
    height:100%;
}


<div id="ena">
    <div id="duo">
        <p>ena p</p>
        <p id="duop">duoyyyyyyyyyyyyyy p</p>

    </div>   


</div>

尽管它们是由浏览器通过CSS呈现的，就像它们像其他真正的DOM元素一样，但伪元素本身不是DOM的一部分，因为伪元素，顾名思义，不是真正的元素，因此您不能直接使用jQuery(或任何JavaScript API，甚至是Selectors API)选择和操作它们。这适用于您试图用脚本修改其样式的任何伪元素，而不仅仅是::before和::after。

你只能在运行时通过CSSOM(想想window.getComputedStyle())直接访问伪元素样式，jQuery除了.css()之外不会公开它，这个方法也不支持伪元素。

不过，你总能找到其他方法，比如:

将样式应用到一个或多个任意类的伪元素上，然后在类之间切换(参看seucolega的回答以获得一个快速示例)——这是一种惯用的方法，因为它使用简单的选择器(伪元素没有)来区分元素和元素状态，这是它们打算使用的方式 通过修改文档样式表来操纵应用于上述伪元素的样式，这更像是一种hack

下面是访问:after和:before样式属性的方法，在css中定义:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

下面是HTML:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

“before”上的计算样式是内容:“VERIFY TO WATCH”;

下面是我的两行jQuery代码，它们使用了添加一个额外的类来特别引用这个元素，然后附加一个样式标签(带一个!important标签)来改变sudo元素内容值的CSS:

$（“span.play：eq（0）”）.addClass（'G'）;

$('体').append(“<时尚>。G:在{重要内容:“NewText”!}> < /风格”);

为什么要添加类或属性，当你可以添加一个样式头

$('head').append('<style>.span:after{ content:'changed content' }</style>')

一种有效但不太有效的方法是在文档中添加带有新内容的规则，并用类引用它。根据需要，类可能需要为内容中的每个值提供唯一的id。

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');