colors 相关问题

如何通过CSS在UL/LI html列表中设置项目符号颜色，而不使用任何图像或span标签[重复]

想象一个简单的未排序列表，其中包含一些 项目。现在，我通过 list-style:square; 将项目符号定义为方形。但是，如果我用 color 设置 项目的颜色... 想象一个简单的未排序列表，其中包含一些 <li> 项目。现在，我已经通过 list-style:square; 将项目符号定义为方形，但是，如果我使用 <li> 设置 color: #F00; 项目的颜色，那么 所有 都会变成红色！ 虽然我只想设置方形项目符号的颜色。有没有一种优雅的方式来定义CSS中项目符号的颜色... ...不使用任何精灵图像或跨度标签！ HTML <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> CSS li{ list-style:square; } 最常见的方法是这样做： ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "• "; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> JSFiddle：http://jsfiddle.net/leaverou/ytH5P/ 适用于所有浏览器，包括 IE 8 及更高版本。 前段时间浏览，发现了这个网站，你尝试过这个替代方案吗？ li{ list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg=="); } 听起来很难，但你可以制作自己的 png 图像/图案这里，然后复制/粘贴你的代码并自定义你的项目符号 =) 仍然很优雅？ 编辑： 遵循@lea-verou在另一个答案上的想法并应用这种外部源增强的哲学，我得出了另一个解决方案： 将 Webfont 图标库的样式表嵌入您的头脑中，在本例中为 Font Awesome： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 从 FontAwesome cheatsheet（或任何其他网络字体图标）获取代码。 i.e.: fa-angle-right [&#xf105;] 并使用 f... 的最后一部分，后跟这样的数字，也带有 font-family： li:before { content: "\f105"; font-family: FontAwesome; color: red; /* or whatever color you prefer */ margin-right: 4px; } 就是这样！现在您也有了自定义项目符号提示 =) 小提琴 我只是这样解决这个问题，它应该适用于所有浏览器： ul li { color: red } ul li span { color: blue; } <ul> <li><span>Foo</span></li> <li><span>Bar</span></li> <li><span>Bat</span></li> </ul> CSS 3 Lists 模块的当前规范确实指定了 ::marker 伪元素 可以完全满足您的需求； FF已测试 不支持 ::marker，我怀疑 Safari 或 Opera 是否有它。 IE当然不支持。 所以现在，唯一的方法是使用带有 list-style-image 的图像。 我想你可以用 li 包裹 span 的内容，然后你可以设置每个的颜色，但这对我来说似乎有点老套。 一种方法是将 li:before 与 content: "" 一起使用，并将其样式设置为 inline-block 元素。 这是一个工作代码片段： ul { list-style-type: none; /* no default bullets */ } ul li { font-family: Arial; font-size: 18px; } ul li:before { /* the custom styled bullets */ background-color: #14CCBB; border-radius: 50%; content: ""; display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 10px; width: 10px; } <ul> <li>Swollen joints</li> <li>Pain in hands and knees</li> <li>Redness around joints</li> <li>Constant fatigue</li> <li>Morning stiffness in joints</li> <li>High fevers</li> <li>Rheumatoid nodules, which develop around joints</li> </ul> 然而，另一种解决方案是使用带有 :before 的 border-radius: 50% 伪元素。这适用于所有浏览器，包括 IE 8 及更高版本。 使用 em 单元可以响应字体大小的变化。您可以通过调整 jsFiddle 窗口的大小来测试这一点。 ul { list-style: none; line-height: 1em; font-size: 3vw; } ul li:before { content: ""; line-height: 1em; width: .5em; height: .5em; background-color: red; float: left; margin: .25em .25em 0; border-radius: 50%; } <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> jsFiddle 您甚至可以使用 box-shadow 创建一些漂亮的阴影，而使用 content: "• " 解决方案看起来不太好。 我尝试过这个，但事情对我来说变得很奇怪。 （在本教程的 :after {content: "";} 部分之后，CSS 停止工作。我发现您只需在 color:#ddd; 项目本身上使用 li 即可为项目符号着色。 这是一个示例。 li{ color:#ff0000; list-style:square; } a { text-decoration: none; color:#00ff00; } a:hover { background-color: #ddd; } 我为此使用 jQuery： jQuery('li').wrapInner('<span class="li_content" />'); & 一些 CSS： li { color: red; } li span.li_content { color: black; } 可能有些过分，但如果您正在为 CMS 编码并且不想要求编辑在每个列表项中添加额外的跨度，那么这会很方便。 我建议给LI一个background-image和padding-left。 list-style-image属性在跨浏览器环境中很不稳定，并且添加额外的元素（例如跨度）是不必要的。 所以你的代码最终会看起来像这样： li { background:url(../images/bullet.png) 0 0 no-repeat; list-style:none; padding-left:10px; } 您可以做的最简单的事情是将<li>的内容包装在<span>或等效物中，然后您可以独立设置颜色。 或者，您可以使用所需的项目符号颜色制作图像，并使用 list-style-image 属性进行设置。 在多行条目中具有完美缩进的Lea Verou解决方案的变体可能是这样的： ul{ list-style: none; position: relative; padding: 0; margin: 0; } li{ padding-left: 1.5em; } li:before { position: absolute; content: "•"; color: red; left: 0; } 我知道这篇文章的答案有点晚了，但仅供参考...... CSS ul { color: red; } li { color: black; } 项目符号颜色在 ul 标签上定义，然后我们将 li 颜色切换回来。 我正在添加我的解决方案来解决这个问题。 我不想使用图像，验证器会因为你在 CSS 中使用负值而惩罚你，所以我这样做： ul { list-style:none; padding:0; margin:0; } li { padding-left:0.75em; position:relative; } li:before { content:"•"; color:#e60000; position:absolute; left:0em; } 以 Lea 的演示为例，这是制作带边框的无序列表的不同方法：http://jsfiddle.net/vX4K8/7/ HTML <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <ul> <li>Son</li> <li>Of</li> <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> </ul> </ul> </ul> CSS ul { list-style: none; margin: 0; } ul:first-child { padding: 0; } li { line-height: 180%; border-bottom: 1px dashed #CCC; margin-left: 14px; text-indent: -14px; } li:last-child { border: none; } li:before { content: ""; border-left: 4px solid #CCC; padding-left: 10px; } Lea Verous 解决方案很好，但我想更好地控制子弹的位置，所以这是我的方法： .entry ul { list-style: none; padding: 0; margin: 0; /* hide overflow in the case of floating elements around ... */ overflow: hidden; } .entry li { position: relative; padding-left: 24px; } .entry li:before { /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */ position: absolute; content: "• "; color: #E94E24; font-size: 30px; left: 0; /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ font-family: Arial, sans-serif; } 这样就可以了.. li{ color: #fff; }

如何在选项卡内添加下一个/保存按钮以继续下一个选项卡

我是编码新手/菜鸟，我只是想问一下，一旦用户单击“下一步”/“保存”，如何使选项卡继续执行下一个选项卡？是否可以更改完成的选项卡的颜色？对于e...

如何将BackgroundColor设置为Color，而不是int

如果我有 Color(Long)，如何设置 setBackgroundColor 或者如何从 Color 获取十六进制？ 枚举类 ColorRes(val 颜色: Color, val 资源: Int) 尺寸（颜色（0xFFFF655C），R.drawable.size_icon） .

将 XYZ 转换为 sRGB

我正在尝试从 CIE XYZ 转换为 sRGB 色彩空间，作为 CIELAB 和 sRGB 色彩空间之间的中介。我正在使用 http://www.brucelindbloom.com/ 和 https://en.wikiped 中的表格...

如何找出 flutter 中图标（和其他对象）的默认颜色？

我对颤振中的颜色很陌生。我已经设置了一个 MaterialApp 材料应用程序（ 标题：'标题'， 主题：主题数据（ colorScheme: ColorScheme.fromSeed(seedColor: Colors.brown), useMaterial3：正确，...

我如何获取活动中颜色资源的值

我需要获取颜色的字符串值。换句话说，我想从字符串格式的#ffffffff等颜色资源中提取#ffffffff。有没有什么...

ggplot，带有连接成对值的彩色线

我想用以下数据创建一个 ggplot 图表： `患者病情essai 10MWT 1 无 1 9,57 1 无 2 9,52 1 无 3 8,92 1平均1 9,73 1 平均 2...

如何在 VS Code 编辑器中通过标题级别更改 Markdown 标题颜色？

我的问题与此类似，但给出的答案是针对 Vim 的，我需要一个针对 VS Code 的答案。我是一个真正的新手，我尝试自己解决这个问题，但这些尝试失败了： Markdown 预...

如何更改 Visual Studio Code 中语法的颜色？

例如，如果我在 VS Code 中编写 Latex，我已经选择了一个主题，但想要对其进行微调。 如果我想更改引文项的颜色，例如，中的字母 abc98

绘制十六进制代码数字作为因变量的方法

我正在尝试创建一个数据可视化，显示湿度和温度对植物茎颜色的影响，但植物茎颜色是从照片中获取的独特的十六进制代码。我本来计划...

在 JavaScript 中解析 CSS 颜色最有效的方法是什么？

给定一个有效的CSS颜色值的字符串： #fff #ffffff 白色的 RGB(255, 255, 255) 我需要获取以下格式的数字数组：[R，G，B]

如何获取outlook邮件中粗体的数据输出

下面是运行良好的脚本，我希望特定范围应以粗体显示并更改字体颜色。 代码： 子发送会议() Dim objOL '作为 Outlook.Application 调暗 objAppt '作为 Outlook。

Python 脚本点击蓝色像素而不是红色

我编写了一个 Python 脚本，可以捕获屏幕截图并根据颜色单击特定像素。目标是点击红色像素，但由于某种原因，它点击了蓝色像素......

如何在flutter中创建一组共享的自定义颜色名称？

我正在使用 Flutter 3.22，多年来我第一次开始创建我的个人可重用小部件和实用程序库。 一切都很顺利，除了一件事我不明白......

如何从单个命名颜色中提取十六进制代码？

这可能是重复的（如果是，我将删除问题），但请先阅读。 模拟图： 库（ggplot2） <- ggplot(data = mtcars, aes(x = hp, y = "", fill = as.factor(g...

如何在 R 中使用自定义调色板 wordcloud 设置颜色数量

我正在尝试在 R 中构建一些调查答案的词云，该词云按频率着色，但使用我被要求使用的自定义调色板。调色板有8种颜色，但无论我...

使用python计算PDF上的cmyk、点覆盖率

我没有找到任何免费或开源库来计算 pdf 上的 CMYK 和专色。 如果有人能指导我正确的方向，告诉我应该如何获取颜色，我将不胜感激

KML ARGB 颜色未正确显示

这是我正在制作的地图的屏幕截图： 这是我的 KML 代码： <LineStyle> <color>ff8C0A23</color> <width>2</</desc> <question vote="2"> <p>这是我正在制作的地图的屏幕截图：</p> <p><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvc1d0c0EuanBn" alt="enter image description here"/></p> <p>这是我的 KML 代码：</p> <pre><code>&lt;Style id=&#34;line1&#34;&gt; &lt;LineStyle&gt; &lt;color&gt;ff8C0A23&lt;/color&gt; &lt;width&gt;2&lt;/width&gt; &lt;/LineStyle&gt; &lt;/Style&gt; &lt;Placemark&gt; &lt;styleUrl&gt;#line1&lt;/styleUrl&gt; &lt;LineString&gt;&lt;coordinates&gt; ... </code></pre> <p>你可以看到颜色值是<pre><code>ff8C0A23</code></pre>，它是<strong>ARGB</strong>，对吧？所以 <strong>RGB</strong> 颜色是 <pre><code>8C0A23</code></pre>，应该如下所示：</p> <p><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvbFZzWTIuanBn" alt="enter image description here"/></p> <p>但是正如您所看到的，边界的颜色在地图中显示完全不同。有谁知道怎么解决吗？</p> </question> <answer tick="true" vote="14"> <p><a href="https://developers.google.com/kml/documentation/kmlreference" rel="nofollow noreferrer">https://developers.google.com/kml/documentation/kmlreference</a></p> <p>根据： <a href="https://developers.google.com/kml/documentation/kmlreference#color" rel="nofollow noreferrer">https://developers.google.com/kml/documentation/kmlreference#color</a></p> <p>表达顺序为aabbggrr</p> <pre><code>&lt;color&gt; Color and opacity (alpha) values are expressed in hexadecimal notation. The range of values for any one color is 0 to 255 (00 to ff). For alpha, 00 is fully transparent and ff is fully opaque. The order of expression is aabbggrr, where aa=alpha (00 to ff); bb=blue (00 to ff); gg=green (00 to ff); rr=red (00 to ff). For example, if you want to apply a blue color with 50 percent opacity to an overlay, you would specify the following: &lt;color&gt;7fff0000&lt;/color&gt;, where alpha=0x7f, blue=0xff, green=0x00, and red=0x00. </code></pre> <p>请参阅此颜色选择器： <a href="http://www.zonums.com/gmaps/kml_color/" rel="nofollow noreferrer">http://www.zonums.com/gmaps/kml_color/</a>（似乎不再工作）</p> <p>我的副本：<a href="http://www.geocodezip.com/zonums_com_gmaps_kml_color.html" rel="nofollow noreferrer">http://www.geocodezip.com/zonums_com_gmaps_kml_color.html</a></p> </answer> </body></html>

Python 中的球形颜色曲面图

我正在尝试重新创建这样的情节： 但球体表面的颜色与此类似： 所以球体的顶部和底部（Z 轴）应该是蓝色，正面和背面（X 轴）

如何专门更改或替换红色的色调？

我的脚本没有按我的预期运行。我的代码有什么问题吗？ 从 PIL 导入图像 导入色彩系统 defchange_red_to_blue_hsl(图像路径, 输出路径): img = Image.open(image_...