developer tip

CSS 선택기

optionbox 2020. 8. 12. 08:08
반응형

CSS 선택기

유형에 따라 모든 입력을 대상으로하는 CSS를 사용할 수있는 방법이 있습니까? 다양한 비활성화 된 양식 요소에 사용하는 비활성화 된 클래스가 있고 텍스트 상자의 배경색을 설정하고 있지만 체크 박스에 해당 색상이 표시되는 것을 원하지 않습니다.

별도의 클래스로 이것을 할 수 있다는 것을 알고 있지만 가능하면 CSS를 사용하고 싶습니다. 나는 이것을 자바 스크립트로 설정할 수 있지만 CSS를 다시 찾을 수 있다고 확신합니다.

IE7 +를 목표로하고 있습니다. 그래서 CSS3를 사용할 수 없다고 생각합니다.

편집하다

CSS3를 사용하면 다음과 같은 작업을 할 수 있습니까?

INPUT[type='text']:disabled 내 수업을 완전히 없애는 것이 더 좋을 것입니다 ...

편집하다

도움을 주셔서 감사합니다! 그래서 여기에 클래스를 설정하지 않고 비활성화 된 모든 텍스트 상자와 영역을 수정하는 선택기가 있습니다.이 질문을 시작했을 때 저는 이것이 가능하다고 생각하지 못했습니다.

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

이것은 IE7에서 작동합니다.


예. IE7 +는 속성 선택기를 지원합니다.

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

특정 값과 같거나, 시작하거나, 포함하거나, 끝나는 값을 포함하는 속성 유형의 요소 입력.

기타 안전한 (IE7 +) 선택기는 다음과 같습니다.

  • 부모> 다음이있는 자녀 : p > span { font-weight: bold; }
  • 다음에 ~ 요소가 붙습니다. span ~ span { color: blue; }

<p><span/><span/></p>효과적으로 다음을 제공합니다.

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

추가 정보 : quirksmode.com의 브라우저 CSS 호환성

나는 다른 사람들이 그것을 할 수 없다고 생각하는 것에 놀랐다. CSS 속성 선택기는 이미 한동안 여기에있었습니다. .css 파일을 정리할 때입니다.


슬프게도 다른 포스터는 걸 올바른 크론에 의해 수정 된대로 실제로, ... 당신은 당신의 IE7과 엄격한 문서로 확인하지만, 우리 대부분 IE6 요구 사항은 JS 또는 이것에 대한 클래스 참조로 감소하지만 입니다 IE ^ h ^ h 브라우저에서 충분한 지원이없는 CSS2 속성입니다.

완전성에서 유형 선택기는 xpath와 유사한 형식 [attribute=value]이지만 많은 흥미로운 변형이 존재합니다. 그것은 것입니다 그것의 가능한, 좋은 일이 IE8에 대한 당신의 머리에 유지하는 경우에 매우 강력합니다.


jQuery로이 작업을 수행 할 수 있습니다. 선택기를 사용하여 유형과 같은 속성별로 선택할 수 있습니다. 그러나 이렇게하려면 사용자가 자바 스크립트를 사용 설정하고 다운로드 할 추가 파일이 있어야하지만 작동한다면 ...


죄송합니다. 짧은 대답은 아니오입니다. CSS (2.1)는 속성이 아닌 DOM의 요소 만 마크 업합니다. 각 입력에 특정 클래스를 적용해야합니다.

정말 유용 할 것이기 때문입니다.

JavaScript보다 CSS를 선호한다고 말씀 하셨지만 여전히 jQuery 사용을 고려해야합니다. 속성을 기반으로 DOM 요소에 스타일을 추가하는 매우 깔끔하고 우아한 방법을 제공합니다.

참고 URL : https://stackoverflow.com/questions/470702/css-selector-for-input-type

반응형