텍스트 변환은 변경하거나 덮어 쓸 수 없습니까? (css)

나는 CSS를 공부하고 있는데 왜 이해가 안되는가 다른 텍스트 및 2 행에는 빨간색 밑줄 효과가 있습니다. 나는 다른 클래스를 위해 클래스를 변경하거나 클래스 2 클래스에 아무 것도 설정하지 않았다고 생각했다.텍스트 변환은 변경하거나 덮어 쓸 수 없습니까? (css)

.line2와 .others 모두`text-decoration : none '을 시도했는데 텍스트에 여전히 빨간색 밑줄이 표시되었습니다.

<html> 
    <head> 
    <style type="text/css"> 
    .line {color:red; text-transform:uppercase; text-decoration:underline;} 

    .line2 {color:blue; text-transform:none;} 

    .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;} 
    </style> 
    </head> 

    <body> 
    <div class='line'> 
     line 1 
     <div class='others'><BR>some OTHER text<BR></DIV> 
     <div class='line2'> 
      <BR>line 2 
     </div> 
    </div> 
    </body> 
    </html>

출처

2010-05-05 Radek

하여 선택기의 특이성을 늘려보십시오, 그러나이 동작은 CSS 사양에 내장되어 있습니다 :

를

이 속성은 상속되지 않지만 요소는 상속되지 않습니다. 부모와 일치해야합니다. 예를 들어 요소에 밑줄이 표시되면 선은 하위 요소까지 확장되어야합니다. 하위 항목의 색상 값이 다른 경우에도 밑줄의 색상은 동일하게 유지됩니다.

http://www.w3.org/TR/REC-CSS1/#text-decoration을 참조하십시오.

이것은 특별한 상속의 일종으로 표준 CSS 상속과는 다른 것으로, 다른 규칙,보다 구체적인 선택자 또는! important로 대체 할 수없는 이유입니다.

텍스트 장식 효과가 원래 블록 요소가 아닌 인라인에 적용되도록 설계 되었기 때문에 나는 추측 할 수 있습니다. 내부에 스팬이있는 링크를 상상해보십시오. 스팬이 부모 링크의 텍스트 장식 속성을 채택하는 것은 의미가 있습니다.

HTML을 조정하지 않고 실제로 수정 사항이 없습니다. 문제를 피하는 가장 쉬운 방법은 블록에 텍스트 장식을 설정하지 않는 것입니다 (특히 <div class="line">과 같은 '컨테이너'블록). 나는 다음과 같은 것을 사용할 것입니다 :

<html> 
<head> 
<style type="text/css"> 
.line {color:red; text-transform:uppercase; text-decoration:underline;} 

.line2 {color:blue; text-transform:none;} 

.others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;} 
</style> 
</head> 

<body> 
<div> 
    <span class="line">line 1</span> 
    <div class="others"><BR>some OTHER text<BR></DIV> 
    <div class="line2"> 
     <BR>line 2 
    </div> 
</div> 
</body> 
</html>

좋은 발견, 그것은 항상 새로운 것을 배우는 것이 좋습니다!

출처

2010-05-05 07:11:06 Beejamin

@Beejamin : 아주 좋았어, 아주 좋았어. 고맙습니다 – Radek

사용이 대신 :

<html> 
    <head> 
    <style type="text/css"> 
    .line .em {color:red; text-transform:uppercase; text-decoration:underline;} 

    .line .line2 {color:blue; text-transform:none; text-decoration: none;} 

    .line .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;} 
    </style> 
    </head> 

    <body> 
    <div class='line'> 
     <div class="em">line 1</div> 
     <div class='others'><BR>some OTHER text<BR></DIV> 
     <div class='line2'> 
      <BR>line 2 
     </div> 
    </div> 
    </body> 
    </html>

출처

2010-05-05 04:39:29

답변이 업데이트되었습니다. –

위대한! 그게 효과가있어, 나 한테 설명 해줄 수 있니? 그 차이점은 무엇입니까? – Radek

수업을 변경했습니다. 그것이 무엇을하고 있었는지 확실하지 않지만 Firebug에서 나타나지 않는 계단식 충돌처럼 보입니다. –

그것은 처음에는 이상한 것 같다

div.others 
div.item2

출처

2010-05-05 04:45:19

그런 식 으로요? 'div.line2 {color : blue; 텍스트 변환 : 없음; 텍스트 장식 : 없음;}'작동하지 않았습니다. – Radek

예. 방금 직접 테스트했습니다. @ 조쉬 K는 새로운 태그로 텍스트를 분리 할 때 더 좋습니다. –

@Josh K & @Ben Rowe : 좋아,하지만 HTML을 바꿀 수 없거나 바꿀 수 없다면?! CSS를 사용하는 솔루션이 있습니까? – Radek

텍스트 변환은 변경하거나 덮어 쓸 수 없습니까? (css)

답변

관련 문제