초심자를 위한 CSS 선택기 집중 과정

CSS 선택기는 CSS 규칙의 첫 번째입니다. 규칙 내부의 CSS 속성 값을 적용하려면 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다.

또는 "CSS 선택기는 스타일을 지정하려는 HTML 요소를 "찾거나"선택하는 데 사용됩니다.

범용 선택기: DOM의 모든 요소를 ​​선택하고 여백과 패딩을 0px로 만듭니다.

* {
    margin: 0; 
    padding: 0;
}

유형 선택기: 주어진 노드 이름을 가진 모든 요소를 ​​선택합니다. 구문 -> elementName .

a {
    text-decoration: none;
}

위에서 "a"태그를 일치시키고 밑줄이나 텍스트 장식을 제거하십시오.

클래스 선택기: 주어진 클래스 속성을 가진 모든 요소를 ​​선택합니다. 구문 -> .className .

.intro {
    color: blue;
}

위에서 .intro는 "intro"클래스가 있는 모든 요소와 일치하고 텍스트 색상을 파란색으로 변경합니다.

ID 선택기: id 속성의 값을 기반으로 요소를 선택합니다. 문서에는 주어진 ID를 가진 요소가 하나만 있어야 합니다. 구문 -> #IdName .

#firstName {
    color: red;
    font-size: 20px;
}

위에서 #firstName는 ID가 "firstName"인 요소와 일치하고 이러한 스타일을 적용합니다.

속성 선택기: 주어진 속성을 가진 모든 요소를 ​​선택합니다. 구문: [attr][attr=value]

[title] {
    font-weight: bold;
}

[attr=value] : 이것은 값이 정확히 value인 attr의 attribute-name을 가진 요소를 나타냅니다.

[attr~=value] : 값이 공백으로 구분된 단어 목록이고 그 중 하나가 정확한 값인 속성 이름이 attr인 요소를 나타냅니다.

[attr^=value] : 속성 이름이 attr인 요소를 나타냅니다. 그 값은 값이 접두사(앞)입니다.

[attr$=value] : 속성 이름이 attr인 요소를 나타냅니다. 이 요소는 값에 접미사(뒤에)가 붙습니다.

[attr*=value] : 속성 이름이 attr인 요소를 나타냅니다. 이 요소에는 문자열 내에서 값이 한 번 이상 포함된 값이 있습니다.

선택기 목록: ,는 그룹화 방법으로 일치하는 모든 노드를 선택합니다.

p, .start {
    font-weight: bold;
}

위의 p.intro는 <p> 및 <div class="start"> 요소와 모두 일치합니다.

자식 조합자 : > 조합자는 첫 번째 요소의 직계 자식인 노드를 선택합니다.

.intro > img {
    width: 50%;
}

위에서 <img> 요소 내부에 직접 중첩된 모든 <div class="intro"> 요소와 일치합니다.

일반 형제 결합자: ~ 결합자는 형제를 선택합니다. 이것은 두 번째 요소가 첫 번째 요소를 따르고(꼭 즉시는 아니지만) 둘 다 동일한 부모를 공유한다는 것을 의미합니다.

예: p~span 는 <span> 다음에 오는 모든 <p> 요소와 즉시 일치하거나 일치하지 않습니다.

인접 형제 결합자: + 결합자는 인접 형제를 선택합니다. 이는 두 번째 요소가 첫 번째 요소 바로 다음에 오고 둘 다 동일한 부모를 공유함을 의미합니다.

예: h2 + p는 <p> 바로 다음에 오는 모든 <h2> 요소와 일치합니다.

하위 조합자: (space) combinator selects nodes that descendant of the first element.

Example : div span는 <span> 요소 내부에 있는 모든 <div> 요소와 일치합니다.


이 게시물을 즐겼기를 바랍니다 😀

here에서 저를 지원하실 수 있습니다

Reference

이 문제에 관하여(초심자를 위한 CSS 선택기 집중 과정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/turneremma21/css-selectors-crash-course-for-beginners-19b

---

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)