2014-03-19 2 views
4

나는 방향이 인라인 때CSS : DIR = "RTL"스타일 VS = "방향 : RTL"

<div dir="rtl">foo</div> 

div[dir="rtl"] 
{ 
....; 
} 

그러나

<div style="direction:rtl">foo</div> ? 

모두 동작합니다 스타일을하는 방법을 어떻게 스타일을 알고 (텍스트의 오른쪽 정렬)하지만 내부 요소 (float, text-align ...)에 대한 미세 조정이 필요하며 두 번째 경우에 올바르게 규칙을 설정할 수 없습니다.

HTML을 편집 할 수 없습니다. 나는 반드시 style = "direction : rtl"을 사용해야한다. 당신이 HTML을 수정할 수 없기 때문에

답변

6

, 정말 정말 해키 선택은 다음과 같습니다

div[style*="direction:rtl"] { 
    ... 
} 

JSFiddle demo. 단지 style=이 아니라도 단지 direction:rtl보다가 요소의 style 건물 내에서 선언이 요소를 일치 반대로 내가 style*=을 사용하고

참고.

[style*="direction:rtl"], [style*="direction: rtl"] { ... } 

또한이 경우에는 그냥 style 속성에 일치 수 : 공백으로 속성에서 값을 구분 style 속성을 처리 할 수있는 선택, 당신은 또한 [style*="direction: rtl"]를 사용할 수있는 여분의 강도

[style*="rtl"] { ... } 

0 : 나는 문자의 조합은 (배경 이미지 파일 이름과 같은 외부 자원을 무시하고) 다른 속성에 사용되지 않는 확신으로 이는 "은 RTL"를 포함.

+0

예를 들어 해당 div가 다섯 번째 div 인 경우 'div : nth-child (5) {...}'를 사용할 수 있습니다. – LinkinTED

+0

1+ 다음과 같은 인스턴스에서 작동 할 div [style ~ = "direction : rtl"]'을 사용할 수도 있습니다 : http://jsfiddle.net/5tS8u/ .. "는 값이 공백 문자 인 attr을 나타냅니다. 분리 된 목록 ".. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors –

+1

@JoshCrozier'* ='는 셀렉터가 공백으로 구분되지 않기 때문에 더 나은 선택기입니다 (예 : , 그것은';'로 끝날 수 있습니다 (이것은 JSFiddle 데모를 깨뜨립니다 : http://jsfiddle.net/5tS8u/1/)). –

7

사용 DIR = "자동"형태에 및 삽입 된 텍스트를 자동 실행시에

<div dir="auto">Hello, world!</div> 
 
<br/> 
 
<div dir="auto">لا إله إلا الله محمد رسول الله</div> 
 
<br/> 
 
<input type="text" dir="auto" value="Hello, world!" > 
 
<br/><br/> 
 
<input type="text" dir="auto" value="لا إله إلا الله محمد رسول الله" >

JSFIDDLE 데모 https://jsfiddle.net/80k0drsf/

을 공급 내용의 방향을 감지하기 위해
+0

철자가 왜 부정적인 투표 ??? 날 잘못 여기 보여줘. –

+1

나는 downvote하지 않았지만 내가 html에 접근 할 수 없다고 말했기 때문에 나는 생각한다. – frenchone

0

html 태그에 클래스 "rtl"을 추가하십시오.

<html dir="rtl" class="rtl"> 
<head> 
    <style> 
     html[class*="rtl"] body { 
     background-color:blue; 
     } 
     html[class*="rtl"] div{ 
     background-color:green; 
     } 
    </style> 
</haed> 

<body> 

<div> 
</div> 

</body> 
</html> 
+0

제안 해 주셔서 감사하지만 html에 액세스 할 수 없기 때문에 적합하지 않습니다. – frenchone

관련 문제