css--a铺满整个li + hover使用注意事项

ul嵌套li嵌套的布局导航栏

在日常css写导航栏中，我们常常用到这样的搭配

<div>
    <ul>
        <li><a>内容<a/><li/>
        ...
    <ul/>
<div/>

当我们限制了div的大小之后，里面的子元素的长宽会根据自己的变化而设定好了。这样就会呈现出，a比li小，li的总值合起来比ul小的问题。而且a标签的默认是，只有有字体的内容部分才是a的长宽。

当我们想要a铺满整个li，a和li一样的大小的时候，可以使用以下语句：

a{
width：100%；
height：100%；
display：block；
}

将长和高设置为100%，即把a撑大，并把a在li里面看成块级元素。

---

hover的作用范围

hover的触发事件，除了改变自身的属性变化之外 fu

<div id = div1>
    
        <a>内容<a/>
        ...

        <div id = "div2">内容<div/>
    
<div/>

<div id = "div3">内容<div/>

 父对子（父元素触发，子元素做出响应）

#div1：hover #div2{

}
#div1 :hover a{

}

子对父（用~号控制）

#div2 :hover ~div1{

}

同级之间的控制(用+号控制）

a :hover +#div2{

}

而不符合上面的三种情况的hover属性使用起来是失效的

#div2 :hover #div3{

}
//错误，hover失效，没有父对子，子对父，同级之间控制三种之一

---