REGEX 매칭 속성 선택기

그들은 존재하지 않지만 그렇게 시원하지 않습니까? Regex를 구현하는 것이 얼마나 어려운지, 구문 분석하는 데 비싼 방법을 모르지만 폭탄 일뿐입니까?

공유 스타일이 있지만 개별 규칙이 필요한 비슷한 클래스 이름을 가진 요소가 많이 있다고 가정 해 봅시다.

나는 다음과 같은 규칙을 가진 그래픽 내비게이션 막대를 만들기 위해 해당 목록 항목에서 이미지 교체를 수행 할 수 있습니다.

너무 나쁘지는 않지만 구조의 크기가 커짐에 따라 CSS

도 자랍니다. 구조가 매우 커져서 CSS

가 동일하게 장황하게됩니다. 새 항목이 추가 될 때마다 수동으로 편집해야한다는 사실은 말할 것도 없습니다.

<ul >
	<li ><a href="/">Home</a></li>
	<li ><a href="/products/">Products</a></li>
	<li ><a href="/about/">About</a></li>
</ul>

그러나 내가 이것을 할 수 있다면 어떻게해야합니까?

이제 내 메뉴 스타일이 무한히 확장 가능합니다. CSS ! 를 만지지 않고도 몇 가지 새로운 항목을 추가 할 수 있습니다. 그냥 생각…

REGEX 매칭 속성 선택기 에 대한 질문이 자주 묻습니다 CSS의 REGEX 매칭 속성 선택기 란 무엇입니까?

#menu li
{
	background:none #fff no-repeat;
}

#menu li#menu-home
{
	background-image:url("home.png");
}

#menu li#menu-products
{
	background-image:url("products.png");
}

#menu li#menu-about
{
	background-image:url("about.png");
}

regex 매칭 속성 선택기는 속성 값을 기반으로 요소를 선택할 수있는 CSS의 강력한 도구입니다. 속성 값과 일치하기 위해 검색 패턴을 형성하는 일련의 문자 인 정규 표현식을 사용합니다. 이 기능은 특정 방식으로 비슷한 속성을 가진 요소를 스타일링하려는 경우 특히 유용합니다. 예를 들어, '텍스트'로 시작하는 유형 속성으로 모든 입력 요소를 선택하고 특정 스타일을 적용 할 수 있습니다. CSS에서 Regex 매칭 속성 선택기를 사용하는 방법은 무엇입니까? CSS에서 REGEX 매칭 셀렉터를 사용하여 CSS에서 Attribute Selectors를 사용하여 Attribute Syntax를 사용하는 것이 필요합니다. 속성 이름에는‘=’,‘~ =’,‘| =’,‘^=’,‘^=’,‘$ =’또는‘*=’가 될 수있는 일치 연산자가 있습니다. 예를 들어, 입력 [type^= "text"]은‘텍스트’로 시작하는 유형 속성으로 모든 입력 요소를 선택합니다.

regex 매칭 속성 선택기를 모든 속성과 함께 사용할 수 있습니까? 여기에는‘클래스’,‘ID’,‘유형’,‘HREF’등과 같은 표준 속성과 사용자 정의 속성이 모두 포함됩니다. 그러나 모든 브라우저에서 모든 속성이 지원되는 것은 아니므로 특정 속성을 사용하기 전에 브라우저 호환성을 확인하는 것이 좋습니다. regex 매칭 속성 선택기의 다른 매치 연산자는 무엇입니까?

Regex 매칭 속성 선택기에는 6 개의 일치 연산자가 있습니다. ‘=’운영자는 정확하게 일치하고,‘~ =’연산자는 공간 분리 된 값과 일치하며‘| =’운영자는 대시 분리 된 값 또는 정확한 값과 일치하고‘^=’연산자는 값의 시작과 일치하고‘$ =’연산자는 값의 끝과 일치하며‘*=’운영자가 값의 일부 일치합니다. javaScript?

예, QuerySelector 및 QuerySelectorall 메소드를 사용하여 JavaScript의 Regex 매칭 속성 선택기를 사용할 수 있습니다. 이러한 방법은 지정된 CSS 선택기와 일치하는 첫 번째 요소 또는 모든 요소를 ​​각각 반환합니다. 예를 들어, document.querySelector ( 'input [type^= "text"]')는 '텍스트'로 시작하는 유형 속성으로 첫 번째 입력 요소를 반환합니다.

regex sextoring selectors case-sensitive?

regex 매칭 속성 선택기는 케이스에 민감합니다. 그러나 속성 값 후에 'i'를 추가하여 케이스에 민감하게 만들 수 있습니다. 예를 들어, 입력 [type^= "text"i]은 케이스에 관계없이 '텍스트'로 시작하는 유형 속성을 가진 모든 입력 요소를 선택합니다.

단일 규칙에서 다중 Regex 매칭 속성 선택기를 사용할 수 있습니까?

예, Commas와 분리하여 단일 REGEX 일치 속성 선택기를 단일 REGEX 일치 속성 선택기를 사용할 수 있습니다. 예를 들어, 입력 [type^= "text"], Input [type^= "password"]는 '텍스트'또는 '비밀번호'로 시작하는 유형 속성으로 모든 입력 요소를 선택합니다.

regex 매칭 셀렉터를 다른 선택기와 결합 할 수 있습니까? 예를 들어, 입력 [type^= "text"]. Active는 '텍스트'로 시작하는 유형 속성으로 모든 활성 입력 요소를 선택합니다.

요소가 Regex 일치 속성 선택기와 일치하지 않으면 어떻게 되는가?

요소가 Regex 일치 속성 선택기와 일치하지 않으면 규칙에는 단순히 효과가 없습니다. REGEX 매칭 속성 선택기를 사용할 때는 오류가 발생하거나 나머지 CSS를 깨뜨리지 않습니다. regex 매칭 속성 선택기를 사용할 때 성능 고려 사항이 있습니까?

Regex 매칭 속성 선택기는 매우 강력하지만 다른 선택기보다 특히 큰 문서에서 사용될 때 느리게 할 수 있습니다. 따라서 신중하게 사용하고 항상 CSS를 성능을 테스트하는 것이 좋습니다.

.

위 내용은 REGEX 매칭 속성 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!