html中+hover所有样式,css:hover状态改变另一个元素样式的使用

情景1：`

Document

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

分析：当hover的元素和需要改变样式的元素是父子关系的时候，可以这么写(.container:hover ul.ul>li:nth-child(2))直接在hover后面加上空格，加上需要改变你的元素

情景2：

Document

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

分析：此时是hover container容器，改变wrap框的背景颜色，但发现container和wrap不是父子关系而是兄弟关系，这时候这样写(.contianer:hover div.wrap{background: #000;})不起效果。应该的写法是(.container:hover +.wrap{background:#f00;})