2014-10-30 2 views
0

WordPress 플러그인을 개발하고 샘플 템플릿에서 제 플러그인이 잘 작동합니다. 하지만 다른 템플릿에 설치하면 다른 소스에서 스타일 속성을 가져옵니다.요소에 지정된 스타일을 가져 오는 방법은 무엇입니까?

는 템플릿 CSS에서 예를 들어 저자는 기록 파일 :

li{font-size: 20px;} 

내가 전화 내 요소는 CSS를 내 CSS 파일에서 불과 특성을 얻을 수 있습니까?

+0

귀하의 플러그인에는 스타일 규칙이 거의 없을 것입니다. 예를 들어 플러그인을 검정색으로 만들면 흰색 테마에서는 작동하지 않습니다. 물론 그것은 당신의 플러그인의 성격에 달려 있습니다. 중요한 부분에 대해서는 플러그인의 루트 태그에'awesome-plugin-name'과 같은 단일 클래스 이름을 부여하고 모든 스타일 규칙에'.awesome-plugin-name' 접두어를 붙이기로 결정할 수 있습니다. 절대로'! important'를 절대로 사용하지 마십시오. –

답변

3

그런 식으로 일할 수 없습니다. 다른 시트에서 CSS를 무시해야합니다. (또는 같은 시트의 어딘가에). 이처럼

: 당신이 부모를 사용하는 경우, 이미 일반적으로 li보다 더 구체적이기 때문에

li{font-size: 20px;} 
 

 
.small-list > li{font-size: 10px;}
<ul> 
 
    <li>List item 1.1</li> 
 
    <li>List item 1.2</li> 
 
    <li>List item 1.3</li> 
 
</ul> 
 

 
<ul class="small-list"> 
 
    <li>List item 2.1</li> 
 
    <li>List item 2.2</li> 
 
    <li>List item 2.3</li> 
 
</ul>

당신은 !important를 사용할 필요가 없습니다.

다른 옵션은 스타일 시트를 템플릿의 뒤에 배치하는 것입니다.

<link href="template-styles.css" rel="stylesheet" /> 
<link href="plugin-styles.css" rel="stylesheet" /> 

동일한 CSS 선택기를 사용하면 두 번째 시트가 첫 번째 시트보다 우선 적용됩니다.

!important을 사용하지 않은 또 다른 이유는 모든 규칙을 무시하고 싶지 않기 때문입니다. 당신은 템플릿과 페이지 제작자 사이에 있습니다. 저자는 WYSIWYG 편집기를 사용하고있을 가능성이 큽니다. !important을 사용하면 작성자가 실제로 원하는 규칙을 무시할 수 있습니다.

0

서식 파일의 CSS 스타일을 재정의해야합니다. !important CSS 선언 예를 사용

  1. : 당신은이 작업을 수행 할 수 있습니다 li{padding: 10px !important}

  2. 클래스/요소 앞에 부모 DIV를 추가합니다. 예 :

작동합니다
body li {padding: 10px}

로 변경을

li{padding: 10px} 

에서. 건배!

관련 문제