«css-selectors» 태그된 질문

선택기는 문서 트리의 요소와 일치하는 패턴입니다. CSS 규칙에서는 패턴과 일치하는 요소의 스타일을 정의하는 데 사용됩니다.

7
: nth-child () 또는 : nth-of-type ()을 임의의 선택기와 결합 할 수 있습니까?
임의의 선택자와 일치하는 (또는 일치하지 않는) 모든 n 번째 자식을 선택하는 방법이 있습니까? 예를 들어, 모든 홀수 테이블 행을 선택하려고하지만 행의 하위 집합 내에서 다음을 수행합니다. table.myClass tr.row:nth-child(odd) { ... } <table class="myClass"> <tr> <td>Row <tr class="row"> <!-- I want this --> <td>Row <tr class="row"> <td>Row <tr class="row"> <!-- And …
116 css  css-selectors 

3
동일한 요소에 대해 여러 개의 : before 의사 요소를 가질 수 있습니까?
:before동일한 요소에 대해 여러 의사 를 가질 수 있습니까? .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } jQuery를 사용하여 위의 스타일을 동일한 요소에 적용하려고하는데 가장 최근의 스타일 만 적용되고 둘 다 적용되지는 않습니다.


4
CSS에서 마우스 다운 선택기는 무엇입니까?
버튼 및 기타 요소에는 기본 스타일이 있으며 일반보기, 호버 / 포커스보기 및 마우스 다운 / 클릭보기의 3 단계로 작동하는 것으로 나타났습니다. CSS에서 일반보기 및 호버보기의 스타일을 다음과 같이 변경할 수 있습니다. button{ background:#333; color:#FFF; } button:hover{ background:#000; color:#EEE; } 하지만 mousedown을 어떻게 선택할 수 있습니까? 나는 다음과 같은 것을 원한다. …
114 html  css  css-selectors 

5
다른 요소 다음에 처음 발생하는 요소 선택
페이지에 다음 HTML 코드가 있습니다. <h4>Some text</h4> <p> Some more text! </p> 내 요소 .css에 스타일을 지정하는 다음 선택기가 있습니다 h4. 위의 HTML 코드는 전체 코드의 일부일뿐입니다. div섀도우 박스에 속하는 몇 가지 가 더 둘러싸여 있습니다. #sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4 { color : #614E43; margin-top : 5px; margin-left : …
113 html  css  css-selectors 

8
CSS "and"및 "or"
일부 입력 유형을 스타일링하여 분석해야하기 때문에 상당히 큰 문제가 있습니다. 나는 다음과 같은 것을 가지고 있었다. .registration_form_right input:not([type="radio") { //Nah. } 하지만 체크 박스에 스타일을 지정하고 싶지도 않습니다. 난 노력 했어: .registration_form_right input:not([type="radio" && type="checkbox"]) .registration_form_right input:not([type="radio" && "checkbox"]) .registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"]) 사용하는 방법 &&? 그리고 ||조만간 사용해야하는데 …

5
LESS의 직계 자식 선택기
어쨌든 출력에 직계 자식 선택기 (>)를 ​​덜 적용하게 할 수 있습니까? 내 style.less에서 다음과 같이 작성하고 싶습니다. .panel { ... > .control { ... } } 다음과 같은 것을 적게 생성하십시오. .panel > .control { ... }
112 css  css-selectors  less 


5
타겟팅 위치 : 현재 '고정'상태에있는 고정 요소
position : sticky 는 이제 일부 모바일 브라우저에서 작동하므로 페이지와 함께 메뉴 막대를 스크롤 할 수 있지만 사용자가 스크롤 할 때마다 뷰포트 상단에 고정 할 수 있습니다. 하지만 현재 '고정'상태 일 때마다 고정 메뉴 막대의 스타일을 약간 변경하려면 어떻게해야합니까? 예를 들어, 페이지와 함께 스크롤 할 때마다 막대가 둥근 모서리를 갖기를 …

6
의사 요소에 대해 단일 또는 이중 콜론 표기법을 사용해야합니까?
IE7 및 IE8은 의사 요소 (예 : ::after또는 ::first-letter)에 대해 이중 콜론 표기법을 지원하지 않으며 최신 브라우저 :after는 이전 버전과의 호환성을 위해 단일 콜론 표기법 (예 :)을 지원하므로 단일 콜론 표기법 만 사용해야하며 IE8의 시장 점유율이 무시할 수있는 수준으로 떨어집니다. 돌아가서 내 코드 기반에서 찾거나 교체합니까? 또는 다음을 모두 포함해야합니다. …

4
CSS3 : 검사되지 않은 의사 클래스
공식 CSS3 :checked의사 클래스 가 있다는 것을 알고 있지만 :unchecked의사 클래스가 있으며 동일한 브라우저 지원이 있습니까? Sitepoint의 참조 에는 하나가 언급되어 있지 않지만이 whatwg 사양 (그것이 무엇이든)이 수행합니다. :checked와 :not()의사 클래스가 결합 될 때 동일한 결과를 얻을 수 있다는 것을 알고 있지만 여전히 궁금합니다. input[type="checkbox"]:not(:checked) { /* styles */ } …

11
마지막 자식 선택기 사용
내 목표는 마지막에 CSS를 적용하는 li것이지만 그렇지 않습니다. #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; } <div id="refundReasonMenu"> <ul id="nav"> <li><a id="abc" href="#">abcde</a></li> <li><a id="def" href="#">xyz</a></li> </ul> </div> 코드 조각 실행결과 숨기기스 니펫 확장 마지막 자녀 만 선택하려면 어떻게 해야합니까?
106 css  css-selectors 

2
요소의 모든 자식에 스타일을 적용하려면 어떻게합니까
나는 class='myTestClass'. 이 요소의 모든 자식에 CSS 스타일을 어떻게 적용합니까? 요소 자식에만 스타일을 적용하고 싶습니다. 손녀가 아닙니다. 나는 사용할 수있다 .myTestClass > div { margin: 0 20px; } 모든 div어린이에게 효과가 있지만 모든 어린이에게 효과가있는 솔루션을 원합니다. 사용할 수 있다고 생각 *했지만 .myTestClass > * { margin: 0 20px; } …
106 css  css-selectors 

4
<입력 유형 =“?”에 대한 CSS 선택기
유형에 따라 모든 입력을 대상으로하는 CSS를 사용할 수있는 방법이 있습니까? 다양한 비활성화 된 양식 요소에 사용하는 비활성화 된 클래스가 있으며 텍스트 상자의 배경색을 설정하고 있지만 확인란이 해당 색상을 얻지 않도록합니다. 별도의 클래스로 이것을 할 수 있다는 것을 알고 있지만 가능하면 CSS를 사용하고 싶습니다. 나는 이것을 자바 스크립트로 설정할 수 있지만 …

2
첫 번째 자식과 마지막 자식 이외의 CSS 선택기
저는 매우 진보 된 웹 사이트를 만들고 있습니다. 내 질문 : 그것은을 제외한 모든 다른 아이들을 선택하는 것이 가능 :first-child하고 :last-child? :not()선택기 가 있다는 것을 알고 있지만 괄호 안에 있지 않은 두 개 이상에서는 작동하지 않습니다. 이것이 내가 가진 것입니다. #navigation ul li:not(:first-child, :last-child) { background: url(images/UISegmentBarButtonmiddle@2x.png); background-size: contain; }
105 html  css  css-selectors 

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.