在html中改变当前活动段落的CSS

Question

我刚刚意识到如何让div可编辑。现在我正在尝试使用相同的自定义编辑器。我已经将contentEditable设置为相同。现在我面临的问题是我只想关注用户正在尝试更改的当前段落<p>。例如，在HTML代码如下

<div id = "editor"> 
    <p> 
     this is first para 
    </p> 
    <p> 
     this is second para 
    </p> 
</div> 

现在我想的是，如果用户是编辑第一p标签里面的内容则相同的字体颜色应该是黑色的，和所有其他P含量转身浅黑色。 我如何做到这一点，也可以在纯css？

Answer 1

只有使用CSS才能完成。你还需要一些JS。以下是您尝试应用的效果的代码段。

$('#editor2 p').click(function(){ 
 
    $('#editor2 p').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

p{ 
 
\t color:blue; 
 
} 
 

 
#editor[contenteditable="true"] p{ 
 
\t color: red; 
 
} 
 

 
#editor2[contenteditable="true"] p{ 
 
\t color: green; 
 
} 
 

 
#editor2[contenteditable="true"] p.active{ 
 
\t color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id = "editor" contenteditable="true"> 
 
    <p> 
 
     this is first para 
 
    </p> 
 
    <p> 
 
     this is second para 
 
    </p> 
 
</div> 
 

 
<div id = "editor2" contenteditable="true"> 
 
    <p> 
 
     this is first para 
 
    </p> 
 
    <p> 
 
     this is second para 
 
    </p> 
 
</div>