*{ margin: 0; padding: 0; text-decoration: none; list-style: none; color: black; border: none; outline: none; } .topArea{ width: inherit; height: 500px; background-color: #414fe4; } .topArea>ul{ background-color: rgb(82, 82, 82); width: 100%; height: 50px; } .topArea>ul>li{ float: left; color: white; height: 50px; width: 100px; text-align: center; line-height: 50px; border-radius: 10px; cursor: pointer; margin: 0px 10px; } .topArea>ul>li:hover{ background-color: rgb(52, 52, 52); } .drop1:hover .dropDown1,.drop2:hover .dropDown2,.drop3:hover .dropDown3{ display: block; } .dropDown1,.dropDown2,.dropDown3{ background-color: azure; display: none; position: relative; /* width: 100px; height: 100px; */ z-index: 1; border-radius: 10px; } .dropDown1 li,.dropDown2 li,.dropDown3 li{ border-radius: 10px; } .dropDown1 li:hover,.dropDown2 li:hover,.dropDown3 li:hover{ background-color: #b5b5b5; } .menu1:hover .getMenu1,.menu8:hover .getMenu8{ display: block; } .getMenu1,.getMenu8{ display: none; position: absolute; left: 100%; background-color: white; border-radius: 10px; } /* [class^="getMenu"] { top: calc((attr(class, numeric)-1) * 50px); } */ [class^="getMenu"] { --menu-index: calc(1em * (parseInt(attr(class, 'numeric')) - 1)); top: var(--menu-index); } .getMenu1 li,.getMenu8 li{ float: none; width: 100px; height: 50px; }这段css代码中[class^="getMenu"] { --menu-index: calc(1em * (parseInt(attr(class, 'numeric')) - 1)); top: var(--menu-index); }没有生效怎么办

如果这段CSS代码没有生效，可能有以下几个原因：

1. 浏览器不支持CSS变量和属性选择器

如果您使用的是比较老的浏览器版本，可能会导致CSS变量和属性选择器无法生效。可以尝试升级浏览器版本，或者使用其他的CSS技术来实现类似的效果。

2. 类选择器没有匹配到对应的元素

如果您的HTML代码中没有任何一个class属性以"getMenu"开头的元素，那么这个类选择器就不会匹配到任何元素，从而导致样式没有生效。可以检查一下HTML代码，看看是否有符合条件的元素。

3. 代码中出现了其他错误

如果以上两个原因都排除了，那么可能是代码中出现了其他语法错误，导致整个规则失效。可以仔细检查一下代码，看看是否有拼写错误、语法错误等等。

另外，您可以使用浏览器的开发者工具来检查这段CSS代码是否被正确应用到了相应的元素上。如果没有被应用，那么开发者工具会显示相应的错误信息，帮助您找到问题所在。

相关问题

优化.menu ul{ margin:0; padding:0; } .menu { width:1000px; height:50px; margin:0 auto; border:1px black solid; background-color:#000099; } li { list-style-type:none; width:100px; } .menu >li{ float:left; } .menu li a{ display:block; height:50px; text-align:center; line-height:50px; text-decoration:none; font-weight:bold; color:#FFF; } ul li a{ margin:0; padding:0; } .menu li ul li{ visibility:hidden; background-color: #00F; height:40px; } .menu ul li a{ font-size:14px; font-weight:normal; } .menu>li:hover>a{ background-color:#000066; color:red; } .menu>li:hover ul li{ visibility:visible; } .menu li ul li a:hover{ background-color:#2A40BD; color:#9D4076; } </style>

你提供的优化代码是正确的，将reset样式表中的ul样式添加到前面即可，这样可以保证所有ul元素的margin和padding都为0，避免了因为默认样式造成的问题。下面是优化后的代码：

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .menu {
    width: 1000px;
    height: 50px;
    margin: 0 auto;
    border: 1px black solid;
    background-color: #000099;
  }
  li {
    list-style-type: none;
    width: 100px;
  }
  .menu > li {
    float: left;
  }
  .menu li a {
    display: block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
  }
  .menu li ul li {
    visibility: hidden;
    background-color: #00F;
    height: 40px;
  }
  .menu ul li a {
    font-size: 14px;
    font-weight: normal;
  }
  .menu > li:hover > a {
    background-color: #000066;
    color: red;
  }
  .menu > li:hover > ul li {
    visibility: visible;
  }
  .menu li ul li a:hover {
    background-color: #2A40BD;
    color: #9D4076;
  }
</style>

建议在CSS样式表中，先添加reset样式表，再添加自定义的样式表，这样可以确保自定义样式表不会被默认样式影响。

ul.head{ border-style: groove; position: fixed; top:0; width:99%; list-style-type: none; margin-top:0; padding-left: 0px; /*创建一个新的BFC*/ overflow: hidden; background:indianred; border-radius:8px;/*圆角边框*/ font-size:18px; } li a{ /* !*实现横向导航栏, display:inline;也可，如果你想链接到具有相同的大小，你必须使用浮动的方法*!*/ float:left; height:20px; text-align: center; color: white; background-color: darksalmon; padding: 12px 20px; text-decoration: none; } li a:hover{ background-color: coral; color: black; } body{ background-attachment: fixed; background-image: url(../resources/image/blue_pink.jpg); background-size:100%; } iframe{ height:300px; width:400px; float:right; } select{ font-size: 20px; color:olive; background-color:cornsilk; } div{ margin-top:60px; } input{font-size: 16px;} button { border-radius:5px;/*圆角边框*/ font-size: 18px; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s ease; } #pauseBtn{ position:absolute; bottom:17%; left:40%; } #startBtn{ position:absolute; bottom:59%; left:15%; } #increase-btn1 { position:absolute; left: 17%; bottom:9%; } #decrease-btn1 { position:absolute; left: 19%; bottom:9%; } #increase-btn2 { position:absolute; right: 19%; bottom:25%; } #decrease-btn2 { position:absolute; right: 17%; bottom:25%; } #speedRange{ position:absolute; bottom:17%; left:50%; } button:hover { background-color: #3e8e41; } #introduction{ margin-top: 20px; width:300px; border-style: groove; font-size: 14px; color:darkred; overflow: auto; min-height:300px; max-height:300px; } footer{ position:absolute; bottom:0; width:100%; height:30px; text-align: center; } #canvas{ /*width: 880px;*/ /*height: 440px;*/ width: 100%; height: 100%; /*margin: -210px auto;*/ /*border: 2px solid yellowgreen;*/ /*display: block;*/ overflow: scroll; } .container { height: 440px; width: 880px; margin: -225px auto; border: 2px solid yellowgreen; /*display: block;*/ box-sizing:border-box; overflow: scroll; } #log{ border:2px palegoldenrod; position:absolute; top:9%; right:0.5%; background-color:lightyellow; height: 430px; /* 设置固定高度 */ width: 310px; /* 设置固定宽度 */ font-size: 16px; /* 设置默认字体大小 */ resize: none; /* 其他样式属性 */ } .red-text { color: red; }

根据你提供的 CSS 代码，我没有看到任何明显的问题，但这些代码只是样式的一部分，也没有包括 HTML 代码，因此很难确定滚动条不工作的原因。不过，我注意到你在 `ul.head` 中设置了 `overflow: hidden;`，这可能会导致滚动条不可见或不可用。

建议你检查以下几点：

1. 确保你需要滚动条的元素上设置了 `overflow` 属性，并且值为 `auto` 或 `scroll`，例如：

.container {
  overflow: auto;
}

2. 确保没有其他样式将 `overflow` 属性设置为 `hidden`，例如：

ul.head {
  overflow: visible; /* 或者不设置 overflow 属性 */
}

3. 确保你的 HTML 代码正确，包含了需要滚动的内容，并且将它们包含在需要滚动的元素中。

如果你仍然无法解决问题，可以提供更多的代码和信息，以便我更好地帮助你。