小编Tem*_*fif的帖子
基于祖先没有类的CSS选择器
我想根据祖先不存在的另一个类来设置一个类的样式。
div:not(.evil-class) .element {
background-color: green;
}<div class="evil-class">
<div class="element">An element within the evil class</div>
</div>
<div class="element">An element NOT in the evil class</div>不确定为什么不起作用？
我知道我可以做相反的事情。对两个元素都应用样式，然后覆盖该样式，但是我不愿意这样做，因为我将覆盖可能在第三方库中更改的样式。
谢谢。
推荐指数
解决办法
查看次数
使用JS获取CSS Calc宽度的问题
我需要制作一个基于屏幕宽度的正方形元素。为了将高度设置为与宽度相同，我尝试使用JS，但似乎有点错误。这是一个例子
var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';#square {
background-color: blue;
width: calc(20vw - 16px);
padding: 8px;
}<div id="square">Element</div>上方的蓝色“正方形”不是正方形。能解释为什么吗？而不是clientWidth，我已经尝试过scrollWidth并offsetWidth得到类似的结果。我也没有style.width给出正确的数字。
即使您在Chrome上检查了蓝色正方形，您也会得到一个高度和宽度近似但仍然非常不同的数字。
推荐指数
解决办法
查看次数
带有 CSS 变量的文本阴影
我对文本阴影属性有疑问。
这有效：
text-shadow: 1px 1px 0 var(--primary-color);
这不起作用：
text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);
有谁知道问题是什么？
谢谢你！
推荐指数
解决办法
查看次数
CSS动画从0到100的宽度
这是我想做的：我想在从width：0到width：100vw开始的div上播放动画，然后当它回到width 0时又回到0 BUT，并且我想从左到右进行动画处理。对，就像“连续”动画，而不是“反向”动画。就像在动画的中间一样，您可以看到div，但是当它回到宽度0时，它应该从左到右消失（就像它开始的方式一样）。我不知道如何更好地解释这一点...
div {
position: fixed;
z-index: 100;
background: red;
width: 0;
height: 100vh;
top: 0;
left: 0;
animation: 1s in-out forwards;
}
@keyframes in-out {
0% {
width: 0;
}
50% {
width: 100vw;
}
100% {
width: 0;
/* but starting to "disappear" from left to right, just like the way it appears */
}
}<div></div>推荐指数
解决办法
查看次数
How to make .svg transparent area NOT clickable
I'm trying to set an .svg image as a button. Only problem is that i'm able to click not only in the painted are, but the transparency aswell. This i need to disable so i can only click on the painted are.
下面，我提供到目前为止的html代码（基本上是我从实际文件中复制的内容。为清楚起见，我从Windows机器上的Adobe Illustrator导出了此图像。
我尚未通过.css进行任何修改。
<div id="brand"><a href="index.html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106"><defs><style>.cls-1{fill:#ff7800;}</style></defs><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></svg></a></div>推荐指数
解决办法
查看次数
是否值得删除未使用的CSS？
我正在与2位其他大学开发人员一起开发一个简单的Web应用程序。我们正在使用几个库和包。我现在正在尝试准备好我们的应用程序以进行部署，但是注意到它的运行速度很慢。有很多未使用的CSS规则。
我尝试手动浏览编译的样式，搜索引用并删除。但这确实很乏味。
我的问题是：
- 删除未使用的CSS规则是否值得，或者结果可以忽略不计？
- 如何做到这一点的最佳方法是什么？
推荐指数
解决办法
查看次数
我可以选择以“＃”开头的ID吗
我有一个作业，必须在不触摸html的情况下对页面进行样式设置。ID中以“＃”开头的两个ID名称是否有办法让我使用ID在CSS文件中选择它们？
推荐指数
解决办法
查看次数
如何在不使用任何样式和类的情况下为html中的第二个p标签着色？
我有3个p标签，
<p> hi </p>
<p>hello</P>
<p>bye</P>
我想p仅通过使用纯CSS（不使用任何javascript）将第二个标签着色为红色。在不使用任何内联样式和类的情况下，我该如何实现？
<p> hi </p>
<p>hello</P>
<p>bye</P>
推荐指数
解决办法
查看次数
如何在输入元素上创建具有不同颜色和宽度/高度的重叠边框？
我目前正在使用vue.js拖放Web应用程序。在此应用程序中，我们在输入HTML元素上具有一些特殊设计的边框。
设计看起来像这样：（忽略灰色垂直线。这是动态绘制的）
我尝试过类似创建同级div的操作，使它比输入大一点，在输入后面设置z-index并设置颜色。但是问题在于，浅蓝色的右边界和左边界将始终占据高度的100％。我需要大约75％或80％的东西。
“重叠”边框也可以在元素的顶部，右侧或左侧
有谁知道解决此问题的最佳方法？
推荐指数
解决办法
查看次数
有没有办法让CSS在同级和同级之间选择？
在以下情况下，
<h2 class='first'>h2</h2>
<p>p</p>
<p>p</p>
<p>p</p>
<h2 class='second'>h2</h2>
<p>p</p>
<p>p</p>
<p>p</p>
<h2 class='third'>h2</h2>
我只想在h2.first和h2.second之间选择p。我尝试了选择同级，但是它选择了所有元素。
推荐指数
解决办法
查看次数