`a[href^='...']`와 같은 CSS 선택자는 어떻게 특정 앵커 요소를 대상으로 합니까?-CSS 튜토리얼-php.cn

`a[href^='...']`와 같은 CSS 선택자는 어떻게 특정 앵커 요소를 대상으로 합니까?

Susan Sarandon

풀어 주다： 2024-11-24 01:48:10

원래의

954명이 탐색했습니다.

How do CSS Selectors like `a[href^=

CSS 선택기 해독:[href^="..."]

CSS 선택기를 이해하면 다음을 지정하여 HTML 요소에 대한 정밀한 제어가 가능합니다. 충족해야 하는 기준. 그러한 선택기 중 하나는 href 속성 값의 시작 부분에 있는 특정 문자열의 존재 여부에 따라 앵커() 요소를 대상으로 하는 a[href^="..."]입니다.

고려하세요. 다음 CSS 코드:

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}

로그인 후 복사

이 선택기는 href 속성 값이 "http:"로 시작하는 모든 앵커 요소와 일치합니다. 결과적으로 "http:"로 시작하는 href 속성이 있는 HTML 문서의 모든 링크는 배경 이미지와 같은 지정된 스타일을 적용합니다.

자세한 설명을 위해 다음 HTML 코드가 있다고 가정합니다.

<a href="http://example.com">Example Website</a>
<a href="https://anothersite.net">Another Site</a>

로그인 후 복사

앞서 언급한 CSS 코드를 적용하면 첫 번째 링크에만 영향을 미칩니다. 해당 href 속성이 선택기의 기준(`href^="http:")과 일치하기 때문입니다. 배경 이미지가 이 링크를 장식하지만 두 번째 링크는 영향을 받지 않습니다.

다음은 또 다른 예입니다.

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

로그인 후 복사

이 선택기는 href 속성 값이 "http: //mysite.com" 또는 "http://www.mysite.com". 이러한 패턴과 일치하는 HTML 코드의 링크는 배경 이미지가 제거되고 오른쪽 여백이 0으로 설정됩니다.

위 내용은 `a[href^='...']`와 같은 CSS 선택자는 어떻게 특정 앵커 요소를 대상으로 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!