我正在尝试在无序列表中渲染 fizzuzz 函数，每个单词对应不同的颜色(“fizz”-- 绿色，“buzz”--蓝色)，如下所示:
我成功地自行渲染了“fizz”和“buzz”的颜色，但是当渲染“fizzbuzz”线时，<li>的整个背景
分为绿色和蓝色，而不仅仅是单个单词。
这是负责“fizzbuzz”的 css 选择器:
li:nth-child(3n + 0):nth-child(5n + 0) {
background-image: linear-gradient(to right, green 50%, blue 50%);
background-clip: text;
text-fill-color: transparent;
}
我尝试修改 display父级的属性(property) <ul>到“内联”但这并不能解决问题:
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style-type: none;
display: in-line;
}
我正在尝试在纯 css 中执行此操作，而不修改我的 html/js。代码如下:
const unorderedList = Array.from(document.querySelector("ul").children);
function fizzbuzz(elements) {
for (var i = 0; i < elements.length; i++) {
var result = "";
var line = i + 1;
if (line % 3 === 0) result += "Fizz";
if (line % 5 === 0) result += "Buzz";
if (result.length ===0) result = line;
elements[i].innerText = result;
}
}
fizzbuzz(unorderedList)ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style-type: none;
display: in-line;
}
li:nth-child(3n + 0) {
color: green;
}
li:nth-child(5n + 0) {
color: blue;
}
li:nth-child(3n + 0):nth-child(5n + 0) {
background-image: linear-gradient(to right, green 50%, blue 50%);
background-clip: text;
text-fill-color: transparent;
}
}<html lang="en">
<head>
<title>FizzBuzz</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>如有任何帮助，我们将不胜感激。
最佳答案
添加宽度:fit-content;
const unorderedList = Array.from(document.querySelector("ul").children);
function fizzbuzz(elements) {
for (var i = 0; i < elements.length; i++) {
var result = "";
var line = i + 1;
if (line % 3 === 0) result += "Fizz";
if (line % 5 === 0) result += "Buzz";
if (result.length ===0) result = line;
elements[i].innerText = result;
}
}
fizzbuzz(unorderedList)ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
list-style-type: none;
display: in-line;
}
li:nth-child(3n + 0) {
color: green;
}
li:nth-child(5n + 0) {
color: blue;
}
li:nth-child(3n + 0):nth-child(5n + 0) {
background-image: linear-gradient(to right, green 50%, blue 50%);
background-clip: text;
-webkit-background-clip: text;
color:transparent;
width:fit-content;
}<html lang="en">
<head>
<title>FizzBuzz</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>关于javascript - 将两种不同的颜色作为渐变应用于 <li> 元素中的不同单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70600618/