在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>