有没有更好的方法来复制这个CSS代码

我正在寻找更好的方法来复制这个，而不必在每个换行符后使用\ A。它会在github页面上使用，所以根据我的知识我不能使用服务器端语言。有没有更好的方法来复制这个CSS代码

我想要一个单独的文件，所以我可以从它撤回列表并将它们放在不同的页面上。

 .list1:before { 
 
\t display: block; 
 
\t white-space: pre; 
 
     content: "list1 text \A list1 text \A list1 text" ; 
 
     } 
 
    
 
    .list2:before { 
 
\t display: block; 
 
\t white-space: pre; 
 
     content: "list2 text \A list2 text \A list2 text" ; 
 
     } 
 

 
    .list3:before { 
 
\t display: block; 
 
\t white-space: pre; 
 
     content: "list3 text \A list3 text \A list3 text" ;}

<ul class=list1></ul> 
 

 
<ul class=list2></ul> 
 

 
<ul class=list3></ul>

来源

2015-04-29 Sentracer

为什么不使用'li'标签？ –

由于编码而呈现为一个列表项目。项目符号或数字只会出现在第一个列表项上。 – Sentracer

你应该尝试使用第n个孩子，如：

.content div::before { 
 
    display: block; 
 
    white-space: pre; 
 
} 
 
.content div:nth-child(1)::before { 
 
    content: "list1 text \A list1 text \A list1 text" ; 
 
} 
 
.content div:nth-child(2)::before { 
 
    content: "list2 text \A list2 text \A list2 text" ; 
 
} 
 
.content div:nth-child(3)::before { 
 
    content: "list3 text \A list3 text \A list3 text" ; 
 
}

<div class="content"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

来源

2015-04-29 11:47:43

你如何指定以这种方式出现哪个列表？相同的列表将以不特定顺序出现在几页上。 – Sentracer

存储在CSS中你的内容是不是真正的标准做法。使用:before和content通常用于插入有助于页面风格（图标和图形）而不是内容的可见项目。

我觉得你在这里

两个选项让你的内容在HTML和演出/ JS与隐藏。
用js动态插入你的内容。

我提供了一个选择的例子2.有可能是一个更好的方法来这个js。这是非常快速和肮脏。 :-)

也here is a link，你可以玩。

var list1 = "<li>apples</li> <li>oranges</li> <li>pears</li>"; 
 

 
var list2 = "<li>cars</li> <li>trucks</li> <li>trains</li>"; 
 

 
var list3 = "<li>carrots</li> <li>corn</li> <li>onions</li>"; 
 

 
function InsertListContents(listNum) { 
 
    var contents = ""; 
 
    switch (listNum) { 
 
    case 1: 
 
     contents = list1; 
 
     break; 
 
    case 2: 
 
     contents = list2; 
 
     break; 
 
    case 3: 
 
     contents = list3; 
 
     break; 
 
    default: 
 
     contents = "<li>sorry, no content found</li>"; 
 
    } 
 

 
    $('.list' + listNum).html(contents); 
 
} 
 

 
$(document).ready(function() { 
 
    // make a decision on which list to show 
 
    // This is random, you'll want write your own function to decide 
 
    var listNum = Math.floor(Math.random() * 3) + 1; 
 

 
    InsertListContents(listNum); 
 

 
    // for demonstration purposes 
 
    $('.list' + listNum).addClass("example"); 
 
})

.example { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button onclick='InsertListContents(1)'>1</button> 
 
    <button onclick='InsertListContents(2)'>2</button> 
 
    <button onclick='InsertListContents(3)'>3</button> 
 
    <ul class='list1'></ul> 
 

 
    <ul class='list2'></ul> 
 

 
    <ul class='list3'></ul> 
 
    <br> 
 
    <br> 
 
    <p class='example'>*blue content was inserted at random</p> 
 
</body>

来源

2015-04-29 12:46:54 aljachimiak

选择2接近我正在寻找的。它不能是随机的。 – Sentracer

对 - 你必须编写一些JavaScript来选择正确的内容来显示。您需要将代码替换为适合您页面和内容的代码。 – aljachimiak

如果您使用的是gh页面，找出Jekyll以及如何使用partials和布局可能是最正确的解决方案。 – aljachimiak

有没有更好的方法来复制这个CSS代码

回答

相关问题