CSS 클래스를 id로 변환하는 방법은 무엇입니까?

Question

이 CSS 코드입니다 ...

.breadcrumb { 
    font-size: 10px; 
    background-color: #006600; 
    padding: 0px 2px 2px 2px; 
    text-align: center; 
    color: #FFFFFF; 
} 

.breadcrumb a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 

.breadcrumb a:visited, .breadcrumb a:active { 
    color: #FFFFFF; 
} 

.breadcrumb a:hover { 
    text-decoration: underline; 
} 

이 내가 탐색 경로를 표시하기 위해 사용하고있는 코드입니다 ...

<p class="breadcrumb">Breadcrumb PHP code goes here</p> 

나는 CSS 코드가되도록 수정되어야합니다 I

<p id="breadcrumb">Breadcrumb PHP code goes here</p> 

누군가가 도와 드릴까요 : 같이 대신 클래스의 ID를 사용할 수 있습니까?

Answer 1

CSS의 .을 #으로 변경하십시오.

id 선택기를 사용하려는 경우 특정 시간에 페이지에 p의 인스턴스가 하나만 존재해야합니다.

Answer 2

'변경'을하면됩니다. ~ '#'. @Demian Brecht와 마찬가지로 id = "breadcrumb"인 페이지에 하나의 요소 만 있는지 확인해야합니다. 이 중 하나만있을 것이라는 확신이 들지 않으면 클래스를 사용하는 것이 좋습니다.

CSS 클래스 선택기는 페이지 성능에 큰 영향을주지 않습니다. 일반적으로 레이아웃 요소에는 ID 만 사용하고 다른 모든 선택기는 클래스로 유지하려고합니다. 여러 요소에서 스타일을 다시 사용하려는 경우 도움이됩니다. ID는 스크립팅을 위해 성능을 대폭 향상하지만 ID가있는 태그의 컨텍스트 내에서 클래스를 검색하면 성능은 여전히 ​​양호합니다.

다음은 수정 방법입니다.

#breadcrumb { 
    font-size: 10px; 
    background-color: #006600; 
    padding: 0px 2px 2px 2px; 
    text-align: center; 
    color: #FFFFFF; 
} 

#breadcrumb a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 

#breadcrumb a:visited, #breadcrumb a:active { 
    color: #FFFFFF; 
} 

#breadcrumb a:hover { 
    text-decoration: underline; 
}