2011-02-02 3 views
1

막연한 제목으로 죄송합니다. 한 줄에 내 질문을 설명 할 수 없습니다.사용할 CSS 선택기는 무엇입니까?

<h2 class='page-title'> {title} </h2> 

{제목} 동적으로 응용 프로그램에 의해 생성되는 곳이다 일반적인 백엔드 템플릿에서 생성되는 질문에 대한되는 페이지 제목. 그래서 나는 동일한 템플릿으로부터 생성 된 나의 사이트의 각 페이지에 하나를 가질 것이다. 페이지 정보

  1. : <h2 class='page-title'>About</h2>
  2. 서비스 페이지 : <h2 class='page-title'>Service</h2>
  3. 홈 페이지 : <h2 class='page-title'>Home</h2>

내가하고 싶은 것은 3. 홈 페이지에서, 그러나 표시 할 수 있음을 숨길 수있다 CSS 또는 Javascript를 사용하는 다른 모든 페이지에서 나는 어리 석음으로 h1 {display:none}을 시도했지만 그저 모든 것을 숨기고, 나는 단지 숨기고 싶다. <h2 class='page-title'>Home</h2>

그 방법에 대한 아이디어가 있으십니까?

+0

와우 ... 한 시간 안에 너무 많은 답변을 얻었습니다! 나는 stackoverflow 커뮤니티를 좋아합니다. 다들 감사 해요! – CuriousMind

답변

3

어느 홈 페이지 제목 특정 ID를 제공하거나 홈 페이지 자체에서 페이지 CSS를 사용하는 백엔드 코드를 사용하여 :

h2.page-title { 
    display:none; 
} 
1

당신은 단지 홈페이지 스타일을 추가하거나 현재 홈페이지를보고있는 것을 나타냅니다 클래스가 필요합니다 :

h2.page-title이 요소를 선택하는 매우 구체적인 방법을하지만, 모든 페이지에 영향을 미칩니다.

.page-title 클래스가 h2 요소에서만 발생한다는 것을 알고 있으면 작동 할 수 있습니다.

당신이 다음을 수행 할 수있는 몸에 클래스를 사용하는 경우 :

body.frontpage h2.page-title 

또는 body.frontpage .page-title 당신이 원하는 방법을 특정에 따라 달라집니다.

나는 특수성 문제를 피하기 위해 가능한 한 포괄적 인 것이 좋습니다.

1

나는 각 페이지에 대한 고유 ID를 (당신의 <html> 요소를 줄 것이다) : 당신은 CMS가있는 경우

<html id='{pageid}'> 
... 
<h2 class='page-title'> {title} </h2> 
... 
</html> 

이 그런 선택

#home .page-title { display: none } 
1

를 사용 또는 뭔가 비슷한, 단일 템플릿에 콘텐츠를 버리고 다음 자바 스크립트를 사용하여 더 나은 것 같아요. 나는 css에서 요소의 innerText에 대한 선택자를 모른다.

내가 일반적으로 jQuery 라이브러리를 사용 - 내가 좋아하는 것을 권장합니다 :

$(document).ready(function() { 
    $("h2.page-title:contains('Home')").css('display', 'none'); 
} 
+0

내가 이런 식으로 할 수 있다고 생각하지 않았다, 고마워! – CuriousMind

+0

다른 대부분의 대답은 맞습니다. 올바른 방법은 서버 측 코드에 있습니다. 이 방법은 꽤 더럽지 만 CMS의 프레임 워크를 편하게 편집하지 못하는 사람에게는 작업이 완료됩니다. – kmfk

+0

kmfk - 네, 맞습니다. 심지어 나는 모든 응답을 읽는 것과 같은 대결에 왔습니다. – CuriousMind

1

이 가장 동적으로 생성하는 데 사용되는 매우 동일한 서버 측 언어에 의해 수행되어, 당신은 단순히 조건을 추가하는 페이지가 '집'인 경우 아무 것도 출력되지 않습니다.

이것이 옵션이 아니라면 Mel의 방법대로하면 좋을 것입니다. javascript가 필요 없습니다.

또한 Mel의 코드는 숨기고 싶은 h2 위에 있어야하며 <style></style> 태그로 싸여 있다고 생각합니다.

관련 문제