코딩하다 현타올 때

질문 : CSS 클래스 이름 / 선택기에서 유효한 문자는 무엇입니까? CSS 클래스 선택기 내에서 허용되는 문자 / 기호는 무엇입니까? 다음 문자가 유효하지 않다는 것을 알고 있지만 어떤 문자가 유효 합니까? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` # 답변 CSS 문법 에서 직접 확인할 수 있습니다. 기본적으로 1 , 이름은 밑줄 ( _ ), 하이픈 ( - ) 또는 문자 ( a – z )로 시작하고 그 뒤에 하이픈, 밑줄, 문자 또는 숫자가 따라 와야합니다. 캐치가있다 : 첫 번째 문자는 하이픈 인 경우, 두 번째 문자 2는 문자 나 밑줄이어야하며, 이름이 긴 최소 2 자 이상이어야합니다. -?[_a-zA-Z]+[_a-zA-Z0-9-]* 간..

질문 : 특정 텍스트를 포함하는 요소에 대한 CSS 선택기가 있습니까? 다음 표에 대한 CSS 선택기를 찾고 있습니다. Peter | male | 34 Susanne | female | 12 "male"이 포함 된 모든 구축 전차와 일치하는 선택기가 있습니까? 답변 사양을 올바르게 읽으면 아니요. 요소, 요소의 속성 이름 및 요소의 명명 된 속성 값을 일치시킬 수 있습니다. 그래도 요소 내에서 일치하는 콘텐츠에 대해서는 아무것도 볼 수 없습니다. 출처 : https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text

질문 : 클래스가있는 첫 번째 요소에 대한 CSS 선택기 클래스 이름이 red 인 여러 요소가 있지만 다음 CSS 규칙을 사용하여 class="red" 첫 번째 요소를 선택할 수없는 것 같습니다. .home .red:first-child { border: 1px solid red; } blah first second third fourth red 클래스를 가진 첫 번째 어린이를 대상으로하려면 어떻게 수정합니까? 답변 :first-child 작동 방식을 오해하는 가장 잘 알려진 사례 중 하나입니다. CSS2에 도입 된 :first-child 가상 클래스는 부모의 첫 번째 자식을 나타냅니다. 그게 다야. 나머지 복합 선택기에서 지정한 조건과 가장 먼저 일치하는 자식 요소를 선택한다는 매우 일반적인 오해가 있..

질문 : 두 개의 클래스가있는 요소에 적용되는 CSS 선택기 두 개의 특정 클래스로 설정되는 클래스 속성의 값을 기반으로 CSS로 요소를 선택하는 방법이 있습니까? 예를 들어 3 개의 div가 있다고 가정 해 보겠습니다. Hello Foo Hello World Hello Bar foo 및 bar 클래스의 구성원이라는 사실을 기반으로 목록의 두 번째 요소 만 선택하려면 어떤 CSS를 작성할 수 있습니까? 답변 두 클래스 선택기를 연결합니다 (사이에 공백 없음). .foo.bar { /* Styles for element(s) with foo AND bar classes */ } IE6와 같은 고대 브라우저를 여전히 다루어야한다면, 연결된 클래스 선택기를 올바르게 읽지 않는다는 점에 유의하십시오. 나열한 다..

질문 : CSS에서 속성으로 요소 선택 data-role )으로 CSS의 요소를 선택할 수 있습니까? 답변 속성 선택기를 사용하는 것을 의미하는 경우 다음과 같은 이유가 있습니다. [data-role="page"] { /* Styles */ } 내가 링크하는 문서에서 모두 다루는 다양한 시나리오에 사용할 수있는 다양한 속성 선택기가 있습니다. 맞춤 데이터 속성이 '새로운 HTML5 기능'임에도 불구하고 브라우저는 일반적으로 비표준 속성을 지원하는 데 문제가 없으므로 속성 선택기로 필터링 할 수 있어야합니다. 과 CSS 유효성 검사에 대해서도 걱정할 필요가 없습니다. CSS는 선택기 구문을 깨지 않는 한 네임 스페이스가 지정되지 않은 속성 이름에 대해 신경 쓰지 않기 때문입니다. 출처 : https://s..

질문 : 클래스 용 CSS의 와일드 카드 * .tocolor 스타일링하는 div가 있지만 고유 식별자 1,2,3,4 등도 필요하므로 tocolor-1 다른 클래스로 추가합니다. tocolor 1 tocolor 2 tocolor 3 tocolor 4 .tocolor{ background: red; } tocolor-* 만 갖는 방법이 있습니까? 이 CSS에서와 같이 와일드 카드 * .tocolor-*{ background: red; } 답변 필요한 것은 속성 선택기입니다. html 구조를 사용하는 예는 다음과 같습니다. div[class^="tocolor-"], div[class*=" tocolor-"] { color:red } div 대신 요소를 추가하거나 모두 제거 class 대신 지정된 요소의 속성을..

질문 : ">"(보다 큼 기호) CSS 선택기는 무엇을 의미합니까? 예를 들면 : div > p.some_class { /* Some declarations */ } > 기호는 정확히 무엇을 의미합니까? 답변 > 는 자식 결합 자 이며, 때때로 직계 후손 결합 자라고 잘못 불립니다. 1 즉, 선택기 div > p.some_class 는 div 내부에 직접 중첩 된 .some_class 단락 만 일치 하고 더 내부에 중첩 된 단락은 일치하지 않습니다. div > p.some_class 와 일치하는 모든 요소가 div p.some_class 와 하위 결합 자 (공백)와 일치하므로 두 가지가 종종 혼동되는 것을 의미합니다. 하위 결합 자와 하위 결합자를 비교하는 그림 : div > p.some_class { ..

질문 : CSS '>'선택기; 뭐야? CSS 코드에서 사용 된 "보다 큼"( > )을 몇 번 보았지만 그 기능을 이해할 수 없습니다. 그것은 무엇을합니까? 답변 예를 들어 다음과 같이 중첩 된 div가있는 경우 : ... ... 스타일 시트에서 다음과 같이 CSS 규칙을 선언합니다. .outer > div { ... } 규칙은 "중간"클래스가있는 div에만 적용됩니다. 이러한 div는 클래스가 "outer"인 요소의 직계 하위 항목 (직계 하위)이기 때문입니다 (물론 이러한 규칙을 재정의하는 다른보다 구체적인 규칙을 선언하지 않는 한). . 바이올린을 참조하십시오. div { border: 1px solid black; padding: 10px; } .outer > div { border: 1px sol..

질문 : CSS 부모 선택기가 있습니까? 앵커 요소의 직접 부모 인 요소를 어떻게 선택합니까? 예를 들어 내 CSS는 다음과 같습니다. li < a.active { property: value; } 분명히 JavaScript로이 작업을 수행하는 방법이 있지만 CSS 레벨 2에 기본적으로 존재하는 일종의 해결 방법이 있기를 바랍니다. 내가 스타일링하려는 메뉴가 CMS에 의해 분출되고 있으므로 활성 요소를 요소로 이동할 수 없습니다 ... (내가 원하지 않는 메뉴 생성 모듈을 테마로하지 않는 한) . 어떤 아이디어? 답변 현재 CSS에서 요소의 부모를 선택할 수있는 방법이 없습니다. 방법이 있다면 현재 CSS 선택기 사양 중 하나에있을 것입니다. 선택기 레벨 3 사양 CSS 2.1 선택기 사양 즉, Sele..