用于选择元素的模式？

Question

我学习了css3选择器，我无法理解以下选择器之间的区别：

div > div 
div + div
div ~ div

有人能帮助我吗？

Answer 1

<强>元素＆gt;元素 例如：div > p 选择父元素为

的所有

元素

<强>元素+元素 例如：div + p 选择紧跟在元素

之后的所有

元素

<强>元素1〜element2的 例如：p ~ ul 选择前面带有

元素

的每个元素

对所有css选择器都这样看： https://www.w3schools.com/cssref/css_selectors.asp

Answer 2

div > p选择父元素为div元素的所有p元素

div + p选择在div元素

之后立即放置的所有p元素

p ~ ul选择以p元素

开头的每个ul元素

以下是对所有选择器https://www.w3schools.com/cssref/css_selectors.asp

的完整参考

一个简单的例子

div > p{
color:blue;
}

div+p{
color:green;
}

#para ~ p{
color:red;
}

<div>
<p>Hello, im a child of div</p>
</div>

<p id="para">Hello, im adjacent to a div</p>

<p>Hello, im preceding to a div</p>