CSS에서 정규 표현식을 사용합니까?

s1 , s2 등 의 형식의 ID 가있는 div가있는 html 페이지가 있습니다 .

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

이 섹션 / div의 하위 집합에 css 속성을 적용하고 싶습니다 (id에 따라 다름). 그러나 div를 추가 할 때마다 이와 같이 섹션에 대한 CSS를 별도로 추가해야합니다.

//css
#s1{
...
}

나는 세트에 스타일을 적용하는 데 사용할 수있는 CSS를 정규 표현식 같은 뭔가가 div의는 .

이전 답변에서 볼 수 있듯이 정규식 형식없이 해당 요소를 선택하는 것을 관리 할 수 ​​있지만 질문에 직접 대답하려면 선택기에서 정규식 형식을 사용할 수 있습니다.

#sections div[id^='s'] {
    color: red;  
}

즉, 문자 's'로 시작하는 ID가있는 #sections div 내의 모든 div 요소를 선택합니다.

여기에서 바이올린을 참조 하십시오 .

W3 CSS 선택기 문서는 여기에 있습니다 .

이 답변의 보완으로 $최종 일치 *를 얻고 값 이름의 어느 곳에서나 일치를 얻는 데 사용할 수 있습니다 .

일치 어디서나 : .col-md, .left-col, .col, .tricolor, 등

[class*="col"]

처음에 일치 : .col-md, .col-sm-6, 등

[class^="col-"]

결말에서 찾습니다 : .left-col, .right-col, 등

[class$="-col"]

ID는 요소를 고유하게 식별하기위한 것 입니다. 적용된 모든 스타일은 해당 요소에 고유해야합니다. 많은 요소 에 적용하려는 스타일이있는 경우 ID 선택자에 의존하지 말고 모든 요소에 클래스를 추가해야합니다.

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

과

.sec {
    ...
}

또는 특정 경우에 다른 것이 없으면 부모 컨테이너 내부의 모든 부서를 선택할 수 있습니다.

#sections > div {
    ...
}

우선, HTML 문서 내에서 항목을 일치시키는 방법에는 여러 가지가 있습니다. 이 참조로 시작하여 요소에 스타일 규칙을 적용하는 데 사용할 수있는 사용 가능한 선택기 / 패턴을 확인하십시오.

http://www.w3.org/TR/selectors/

경기 div의 직접적인 후손들 #main.

#main > div

의 div직간접 후손 인 모든를 찾습니다 #main.

#main div

div의 직계 자손 인 첫 번째 항목 과 일치합니다 #sections.

#main > div:first-child

div특정 속성과 일치 합니다.

#main > div[foo="bar"]

다음과 같이 각 DIV에 클래스를 추가하고 규칙을 클래스에 적용 할 수 있습니다.

HTML :

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS :

//css
.myclass
{
   ...
}

*원하는 문자를 포함하는 모든 문자열을 얻고 싶을 때 일반적으로 사용 합니다.

* 정규식에서 사용되며 모든 문자를 대체합니다.

SASS 또는 CSS에서 사용되는 것은 [id*="s"]ID가 "s ......"인 모든 DOM 요소를 가져옵니다.

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

내 일반 CSS 정규식을 사용해보십시오

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

데모 https://regexr.com/4a22i

CSS에서 특정 요소를 선택하는 또 다른 간단한 방법이 있습니다.

#s1, #s2, #s3 {
    // set css attributes here
}

선택할 수있는 요소가 몇 개 밖에없고 클래스에 신경 쓰지 않으려면이 방법도 쉽게 작동합니다.