2014-09-25 1 views
0

? 동일한 접두사로 시작하는 모든 html 요소에 영향을 미치는 스타일 이름을 정의 할 수 있습니다. 클래스 또는 태그로 분기하지 마십시오 ... SASS를 사용하지 마십시오. >CSS 접두사 범위가 모든 시작 이름 스타일에 영향을 미침

in CSS <style> section 
#prfxStyle1* { background-color: #ABCDEF; } 

in <HTML> section 
<div id="prfxStyle1Metals"> ... </div> 
<div id="prfxStyle1Plastics"> ... </div> 
<div id="prfxStyle1Organics"> ... </div> 

답변

4

더 -, 작거나 비슷한 프로세서 질문이 스타일을 정의, 셀렉터와 같은

일 (별표 * 일이 와일드 카드로 작동합니다)를 필터링하지 않습니다 유의하시기 바랍니다 "셀렉터"는 속성 선택자에 대해서만 시작됩니다. 속성 선택자으로

[id^="prfxStyle1"] { 
    /* styles */ 
} 

, 당신은 (사용자 정의 것들 포함) 인라인 요소에 정의 된 속성에 타겟팅 할 수 있습니다 :

그래서,이 경우, 아이디의 당신이 할 것 prfxStyle1로 시작 찾을 수 있습니다 :

<div attribute="value"> 

가능한 속성 선택자 (MDN docs에서)

,

[attr]
속성 이름이 attr 인 요소를 나타냅니다.

[attr = value]
속성 이름이 attr이고 값이 정확히 "value"인 요소를 나타냅니다.

는 [ATTR ~ = 값]
값 정확하게 "값"중 하나는 단어의 공백 분리 목록 ATTR의 속성 이름을 가진 원소를 나타낸다.

[attr | = value]
속성 이름이 attr 인 요소를 나타냅니다. 그 값은 정확히 "value"일 수 있거나 "value"로 시작하여 "-"(U + 002D) 바로 뒤에 올 수 있습니다. 언어 서브 코드 일치에 사용될 수 있습니다.

는 [ATTR^= 값]
값 "값"으로 접두어 ATTR 속성의 이름과 함께 원소를 나타낸다.

[attr $ = value]
속성 이름이 attr이고 값의 끝에 "value"가 붙은 요소를 나타냅니다.

는 [ATTR * = 값]
은 ATTR의 속성 이름을 가진 요소를 나타내며, 그 값이 문자열로서 스트링 "값"중 적어도 하나 개를 발생하는 것을 포함한다.

+0

내가 알고하지 않았다 +1 할 수 있습니다. '속성 선택자'가 의미하는 바를 명확히 할 수 있습니까? 태그 이름이나 유형이 아니라는 것을 의미합니까? 클래스와 ID에 의해서만? – DavidT

+0

제 질문은 선택 단계가 아니라 스타일 단계를 정의하고 있습니다 ... 감사합니다 ,,, – ZEE

+1

@ ZEE - 무슨 뜻입니까? 선택자 안에 스타일을 설정하기 만하면됩니다 :'[id^= "prfxStyle1"] {background-color : #ABCDEF; }' – LcSalazar

0
당신은 더 클래스 나 아이디의를 추가 할 수 있습니다

은 공백으로 구분 (심지어는 매우 사용 방법이 아니다) :

<div id="prfxStyle1 Metals"> ... </div> 
<div id="prfxStyle1 Plastics"> ... </div> 
<div id="prfxStyle1 Organics"> ... </div> 

그리고 CSS에서

하기 :

#prfxStyle1 { 
    //some CSS that will affect all divs 
} 

#Metals { 
    //CSS that will affect just the div with the Metal id 
} 

#Plastics { 
    //CSS that will affect just the div with the Plastics id 
} 

#Organics { 
    //CSS that will affect just the div with the Organics id 
} 
+1

을 알고 좋아요 그게 내가 최적화하려는거야 ... 난 단지 하나의 스타일을 정의하고 싶지만, 자동 지능을 정의하는 몇 가지에 적용 요소 ID의 경우 ...이 경우 xxx *라는 스타일은 id가 'xxxMetal', 'xxxPlastic', 'xxxOrganic'인 요소에 '자동으로'적용해야합니다 ... 감사합니다. – ZEE

관련 문제