CSS에 값이있는 속성으로 요소를 타겟팅하려면 어떻게해야합니까?

CSS에서 특정 속성 을 가진 요소를 대상으로 지정할 수 있다는 것을 알고 있습니다 . 예를 들면 다음과 같습니다.

input[type=text]
{
    font-family: Consolas;
}

그러나 어떤 값의 속성을 가진 요소를 대상으로하는 것이 가능합니까 (예를 들어 속성이 요소에 추가되지 않은 경우 제외)?

대략 다음과 같습니다.

a[rel=*]
{
    color: red;
}

<a>이 HTML에서 첫 번째와 세 번째 태그를 타겟팅해야합니다 .

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

기본적 으로 속성 값이있는 cursor: pointer모든 <a>태그에 적용되는 것 같기 때문에 가능하다고 생각 href합니다.

다음은 rel정의 된 속성 이있는 모든 앵커 태그와 일치합니다 .

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

업데이트 : 언급 된 @vsync 시나리오를 설명하기 위해 주석 섹션 (emtpy / 비어 있지 않은 값을 구분)에서 CSS :not 의사 클래스를 통합 할 수 있습니다 .

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

예, CSS 3 선택자에는 여러 속성 선택자가 있습니다.

예

[att] 속성 값에 관계없이 att 속성이있는 요소를 나타냅니다.

[att = val] 값이 정확히 "val"인 att 속성이있는 요소를 나타냅니다.

[att ~ = val] 값이 공백으로 구분 된 단어 목록 인 att 속성이있는 요소를 나타냅니다. 그 중 하나는 정확히 "val"입니다. "val"에 공백이 포함되어 있으면 단어가 공백으로 구분되므로 아무 것도 나타내지 않습니다. 또한 "val"이 빈 문자열이면 아무것도 나타내지 않습니다.

[att ^ = val] 값이 접두사 "val"로 시작하는 att 속성이있는 요소를 나타냅니다. "val"이 빈 문자열이면 선택기는 아무 것도 나타내지 않습니다.

[att $ = val] 값이 접미사 "val"로 끝나는 att 속성이있는 요소를 나타냅니다. "val"이 빈 문자열이면 선택기는 아무 것도 나타내지 않습니다.

[att * = val] 값에 하위 문자열 "val"의 인스턴스가 하나 이상 포함 된 att 속성이있는 요소를 나타냅니다. "val"이 빈 문자열이면 선택기는 아무 것도 나타내지 않습니다.

브라우저가 기본적으로 속성을 설정하면이를 추가해야합니다. 이것은 "현대"브라더에서 문제가되지 않는 것 같지만, 내가 본 문제이므로 브라우저 간 성능을 확인해야합니다.

예를 들어, 9 이전의 IE에서 colSpan이 테이블의 모든 TD에 대해 설정되어 있으므로 단일 셀의 숨겨진 colspan 값이 1이라는 것을 발견했습니다.

따라서 "colspan 속성이있는 모든 TD"를 대상으로하는 경우 웹 문서에 적용하면 TD가 단일 셀인 것과 같이 colspan 속성이 설정되지 않은 td도 CSS 스타일을받습니다. 9 미만의 IE는 기본적으로 모두 스타일링합니다!

이것에 대해 걱정할 이유는 IE8 이상으로 업그레이드 할 수없는 나머지 XP 사용자들입니다.

예를 들어 내용이 끝에서 끝으로 이동할 수있는 테이블 그룹이 있으며 끝이나 시작 부분에 1에서 7까지의 셀을 비워 둡니다.

colspan 속성을 사용하여 끝 또는 시작 부분의 빈 셀에 색상을 적용하고 싶습니다. 다음을 사용하면 IE 9 미만에서는 작동하지 않습니다.

#my td[colspan] {background-color:blue;}

... 모든 TD의 스타일이 지정됩니다 (조건부 속성 스타일링이 IE에서 우월한 것으로 추정 되었기 때문에 웃기지 만 저는 빗나갑니다 ...).

스타일링 체계에 포함하고 싶은 colspan의 값을 '단일'로 설정할 때 모든 브라우저에서 다음 작업을 사용하지만 '해킹'이며 제대로 유효성을 검사하지 않습니다.

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

또는 "if lt IE 9"를 사용하여 조건부 스타일을 사용하여 문제를보다 적절하게 해결할 수 있어야합니다. 이 작업을 수행하는 올바른 방법이 될 것입니다. 그 과정에서 IElt9에서 "적절하게 구성된 CSS"를 숨겨야한다는 점을 명심하십시오.이 작업을 수행하는 유일한 적절한 방법은 선택적 스타일 시트를 사용하는 것입니다.

어쨌든 우리 대부분은 이미 그렇게하지만, 브라우저가 자동 속성을 표시하지 않는 경우 브라우저가 자동 속성을 적용하는지 여부와 속성 값에 대한 스타일링을 위해 다른 핵심 구문을 처리하는 방법을 고려하고 테스트하는 것이 좋습니다.

(btw, colspan은 아직 css 사양에 포함되지 않았으므로 [css3 기준]이 예제에서는 유효성 검사 오류가 발생하지 않습니다.)