2016-07-10 3 views
-1

스팬 클래스의 스타일을 지정하려고하는데 아무 것도 변경하지 않습니다. 나는 왜 다른 모든 것이 효과가 있으며 왜 그런지 알 수는 없다. 귀하가 제공 한 의견을 바탕으로CSS 스타일 시트의 스팬 클래스 스타일이 작동하지 않는 이유는 무엇입니까?

.bold { 
 
    font-weight: bold; 
 
} 
 
.italic { 
 
    font-style: italic; 
 
}
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <title></title> 
 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div class="mainDiv"> 
 
    <div class="firstDiv"> 
 
     <img src="Images\parisImage.jpg" alt="Paris" id="parisImage"> 
 
     <p id="title">Terps Calculators Inc.</p> 
 
     <img src="Images/pineapple.jpg" alt="pineapple" id="pineappleImage" /> 
 
    </div> 
 
    <div class="secondDiv"> 
 
     <ul id="linkList"> 
 
     <li><a class="link" href="Http://www.google.com">www.google.com ,</a> 
 
     </li> 
 
     <li><a class="link" href="Http://www.hamodia.com">www.hamodia.com ,</a> 
 
     </li> 
 
     <li><a class="link " href="Http://www.gmail.com">www.gmail.com</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="thirdDiv"> 
 
     <h1 class="heading">Intoduction</h1> 
 
     <p><span class="bold">Terps Calculators Inc.</span><span class="italic">implements and provides these<br/> calculators for  your use. We keep expanding our collection<br/> every day so make sure you stop by often.</span> 
 
     </p> 
 
     <h1 class="heading">Calculators</h1> 
 
     <ul class="calculators"> 
 
     <li><a class="link2" href="GradesCalculator.html">Grades Calculator</a> 
 
     </li> 
 
     <li><a class="link2" href="InterestCalculator.html">Interest Calculator</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="fourthDiv"> 
 
     <p id="title2">Terps Calculators inc. &reg</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+1

작동 중입니다. 문제가 무엇이든, 당신은 당신의 질문에 그것을 포함시키지 않았습니다. [MCVE]를 만들어야합니다 (특히 ** Verifiable ** 부분에주의). – Quentin

+1

질문에 [mcve]를 게시하십시오. 게시 한 코드가 [잘 작동하는 것 같습니다] (https://jsfiddle.net/j08691/tbpLn4L1/). – j08691

+0

내가 스타일 시트의 다른 모든 코드를 주석 처리 할 때 작동하므로 뭔가를 재정의하고 무엇을 알아낼 수 없습니까? –

답변

-1

, 이것은 CSS specificity의 경우로 나타납니다이 내 HTML 코드입니다. 여기에서 .bold.italic 선택기는 다른 규칙보다 우선 적용 할만큼 구체적이지 않습니다. MDN 노트 같이

  1. 입력 선택기 (예컨대, H1)과 유사 요소 (예 : 전) 선택기 유형

    다음은 특이성이 증가된다. 클래스 셀렉터 (예 : .example), 속성 셀렉터 (예 : [type = "라디오"]) 및 의사 클래스 (예 : : 호버)를 포함 할 수 있습니다.

  2. ID 선택자 (예 : #example).

CSS specificity calculators 많은 온라인이 있고 당신은 쉽게 규칙이 적용됩니다 무엇을 계산하는 데 사용할 수 있습니다.

+0

Downvoter가 관심이 있으십니까? – j08691

관련 문제