还是有点凌乱的,大家试一下这几种选择方式呈现的效果:
. food ul
.food li
.food ul li(这种方式哪位同学能和我解释一下意义么)
还有就是.food>ul 为什么没有效果呢?有.food ul>li 这种选择方式么
这是对类别下的选择器,给父级一个类(class)在给子级进行选择
. food ul 这是找到ul
.food li 这是找到li
.food ul li 这是找的ul下的li
.food>ul这是可以找的ul但不可以找到li(.food>li)不行
.food ul>li 可以找到li
在类选择器food所在标签下的所有ul标签都会作用,比如.food li{border:1px solid red;}就会将每一个列表都加上红色边框,像下图这样,你可以在子选择器的例子中将子选择器改为后代选择器
同上
类选择器food下的ul下的li , 比如.food ul li{border:1px solid red;},效果如下图
>子选择器表示的是第一代子元素,
上面的第一代子元素是“水果”和“蔬菜”所在的li标签,以“香蕉”、“苹果”、“梨”为一组的ul和以“白菜”、“油菜”、“卷心菜”为一组的ul为第二代子元素,第一代子元素中不包含ul标签所以不显示效果。
.food ul>li 这种写法的意思是类选择器food下的所有ul标签下的第一个子元素,比如.food ul>li{border:1px solid red;}
上图中food下的所有ul标签下的第一个子元素为li,ul为第二代子元素,所以有显示边框效果
3,这个的意思就是ul下每一层li里都应用到.food
4,.food>ul是有效果的,不过你要把代码写到他的上一层里去定义,在这个例子里就是{body class="food"}...{/body};有
子选择器作用的是第一代子元素,后代选择器作用于所有后辈元素。
子选择器作用的是第一代子元素,后代选择器作用于所有后辈元素。
一二都比较简单,第三个的意思是作用于ul标签下的li标签,所以”水果“的那个li标签就没有任何效果。
第四个问题,.food>ul之所以没有效果,是因为.food类下面第一代子元素就没有ul这个标签,当然没有效果了,不信可以把那个“水果”的那个li标签删掉,再看效果。.food ul>li是可以的,不言自明
.food ul li这种是找到.food下面的ul,ul下面的所有li