ABC 주문 목록 항목은 대담한 스타일을 갖습니다

StackOverflow https://stackoverflow.com/questions/862878

  •  21-08-2019
  •  | 
  •  

문제

"a"로 설정된 유형의 HTML 주문 목록이 있습니다.

<ol type="A">...</ol>

따라서 각 목록 항목은 A, B, C 등으로 시작됩니다.

A, B, C 문자를 대담하게 스타일링하고 싶습니다. 나는 글꼴 중량을 설정하려고 시도했다 : Bold; CSS를 통해이지만 작동하지 않았습니다. 이 작업을 수행하는 방법에 대한 제안이 있습니까?

도움이 되었습니까?

해결책

약간의 속임수이지만 작동합니다.

HTML :

<ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>

CSS :

li span { font-weight: normal; }

다른 팁

대안적이고 우수한 솔루션으로, 이전 요소에서 사용자 정의 카운터를 사용할 수 있습니다. 추가 HTML 마크 업이 포함되지 않습니다. CSS 재설정은 그 옆에 사용되거나 최소한 스타일링을 ol 요소 (list-style-type: none, reset margin), 그렇지 않으면 요소에 두 카운터가 있습니다.

<ol>
    <li>First line</li>
    <li>Second line</li>
</ol>

CSS :

ol {
    counter-reset: my-badass-counter;
}
ol li:before {
    content: counter(my-badass-counter, upper-alpha);
    counter-increment: my-badass-counter;
    margin-right: 5px;
    font-weight: bold;
}

An example: http://jsfiddle.net/xpamu/1/

스타일을 올바르게 적용했거나 목록을 방해하는 다른 스타일 시트가 없다고 확신하십니까? 나는 이것을 시도했다 :

<ol type="A">
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
</ol>

그런 다음 스타일 시트에서 :

ol {font-weight: bold;}
ol li span.label {font-weight:normal;}

그리고 그것은 대담했다 A, B, C 텍스트가 아닙니다.

(Opera 9.6, FF 3, Safari 3.2 및 IE 7에서 테스트했습니다.)

나는이 질문이 조금 오래되었다는 것을 알고 있지만 여전히 많은 Google 검색에서 먼저 나타납니다. 스타일 시트 편집과 관련이없는 솔루션을 추가하고 싶었습니다 (제 경우에는 액세스 할 수 없었습니다).

<ol type="A">
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">Text</span></p>
  </li>
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">More text</span></p>
  </li>
</ol>

당신은 다음과 같은 일을 할 수 있습니다.

ol {
  font-weight: bold;
}

ol > li > * {
  font-weight: normal;
}

그래서 당신은 당신의 HTML에 "스타일"속성이 없습니다.

당신은 다음과 같은 일을 할 수 있습니다.

<ol type="A" style="font-weight: bold;">

<li style="padding-bottom: 8px;">****</li>

초보자를위한 간단한 코드입니다.

이 코드는 "Mozilla, Chrome 및 Edge ..에서 테스트되었습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top