Javascript 清理解决方案 CSS
Javascript Solution to clean up CSS
我正在努力向我正在制作的网站添加一些 CSS,并确定了我需要修改的内容:
#MSOZoneCell_WebPartWPQ1{
background-color: #FFF !important;
outline: 4px solid white;
}
#MSOZoneCell_WebPartWPQ2{
background-color: #FFF !important;
outline: 4px solid white;
}
#MSOZoneCell_WebPartWPQ3{
background-color: #FFF !important;
outline: 4px solid white;
}
.....
#MSOZoneCell_WebPartWPQ20{
background-color: #FFF !important;
outline: 4px solid white;
}
我无法覆盖上层更通用的容器,因此它不需要不同的编号。我的问题有 JS 或其他解决方案吗?我无法编辑 HTML,只能编辑 CSS.
我没有看到类似的问题,但我可能只是用错了术语。
最佳解决方案是使用 class 或以元素为目标而不使用 id 的选择器,但您可以使用以 selector
开头的属性
[id^="foo"] {
background-color: green;
margin: .2rem;
}
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
<div id="foo4">foo4</div>
<div id="5foo">5foo</div>
<div id="6foo6">6foo6</div>
我正在努力向我正在制作的网站添加一些 CSS,并确定了我需要修改的内容:
#MSOZoneCell_WebPartWPQ1{
background-color: #FFF !important;
outline: 4px solid white;
}
#MSOZoneCell_WebPartWPQ2{
background-color: #FFF !important;
outline: 4px solid white;
}
#MSOZoneCell_WebPartWPQ3{
background-color: #FFF !important;
outline: 4px solid white;
}
.....
#MSOZoneCell_WebPartWPQ20{
background-color: #FFF !important;
outline: 4px solid white;
}
我无法覆盖上层更通用的容器,因此它不需要不同的编号。我的问题有 JS 或其他解决方案吗?我无法编辑 HTML,只能编辑 CSS.
我没有看到类似的问题,但我可能只是用错了术语。
最佳解决方案是使用 class 或以元素为目标而不使用 id 的选择器,但您可以使用以 selector
开头的属性[id^="foo"] {
background-color: green;
margin: .2rem;
}
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
<div id="foo4">foo4</div>
<div id="5foo">5foo</div>
<div id="6foo6">6foo6</div>