CSS 선택기 문제

HTML> 신체 .home 블로그 로그인 한> DIV #wrapper> DIV #page> DIV .catsCSS 선택기 문제

나는 (즉, UL> 리. 클래스 이름을 정렬되지 않은 목록을 선택에 문제가 클래스 이름 번호)를 CSS의 위 dom 위치에 추가하십시오. WordPress 테마로 작업하고 있습니다.

기본적으로이 태그에 영향을주기 위해 사용할 올바른 선택기에 대한 제안이 있습니까? 도움이된다면 단순화 된 html 구조를 제공 할 수 있습니다.

(때로는) #page 고양이 (때로는) UL 리튬

EDIT (때로는 클래스 이름 포함) (# 또는.) :

는 내가의 라인을 따라 선택기의 수를 시도했다 : 나는 워드 프레스 문서에서 제안 된 선택기를 시도했습니다.

HTML 구조 :

<body class='*dynamic*'> 
<div id="wrapper"> 
<div id="page"> 


<div id="header" role="banner"> 
     <h1><a href=""></a>Header</h1> 
     <div class="description">Site info</div> 
</div> 

<div id="cats"> 
<ul> 
<li class="page_item dynamically generated class"></li> 
</ul> 

<ul> 
<li class="category_item dynamically generated class"></li> 
</ul> 
</div>

은이 테스트 스타일

div#cats ul { 
    font-size:24px; 
}

와 나는 문제가있어 두 개의 목록 구조이다. 작동 할 때, 나는 그것을 바꿀 것이다. 나는이 상속 문제의 일종 생각합니다 , 그래서 슬래시을 시도하고 접근 방식을 구울려고 :

으로 더

을 요청했다.

감사합니다.

출처

2010-06-07 YsoL8

같은보다 구체적인 규칙을 시도 할 수 있지만, 첫 번째 조치로, 제거'>' 선택기를 덜 엄격하게 만듭니다. –

html 구조와 실제 셀렉터를 게시하는 데 문제가 있습니다. –

이것이 선택자 인 경우 몇 가지 문제가 있습니다.

html > body .home blog logged-in > div #wrapper > div #page > div .cats

몇 가지 가정을합니다. 당신이 실제 코드를 제공하지 않았기 때문에.

<body class="home blog logged-in">과 일치하려는 첫 번째 부분 (html > body .home blog logged-in)을 가정합니다. 정확히 일치하는 올바른 선택자는 body.home.blog.logged-in이지만 어떤 클래스와도 일치시키려는 경우 각 클래스에 대한 선택자가 필요합니다. 그들은 같은 스타일을 적용하는 경우, 당신은 다음과 같이 쉼표로 구분 된 목록으로 가질 수 있습니다

body.home, body.blog, body.logged-in { ... }

다음 부분 (body > div #wrapper) 나는 당신이 <body><div id="wrapper"> 일치한다고 가정. 올바른 선택기는 body > div#wrapper입니다. 현재 선택기는 <body><div><anytag id="wrapper">을 찾습니다.

나머지 선택기에도 똑같이 적용됩니다. 난 당신이 단순히 그 안에 무의미한 공백을 가지고있어, 선택자가 일치하지 않는다고 생각하고 있습니다. CSS 선택기에 대한 자세한 내용은 documentation on W3.org을 참조하거나 더 기본적인 내용을 찾으려면 W3Schools tutorial on CSS을 참조하십시오. 추가 HTML 후

업데이트 :

같은 특정 선택을 할 필요가 없습니다.당신은 선택과 목록을 일치시킬 수 있습니다 :

/* Match both lists */ 
div#cats ul {} 

/* Match first list */ 
div#cats ul:first-child {} 

/* Match last list (CSS3) */ 
div#cats ul:last-child {} 

/* Match items */ 
div#cats li.page-item {} 
div#cats li.category-item {} 
/* NOTE! Underscores are not legal characters in classes and ids */ 

/* Match generated class */ 
div#cats li.dynamically-generated-class {} 

/* Match generated class filtered by two classes */ 
div#cats li.page-item.dynamically-generated-class {} 
div#cats li.category-item.dynamically-generated-class {}

이 (가 페이지에 다른 곳에 존재하지 않습니다 예)에만 div#cats에 특별히 .page-item 및 .category-item 일치 필요가없는 경우, 접두어에 대한 필요가 없습니다 선택자는 div#cats입니다.

업데이트 2는 :

당신이 게시 한 CSS의 선택은 당신이 게시 된 HTML에 대한 올바른 것입니다. (See my demo). 아마도 결과에 영향을 미치는 다른 규칙이있을 수도 있습니다. 규칙에 실제로 border을 추가하여 올바른 요소와 실제로 일치하는지 확인하십시오.

Firebug은 Firefox에 매우 유용한 디버깅 도구로, 요소에 적용되는 모든 CSS 규칙을 보도록하겠습니다. 아마도 그것이 당신을 도울 수 있습니까?

출처

2010-06-07 10:54:25

소스 파일의 선택기에 공백이 없습니다. 제공되는 선택기는 Firefox 웹 개발자 플러그인에 의해 생성되었으며 다른 방법으로 누적됩니다. – YsoL8

아, 그 질문의 일부를 오해 한 것 같습니다. 답변이 업데이트되었습니다. –

나는 그 선택자에 대해 약간의 변형을 시도했지만 아무도 효과가 없었다. 이것이 올바른 스타일 시트라는 것을 알고 있으며, 나는이 지점까지 성공적으로 편집 해 왔습니다. – YsoL8

div#cats ul 스타일이 적용되고 있는지 확인하기 위해 방화범을 끄십시오. 아마도 다른 규칙 (다른 스타일 시트 일 수도 있습니다)에 의해 덮어 쓰여지고있는 것 같습니다. 당신이 그렇게

div#cats ul {font-size: 24px !important;}

처럼! 사용하여 중요한 시도 할 수 또는 당신이 정말 당신의 상황을 이해하지 못하는

div#cats ul li {font-size: 24px !important;}

출처

2010-06-07 11:34:01 pixeltocode

CSS 선택기 문제

답변

관련 문제