我需要 select 第一个非隐藏/可见子元素，不包括具有特定 class 的记录，仅使用 css

Question

In the below example, I want to change the text color of the first child that is visible.

Here <div> with the class of HideWidget should be excluded; so, I want to see "two," "four" and "eight" to be colored red.

I have tried below css and its showing only "four":

 .parent.child.field:not(.HideWidget):first-child { color: red; }

 <div class='parent'> <div class='child'> <div class='field HideWidget'>One</div> <div class='field'>Two</div> <div class='field'>Three</div> </div> <div class='child'> <div class='field'>Four</div> <div class='field'>Five</div> <div class='field'>Six</div> </div> <div class='child'> <div class='field HideWidget'>Seven</div> <div class='field'>Eight</div> <div class='field'>Nine</div> </div>

JSFiddle

Answer 1

`

 .parent.child.field:not(.HideWidget):first-child, .parent.child.field.HideWidget+.field { color: red; }

 <div class='parent'> <div class='child'> <div class='field HideWidget'>One</div> <div class='field'>Two</div> <div class='field'>Three</div> </div> <div class='child'> <div class='field'>Four</div> <div class='field'>Five</div> <div class='field'>Six</div> </div> <div class='child'> <div class='field HideWidget'>Seven</div> <div class='field'>Eight</div> <div class='field'>Nine</div> </div>

Should help you with red color on Two, Four and Eight