CSS Selector Brother Selector (~ and +)

Today in the old people to write the style of the Web page, encountered this selector, ' ~ ', at that time I was ignorant force, silly confused ' + ' with ' ~ ' difference, although I know they are brothers selector.

Later on-line search, perhaps I find the wrong way, did not find the answer I want, so privately take these two selectors to test a bit. It turns out this is the case.

First come to the code to speak:

(1), ' ~ ' Selector

<! DOCTYPE html>
The effect is as follows:
　　　　　　　　
(2), ' + ' selector
　　
<! DOCTYPE html>
Code or those, just the ' ~ ' replaced with ' + ', the result is very different.
　　　　　　
With these two examples, it can be found that although these two selectors all represent sibling selectors, the  ' + ' selector represents a sibling element that is adjacent to an element, that is, next to each other. The ' ~ ' selector represents the specified element of all siblings after an element, emphasizing all. 
CSS Selector Brother Selector (~ and +)