단순화된 CSS 선택기

15300 단어 csswebdev
내가 CSS를 시작했을 때, 나는 항상 class와 Id 선택자를 사용했고 그 외에는 아무것도 사용하지 않았습니다.
시간이 지남에 따라 CSS에서 항목을 선택하는 다른 방법에 대해 배웠으며 작동 방식에 대한 그림과 함께 공유하겠습니다.

자, 시작하겠습니다.🎾

CSS 선택기란 무엇입니까?



CSS 선택기는 HTML에서 요소를 식별, 검색 또는 호출하여 스타일을 지정할 수 있는 수단입니다.
가장 일반적인 선택자는 name of element , class selectors(.) 및 id selectors (#) 이며 simple selectors 라고도 합니다.

<html>
  <head>
     <style>
        body{
        background-color:#000;
        }
        .title{
         color:dodgerblue;
         }
        #wrapper{
        display:flex;
        justify-content: center;
        margin:0;
        padding:0;
    </style>
  </head>
       <body>
       <div id="wrapper">
       <div class="title">
       <p> This is the first text. </p>
       <p class="second-paragraph"> This is the second text. </p>
       </div>
       <p>This is the third paragraph</p>
       </div>
       </body>
</html>


위의 예에서 body , title class 및 wrapper id는 이를 포함하는 div 요소를 참조하는 데 사용되었습니다.
다음과 같은 경우 이러한 선택자를 결합할 수도 있습니다.

p .second-paragraph{
color:red;
}


위의 코드에서 name 및 class 선택기를 사용하여 클래스p가 있는 second-paragraph 요소만 선택되도록 했습니다.

이 기사의 주요 초점인 다른 선택기도 있습니다.* , > , ~ , space , , 및 nth-of-type 선택자를 살펴보겠습니다.

* 선택자



이 선택기는 페이지의 모든 요소를 ​​선택하는 데 사용되기 때문에 범용 선택기라고 합니다. 이는 범용 선택기에 지정된 모든 스타일이 바로 그 페이지의 모든 요소에 영향을 미친다는 것을 의미합니다.
아래의 코드 스니펫은 페이지의 모든 요소에 회색 및 오른쪽 정렬 텍스트를 갖도록 스타일을 지정합니다.

*{
color:grey;
text-align:right;
}


> 선택기와 ~ 선택기



이 선택자는 결합자라고도 합니다. 둘 다 다른 선택 결과를 얻는 데 사용됩니다.>는 특정 요소의 자식을 선택하는 데 사용되지만 ~ 선택기는 특정 부모 요소의 모든 형제를 선택하는 데 사용됩니다.
설명할 예입니다.

div > p{
color:blue
}


위의 코드는 div 요소의 자식인 모든<p> 요소를 선택하는 데 사용됩니다.

자, 이것 좀 봐

div~p{
color:red;
}
Here, every `<p>` element which is a sibling to a `div` element is styled red. In our previous example (the first code snippet), the paragraph which is on the same level and shares the same direct parent with any `<div>` will take up the red color.


공간 선택기



많은 사람들이 > 선택자와 space 선택자를 혼동합니다.
나는 그것을 명확히하려고 노력할 것입니다.space 선택기는 다른 요소 안에 있는 모든 특정 요소를 선택하는 데 사용됩니다.
예를 들어

div p{
color:green;
}


위의 코드는 <p> 요소 안에 있는 모든 <div> 태그를 선택합니다. 그 사이에 다른 요소가 있어도 마찬가지입니다.
이제 이 선택기와 > 선택기의 차이점은 >는 직계 자손인 특정 요소를 선택하는 데만 사용된다는 것입니다.

그래서 우리가 가지고 있다면

div>p{
color:green;
}

<p>의 직계 자손인 <div> 요소만 녹색으로 표시됩니다.

, 선택기



그룹 선택기라고도 하는 이것은 코드의 반복을 피하기 위해 동일한 스타일로 클래스 또는 이름을 그룹화하는 데 사용됩니다.
아래 코드는

h3{
color:blue;
text-align:center;
font-weight:100;
}
p{
color:blue;
text-align:center;
font-weight:100;
}
.mid-text{
color:blue;
text-align:center;
font-weight:100;
}


다음과 같이 다시 쓸 수 있습니다

h3,p,.mid-text{
color:blue;
text-align:center;
font-weight:100;
}


n번째 유형 선택기



이 선택기는 특정 유형의 부모 요소의 자식nth을 선택하는 데 사용할 수 있습니다. n은 숫자 또는 키워드일 수 있습니다.
다음 코드를 고려하십시오.

<html>
       <head>
              <style>
                   div:nth-of-type(1){
                    color:red;
                    }
                    div:nth-of-type(2){
                    color:blue;
                    }
                    div:nth-of-type(3){
                    color:green;
                    }
              </style>
       </head>
       <body>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
       </body>
</html>


예, 언제든지 에서 저에게 연락해 주세요. 읽어주셔서 감사합니다.
Vue에서 모든 소품을 어린이에게 전달
힘내 후크 101

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage