css选不中html

Question

HTML

<ul class="searchClass">
    <li>全部<i></i></li>
    <li>时间筛选<i></i></li>
 </ul>
 

css

    ul> li > i{
        width: 2rem;
        height: 3rem;
        background: url(../../images/but_dow.png) center no-repeat;
        background-color: red;
    }
    

css这样写有问题吗？为什么选不到dom元素？

Answer 1

i是行内元素，不能设置宽高，需要转换成block或者inline-block才行啊。
常见块级元素：div；h1~h6；p；hrform；ul；dl；ol；pre；tableli；dd；dt；tr；td；th
常见行内元素：em；strong；span；a；br；img；button；iput；label；select；textareacode；script
区别：
1、块级元素可以包含行块级、内标签、文本、而行内元素只能包含文本和行内元素。
2、块级元素单独占据一整行，行内元素占据的位置只有自身文本宽度的空间。
3、块级元素可以设置宽高，行内元素不可以 。
4、块级元素的padding，margin值设置有效，行内元素padding，margin上下的值设置无效，但左右有效。

Answer 2

不是没选到，i是 inline元素，手动设置宽高无效的，你加个inline-block

Answer 3

你在选择器中加入display:block; 就能看到了

Answer 4

i是 inline元素，加个inline-block;就可以看见效果

Answer 5

行内标签 如span i 是无法设置宽高的 需要转换display 如果是想让i标签还是具有行内标签的特点就设置为display:inline-block 如果想让其变为块级标签默认转行就display:block HTML行级块级的标签是十分重要的基础知识 你可以看看mdn 这里基础知识还是很丰富的