[css] 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 요소를 선택합니다.
여기에서 바이올린을 참조 하십시오 .
답변
이 답변의 보완으로 $최종 일치 *를 얻고 값 이름의 어느 곳에서나 일치를 얻는 데 사용할 수 있습니다 .
일치 어디서나 : .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 divdiv의 직계 자손 인 첫 번째 항목 과 일치합니다 #sections.
#main > div:first-childdiv특정 속성과 일치 합니다.
#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}(?=.*-))