최종 CSS 과정 마스터 과정!

CSS 선택기는 주로 세 가지 유형으로 구성되어 있습니다.
맞습니까?
이 문서에서 우리는 매우 간단한 방식으로 CSS Pusedo 클래스를 탐색할 것이다.
이 게시물들은 타자하는 데 많은 시간을 들여야 하니 구독을 고려하거나 다른 사람과 공유하세요!

CSS의 공통wherep 대상<p> HTML 요소

클래스, CSS의 .intro는 class="intro" 속성

이 있는 HTML 요소를 대상으로 합니다.

ID, CSS의 #logo는 id="logo" 속성

이 있는 HTML 요소를 대상으로 합니다.
모든 이 선택기는 위류를 추가할 수 있다.위조 클래스:

정의 요소

의 특정 상태

는 콜론:으로 시작하는 키워드입니다.

구문
위류는 독립적으로 존재할 수 없다.선택기에 연결해야 합니다.위조 클래스는 이 선택기의 특정 상태만 정의합니다.
구문은 다음과 같습니다.

.selector:pseudo-class{ }

선택기와 위조 클래스 사이에는 공백이 없습니다. 이것은 그들이 함께 연결되어 있음을 나타냅니다.

걸다
예를 들어 자주 사용되는 위조 클래스는 :hover인데 대상 요소가 정지되면 CSS 스타일이 적용됩니다.링크에서 테스트해 봅시다.

a{ color: blue;}
a:hover{ color: red;}

<div class="result" id="result-821">
  <p>Hover <a>this link</a> and see how it turns red.</p>
</div>

첫 번째 행은 HTML 요소 전체<a>의 모양새(파란색)를 정의합니다.
두 번째 줄은 <a> 멈출 때의 외관을 정의했다.
두 번째 줄의 목표는 같은 HTML 요소이지만 특정한 일이 발생할 때(이 예에서 정지 상태)만 대상이다.

구경
이 위조 클래스의 목표는 방문한 링크입니다.기본적으로 링크는 파란색이며, 방문하면 보라색으로 변합니다.구글의 검색 결과는 이렇다.

a{ color: dodgerblue;}
a:visited{ color: rebeccapurple;}

<a href="https://www.google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.mozilla.org">Mozilla</a>
<a href="https://marksheet.io/visited.html">MarkSheet</a>



<div class="result" id="result-8211">
  <a href="https://www.google.com">Google</a>
  <a href="https://twitter.com">Twitter</a>
  <a href="https://www.facebook.com">Facebook</a>
  <a href="https://www.mozilla.org">Mozilla</a>
  <a href="/html/visited.html">MarkSheet</a>
</div>

방문한 링크를 위해 다른 링크를 적용하는 것은 대개 무시되지만, 결과 목록을 탐색하는 사용자에게는 매우 편리하다.이것은 그들이 이미 가 본 곳을 상상하는 데 매우 쉽다.

포커스
HTML 요소가 초점에 있을 때 이 위조 클래스가 나타납니다.이것은 HTML 입력에 특히 유용합니다.

.form-input{ border: 2px solid grey; padding: 5px;}
.form-input:focus{ background: lightyellow; border-color: blue; outline: none;}

<div class="result" id="result-822">
  <input class="form-input" placeholder="First name">
</div>

outline: none; 규칙은 입력에서 휘광을 삭제합니다.

첫째 아이와 마지막 아이
이런 위류는 HTML hierarchy와 관련이 있다.코드에 나타나는 순서에 따라 HTML 요소를 대상으로 합니다.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

li:first-child{ background: greenyellow;}
li:last-child{ background: lightsalmon;}

<div class="result" id="result-823">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

보시다시피 첫 번째와 마지막 <li> 에 CSS 클래스가 적용되지 않습니다.CSS 규칙을 적용할지 여부는 계층 체계에서 결정됩니다.
다섯 번째 목록 항목을 추가하고 같은 CSS를 사용하는 경우 스타일은 자동으로 변경됩니다.

<div class="result" id="result-824">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>

아이
이 위류는 :first-child와 :last-child의 더 전체적인 버전이다.:nth-child를 사용하면 어떤 하위 요소를 대상으로 할지 계산할 수 있습니다.
예를 들어, 두 번째 아이를 대상으로 하려면 :nth-child(2):

li:nth-child(2){ background: violet;}

<div class="result" id="result-825">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

기우
숫자 사용은 간단하지만 :nth-child에는 두 가지 키워드가 있습니다.

:nth-child(odd) 홀수 요소당

:nth-child(even) 짝수 요소당

li:nth-child(odd){ background: gold;}

<div class="result" id="result-826">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

n 교체기:nth-child의 가장 강력한 점은 n 키워드를 사용하여 계산을 바탕으로 원소를 포지셔닝하는 것이다.n값이 00에서 존재하는 서브원소수로 증가한다.
세 개의 원소를 겨냥하고 싶다면?

li:nth-child(3n){ background: hotpink;}

<div class="result" id="result-827">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
</div>

우리의 예에서 n는 0에서 6까지 끝난다.
컴퓨터는 0에서 계수를 시작한다.우리의 목록에는 일곱 개의 원소가 있기 때문에 우리는 여섯 개의 원소로 올라갈 것이다. 왜냐하면 0-1-2-3-4-5-6는 일곱 개의 원소를 대표하기 때문이다.
너는 :nth-child(3n)를'위치마다 3으로 나눌 수 있는 원소를 겨냥하라'고 읽을 수 있다.우리의 예에서는 세 번째와 여섯 번째 목록 항목을 동시에 대상으로 한다.

3 times 0는 0

과 같다

3 times 1는 세 번째 원소

입니다.

3 times 2는 여섯 번째 원소

입니다.

n+1
첫 번째 종목을 겨냥하고 세 번째 종목을 겨냥하고 싶다면?

li:nth-child(3n+1){ background: limegreen;}

다음은 html 코드입니다.

<div class="result" id="result-828">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
</div>

The 3n+1 has two parts:

3n 3개 중 1개

+1 시작점을 1

로 오프셋

This is how the calculations were processed:

3 times 0 plus 11

3 times 1 plus 1네

3 times 2 plus 17

n 교체기의 용도는 매우 광범위하다.정확한 계산 방법을 찾기 어려우므로 테스트만 하면 정확한 선택을 찾을 수 있다.

기타 위조
dozens of pseudo-classes available가 있는데 그 중 일부는 매우 특정한 주에 쓰인다.가장 자주 사용하는 것은 우리가 이미 소개한 것이다.

<style type="text/css">
#result-821 a{ color: blue;}
#result-821 a:hover{ color: red;}
#result-8211 a{ color: dodgerblue;}
#result-8211 a:visited{ color: rebeccapurple;}
#result-822{ padding: 1rem;}
#result-822 input{ border: 2px solid lightgrey; padding: 5px;}
#result-822 input:focus{ background: lightyellow; border-color: blue; outline: none;}
#result-823 li:first-child{ background: greenyellow;}
#result-823 li:last-child{ background: lightsalmon;}
#result-824 li:first-child{ background: greenyellow;}
#result-824 li:last-child{ background: lightsalmon;}
#result-825 li:nth-child(2){ background: violet;}
#result-826 li:nth-child(odd){ background: gold;}
#result-827 li:nth-child(3n){ background: hotpink;}
#result-828 li:nth-child(3n+1){ background: limegreen;}
</style>

다음 읽기:

          10 MINUTES TO MASTER CSS , HTML , JAVSCRIPT!