Question

我正在寻找一种更好的方法来复制它，而不必在每次换行后使用\ A.它将在github页面上使用，因此据我所知，我不能使用服务器端语言。

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

＆＃13;

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

＆＃13;

 <ul class=list1></ul>

 <ul class=list2></ul>

 <ul class=list3></ul>

＆＃13;

Answer 1

您应该尝试使用nth-child：

.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>

Answer 2

将您的内容存储在css中并不是标准做法。使用:before和content通常会保留用于插入有助于页面样式（图标和图形）而不是内容的可见项目。

我认为你有两个选择

将您的内容保存在html中并使用js显示/隐藏它。
使用js动态插入您的内容。

我提供了一个选择的例子2.可能有更好的方法来解决这个问题。这很快又脏。： - ）

您也可以使用here is a link。

＆＃13;

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");
})

＆＃13;

.example {
  color: blue;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: