前端：能不能帮我看看下面代码哪里出错了？然后教我咋排查。

clearwater 发表于 2020-3-8 21:01

本帖最后由 clearwater 于 2020-3-8 21:07 编辑

以下是我在学习的前端教程的老师的案例源码。可能是我误操作了，所以现在不能正确显示。我自己都检查了1个多小时了，也不知哪出错了。{:301_971:}
请大神能不能帮忙看看哪错了？另外顺便教我咋查？

本案例是用for 循环，来取精灵图的Y坐标。我前几天在这里请教过这个问题，现在我是在复习。

我自己按F12也看了，没报错的地方。

（我自己做这个案例，倒是做对了。可是我查不出下面代码哪出错了。）

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
   * {
         margin: 0;
         padding: 0;
   }

   li {
         list-style-type: none;
   }

   .box {
         width: 250px;
         margin: 100px auto;
   } 　

   .box li {
         float: left;
         width: 24px;
         height: 24px;
         background-color: pink;
         margin: 15px;
         background: url(images/sprite.png) no-repeat;

   }

</style>
</head>

<body>
<div class="box">
   <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
   </ul>
</div>
<script>
   // 1. 获取元素所有的小li
   var lis = document.querySelectorAll('li');
   for (var i = 0; i < lis.length; i++) {
         // 让索引号乘以 44 就是每个li 的背景y坐标index就是我们的y坐标
         var index = i * 44;
         lis.style.backgroundPosition = '0 -' + index + 'px';
   }

</script>

</body>

</html>

clddup 发表于 2020-3-8 21:20

我试了一下,你样式表里的,box>li的样式没有生效

a361690548 发表于 2020-3-8 21:22

你的代码没问题啊我测试正常运行

linguo2625469 发表于 2020-3-8 21:24

样式没生效

clearwater 发表于 2020-3-8 21:26

本帖最后由 clearwater 于 2020-3-8 21:28 编辑

wangchuanlin 发表于 2020-3-8 21:20
我试了一下,你样式表里的,box>li的样式没有生效
@ linguo2625469
@wangchuanlin
感谢楼中三位大神的帮助。

那为啥li 没生效啊？怎么才能让它们生效？

我用CRHOME打开，是没生效。LI成了竖着的一排了。为啥不能浮动？

{:301_971:}

clddup 发表于 2020-3-8 21:31

clearwater 发表于 2020-3-8 21:26
@ linguo2625469
@wangchuanlin
感谢楼中三位大神的帮助。

不清楚我把你的代码复制过来.box 和 .box li的样式只能生效其中一个 .box的样式全部注释后 li的样式就正常显示了但是我把样式全部删除自己重写一遍就没问题了不知道什么问题

xiaop520 发表于 2020-3-8 21:34

Css 权重问题你把样式.box li 放在.box前面就可以了
或者直接使用权重高的

yubeihai 发表于 2020-3-8 21:35

.box{}样式后边有特殊字符，用谷歌调试一下就看到了！

FrancisX 发表于 2020-3-8 21:36

.box li没生效。

youhei 发表于 2020-3-8 21:40

前端样式不会报错的，js才会。

页: [1] 2 3 4

吾爱破解 - 52pojie.cn's Archiver

前端：能不能帮我看看下面代码哪里出错了？然后教我咋排查。