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

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

저는 s1, s2 등의 id를 가진 div가 있는 html 페이지를 가지고 있습니다.

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

(id에 따라) 이 섹션/divs의 하위 집합에 CSS 속성을 적용하고 싶습니다.하지만 div를 추가할 때마다 이렇게 섹션에 대한 css를 따로 추가해야 합니다.

//css
#s1{
...
}

div 집합에 스타일을 적용하는 데 사용할 수 있는 css의 정규식과 같은 것이 있습니까?

앞의 답변에서 알 수 있듯이 정규식의 형식 없이 이러한 요소를 선택할 수 있지만, 질문에 직접 대답하려면 실렉터에서 정규식 형식을 사용할 수 있습니다.

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

<div id="sections">
  <div id="s1">one</div>
  <div id="s2">two</div>
  <div id="s3">three</div>
  <div id="t1">four</div>
</div>

즉, 문자 '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는 의후인손계직▁s의 입니다.#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
{
   ...
}

주로사용다니를 사용합니다.*원하는 문자가 포함된 문자열을 모두 가져오고 싶을 때.

*정규식에서 사용되며 모든 문자를 바꿉니다.

또에 CSS 사되는것같다습니다와 같은 것입니다.[id*="s"]인 ."인 모든 DOM 요소를 가져옵니다.

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

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

언급URL : https://stackoverflow.com/questions/8903313/using-regular-expression-in-css