Использование CSS в CSS

Question

.main-navigation ul li.menu-item-has-children:hover~li { 
    opacity: 0; 
} 

Взято из моей темы WordPress. В чем смысл ~ li (с символом ~)?

Спасибо

Answer 1

Предварительно ~ р селектор означает «каждый P элемент, который предшествует PRE элемента», но, в отличие от пре + р смежного селектора, то элемент не должен быть прямым предшествующим элемент.

Поэтому этот абзац тоже должен быть красным. Хотя этому не предшествует a, это обычный предыдущий брат.

Это абзац в div. Поскольку этот абзац не имеет предыдущего брата (он больше похож на дядю, предыдущего брата этого родительского узла этого абзаца), он не должен быть красным.