html - ID 属性选择器 ^ 不起作用

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 5 年前。

我有这个代码:

#ul_quests {
  list-style: none;
  font-size: 20px;
  margin: 0;
  padding: 0;
  text-align: center;
}

[id=^"q_count"],
[id="q_watcher"],
[id=^"q_date"],
[id=^"q_addresses"] {
  height: 55px;
  line-height: 55px;
  float: left;
  margin: 0px 35px;
}

<ul id="ul_quests">
  <li id='q_count1'>1</li>
  <li id='q_watcher1'>fdsfss</li>
  <li id='q_date1'>20-20</li>
  <li id='q_addresses1'></li>
</ul>

但是 CSS 不适用于 ID。 JSFiddle .

最佳答案

[id^="q_count"] 是正确的方法。 [id=^"q_count"]这不是

#ul_quests{
    list-style: none;
    font-size: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
}

[id^="q_count"],[id="q_watcher"],[id^="q_date"],[id^="q_addresses"]{
    height: 55px;
    line-height: 55px;
    float: left;
    margin: 0px 35px;
}

<ul id="ul_quests">
    <li id='q_count1'>1</li>
    <li id='q_watcher1'>fdsfss</li>
    <li id='q_date1'>20-20</li>
    <li id='q_addresses1'></li>
</ul>

关于html - ID 属性选择器 ^ 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45953538/

上一篇：javascript - 将 <li> 更改为 <span>？

下一篇：html - 使用没有 ID 的 CSS 删除元素

javascript - 浏览器自动滚动到表单

jquery - 如何自定义 HTML/CSS 工具提示？

javascript - jQuery UI 选项卡或任何其他方式

javascript - HTML jquery-plugin-circliful 属性更改

javascript - knockout : observable count value depending on a function

windows - css @keyframes 动画在 Windows 的 Safari 中不起作用

html - 背景图像不会在 IE8 或更低版本中显示，但在 Firefox 和 Chrome 中有效

c# - 如何枚举具有自定义类属性的所有类？

按属性选择时使用通配符的 Xslt