2012-08-01 2 views
1

이미지 인 순서없는 목록에 list-style-type을 적용했습니다. 아래에서 볼 수 있듯이, 정렬되지 않은 목록에는 순서가없는 추가 목록이 있습니다.인라인 목록 스타일 스타일이 외부 스타일 규칙을 재정의하지 않음

중첩되지 않은 목록에 '원'목록 스타일 유형이 있기를 바랍니다. 그 이유는 중첩되지 않은 목록에 인라인 스타일을 사용했기 때문입니다.

문제는 순환 목록 스타일 대신 중첩 목록의 목록 스타일에 녹색 체크 표시가 여전히 표시되어 있다는 것입니다.

지금까지 인라인 CSS를 사용할 때마다 모든 외부 스타일 규칙이 무시 되었기 때문에이 경우 무엇을해야하는지 확신 할 수 없으므로 조언을 부탁드립니다.

CSS

ul{list-style-image:url(images/green-checkmark.png);} 

마크 업

<ul> 
    <li>hello</li> 
    <li>animals 
     <ul style="list-style-type:circle;"> 
      <li>cats</li> 
      <li>dogs</li> 
      <li>rats</li> 
      <li>hogs</li> 
      <li>snakes</li> 
      <li>frogs</li> 
     </ul> 
    </li> 
    <li>onions</li> 
</ul> 
+1

인라인 스타일을 사용하는 대신'class' 또는 'ul ul {...}'과 같은 더 구체적인 선택기를 사용하지 않는 이유는 무엇입니까? – Zhihao

+0

'list-style-image'뿐만 아니라'list-style-type'을 설정해야하기 때문입니다. –

+0

Zhihao 조언을 주셔서 감사합니다, 당신 말이 맞아, 내가 수업을 적용해야 ... – AnchovyLegend

답변

4

<ul style="list-style-type:circle; list-style-image: none;">을보십시오.

두 가지 속성이 다릅니다. list-style-image을 설정 한 경우 list-style-type을 무시하고 이미지는 을 사용할 수없는 경우에만 사용합니다. (백업용). 따라서 이미지를 사용하지 않으려면이 경우 이미지를 사용하지 말라고 명시 적으로 요구해야합니다.

당신은 실제로 그렇게처럼 설정 할 수 있어야한다 :

ul{ 
    list-style-image:url(images/green-checkmark.png); 
    list-style-type:circle; /* back-up */ 
} 

그리고 인라인 일 경우 : <ul style="list-style-image: none;">

+0

고마워요! 이 일을 ... – AnchovyLegend

2

당신이 목록 스타일 이미지 aswell을 무시 시도 적이 있습니까? 예 : style="list-style-image: none; list-style-type:circle;".

Zhihao가 맞습니다. 이것은 외부 CSS에서 클래스 또는 특정 선택기로 더 잘 수행 될 것입니다.

관련 문제