클래스용 CSS의 와일드카드 선택기(*, ^ 및 $)

CSS에서 선택자는 클래스 이름, ID, 태그 등으로 요소를 선택하는 데 사용됩니다. CSS에는 HTML 요소를 선택하는 쿼리를 정의하는 데 사용할 수 있는 와일드카드 선택기도 있습니다.

와일드카드 선택기를 사용하면 특정 속성(예: 클래스 또는 ID) 값에 특정 하위 문자열이 포함된 HTML 요소를 선택할 수 있습니다. 이 튜토리얼에서는 *, ^ 및 $ 와일드카드 선택기를 사용하여 클래스와 ID를 나타내는 방법을 배웁니다.

CSS에는 (*=) 와일드카드 선택기가 포함되어 있습니다

포함(*=) 와일드카드 선택기를 사용하면 개발자는 속성 값에 하위 문자열로 "문자열"이 포함된 모든 HTML 요소를 찾을 수 있습니다. 예를 들어, 클래스에서 "*" 와일드카드 선택기를 사용하면 클래스 이름에 해당 문자열이 포함된 모든 HTML 요소가 검색됩니다.

문법

사용자는 다음 구문에 따라 클래스에 (*)가 포함된 와일드카드 선택기를 사용할 수 있습니다.

으아아아

위 구문은 클래스 이름의 하위 문자열로 "string"을 포함하는 모든 HTML 요소를 선택합니다.

예

아래 예에서는 4개의 서로 다른 div 요소를 만들고 클래스 이름에 따라 텍스트를 추가했습니다. CSS에서는 "contains" 와일드카드 선택기를 사용하여 클래스 이름에 하위 문자열로 "test"가 포함된 모든 div 요소를 선택합니다.

출력에서 사용자는 "test" 하위 문자열이 있는 클래스 이름을 포함하므로 처음 두 div 요소의 텍스트 색상이 빨간색임을 확인할 수 있습니다.

으아아아

(^=)로 시작하는 CSS 와일드카드 선택기

(^=) 와일드카드 선택기로 시작하면 속성 값이 특정 하위 문자열로 시작하는 모든 HTML 요소를 선택할 수 있습니다.

문법

사용자는 다음 구문에 따라 클래스에 와일드카드 문자로 시작하는 선택기를 사용할 수 있습니다.

으아아아

위 구문은 클래스 이름이 "string"으로 시작하는 모든 HTML 요소를 선택합니다.

예

아래 예에서는 (^=)로 시작하는 와일드카드 CSS 선택기와 클래스를 사용하여 클래스 이름을 기반으로 요소를 선택했습니다.

출력에서 사용자는 첫 번째 및 세 번째 div 요소의 텍스트가 처음에 "test" 문자열을 포함하고 있기 때문에 파란색으로 변하는 것을 볼 수 있습니다. 두 번째 div 요소에는 클래스 이름에 "test"가 포함되어 있지만 이는 클래스 이름 끝에 있으므로 선행(^=) 와일드카드 선택기에 의해 선택되지 않습니다.

으아아아

CSS는 ($=) 와일드카드 선택기로 끝납니다

($=)로 끝나는 와일드카드 선택기는 특정 속성 값 끝에 하위 문자열이 포함된 경우 모든 HTML 요소를 선택합니다. 예를 들어 서로 다른 두 요소의 클래스 이름이 "onestart"와 "lastone"이고 하위 문자열이 "one"인 경우 하위 문자열의 첫 번째 끝이 포함되어 있으므로 클래스 이름이 "lastone"인 HTML 요소만 선택됩니다. .

문법

사용자는 다음 구문에 따라 클래스에서 ($=)로 끝나는 와일드카드 CSS 선택기를 사용할 수 있습니다.

으아아아

위 구문은 클래스 이름이 "string" 하위 문자열로 끝나는 모든 HTML 요소를 선택합니다.

예

아래 예에서 두 번째 ^nd 및 네 번째 div 요소에는 클래스 이름 값 끝에 "test" 하위 문자열이 포함되어 있습니다. 끝에 ($=) 와일드카드가 있는 CSS 선택기를 사용하여 두 개의 div 요소를 선택하고 여기에 테두리, 여백 및 패딩을 적용합니다.

으아아아

예

아래 예에서는 클래스를 속성으로 사용하는 대신 id로 끝나는 CSS 선택기를 사용합니다. 다른 속성과 와일드카드 CSS 선택기를 사용하여 HTML 요소를 선택하는 방법을 보여줍니다.

여기서 id 값 끝에 "name"이 포함된 모든 HTML 요소를 선택하고 글꼴 스타일과 색상을 변경합니다.

으아아아

사용자는 클래스와 함께 와일드카드 CSS 선택기를 사용하는 방법을 배웠습니다. 사용자는 포함(*=) CSS 선택기를 사용하여 속성 값이 중간에 하위 문자열을 포함하는 요소를 가져올 수 있고, (^=) CSS 선택기를 사용하여 속성 값이 처음에 하위 문자열을 포함하고 ($로 끝나는 요소를 가져올 수 있습니다. ). =) 끝입니다.

또한 사용자는 이전 예에서 id와 같은 다른 속성과 함께 와일드카드 CSS 선택기를 사용하는 방법을 배웠습니다.

위 내용은 클래스용 CSS의 와일드카드 선택기(*, ^ 및 $)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!