有沒有更好的方法來複制這個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代碼

回答

相關問題