リスト項目の最初の文字を選択してください。

私は約10のリストを持つページを持っています.5つは順序付けされておらず、5つは順序付けされています。一般的なディスクや箇条書き/数字やローマ数字ではなく、私はカスタムリストマーカーを作ることに決めました。リストの各項目はように...私が行う必要がある何リスト項目の最初の文字を選択してください。

<ul> 
    <li>*List Item 1</li> 
    <li>*List Item 2</li> 
</ul> 

<ol> 
    <li>1List Item</li> 
    <li>1List Item</li> 
</ol>

は、最初の文字は1、2または*であることを選択されています。 ulとolにスパン100回または別のスタイリングを使用しない場合、最初の文字を選択する方法はありますか？

私はスパンを使用してみましたが、その多くのリストとリスト項目に余分なコーディングの多くをそこになってきた...私はまた、これは、ULのために働くリチウム::最初の文字{...} を試してみましたしかし、olの場合、結果は例えば"* List Item"からの "* L"。

"：before"に少し読みましたが、これはおそらく次善のものですが、私はすべてのliを行うセレクタがあることを望んでいます。

ありがとうございました。

EDIT：私はJavascriptがここに最善のことだと思うので、同じように、と::前::最初の文字の組み合わせを用いて、溶液...

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

<ol> 
    <li>1List Item 1</li> 
    <li>2List Item 2</li> 
</ol> 

ol li::first-letter, ul li::before { 
... // select's all ol and all ul list items 
} 

ul li::before { 
    content: "*"; 
    ... // adds * as first letter for above 
}

出典

2017-11-20 mrkd1991

内のスパンを挿入し、<スパンクラス= "最初の文字"> L IST項目

' – bobharley

あなたは '順不同list'とどのような'にカスタムアイコンのように見えるの中の数字を持っています順序付きリスト 'と呼ばれる。初心者にとっては間違った方法です。ここを見てくださいhttps://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-and-ordered-listカスタム 'ol'を作る方法を示しています。 >質問を誤解してしまったようです:) – Gezzasa

@Harley、私はスパンを使ってきましたが、何百ものリスト項目では、それぞれにスパンを入れるために余分なコードがたくさんあります。 – mrkd1991

を発見しました。

var liArray = document.getElementsByTagName('li').innerHTML; 

    for(i=0;i<liArray.length;i++){ 
    var buildString = '<span class="customStyle">'; 
    buildString += liArray[i].subString(0,1); 
    buildString += '</span>'; 
    buildString += liArray[i].subString(1); 
    liArray[i].innerHTML = buildString; 
    }

コードをすばやく説明します。まず、ドキュメント内のすべてのリスト要素を選択し、それらを "liArray"という配列に保存します。

次に、コードを各要素に適用するforループでその配列をループします。

次に、各リスト要素の最初の文字を取り、それをクラス "customStyle"のスパンタグにラップする "新しい"文字列を作成します。

これは、あなたのCSS文書にクラス "customStyle"を追加するだけで、あなたが欲しいものの最初の文字にしか適用できないようなスタイルを適用できるようにします。

出典

2017-11-20 05:19:07 YAHsaves

私はjsが行くと思っていました。私がcssだけでそれを行うことができれば、すべてのセレクタと擬似セレクタが不思議です。 – mrkd1991

body ul li:nth-child(odd){ 
background-color: #f22cf2; 
}

出典

2017-11-20 05:24:32 Zabkas

2番目のリスト項目をすべてスキップしませんか？ – mrkd1991

はい、使用できます--- body ul li：nth-child（1n + 0）{something：test;} – Zabkas

各リスト項目の最初の文字ではなく、リスト項目全体を選択します。学ぶのは便利なことですが、とても感謝しています。 – mrkd1991

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul li:nth-child(1) { 
background: red;} 

ol li:nth-child(1) { 
background: red;} 
</style> 
</head> 
<body> 

<ul> 
<li>*List Item 1</li> 
<li>*List Item 2</li> 
</ul> 

<ol> 
<li>1List Item</li> 
<li>1List Item</li> 
</ol> 
</body> 
</html>

出典

2017-11-20 23:42:17 Zabkas

それでも、全体のリスト項目が選択されています。ここでは最初の文字を1つだけolまたは* in ulのいずれかで取得したいだけです。 – mrkd1991

リスト項目の最初の文字を選択してください。

答えて

関連する問題