집 > 기사 > 웹 프론트엔드 > CSS 선택기란 무엇입니까? 기본 CSS 선택기 요약(9가지 유형)

CSS 선택기란 무엇입니까? 기본 CSS 선택기 요약(9가지 유형)

不言원래의: 2018-07-27 16:02:244719검색

CSS 선택기란 무엇인가요? CSS 선택기는 CSS가 작동해야 하는 태그를 지정하며 해당 태그의 이름은 선택기입니다. 의미: 어떤 컨테이너를 선택할지. HTML 페이지의 요소는 CSS 선택기를 통해 제어됩니다. 그렇다면 CSS 선택자는 무엇입니까? CSS에서 일반적으로 사용되는 선택기를 살펴보겠습니다.

1: CSS 와일드카드 선택기

와일드카드 선택기는 별표(*)로 표시됩니다. 예:

*{
    font-size : 12px;
}

는 모든 요소의 글꼴 크기가 12px임을 의미합니다. ;

2: CSS 그룹 선택기

여러 요소가 동일한 스타일 속성을 갖는 경우 명령문을 함께 호출할 수 있으며 요소는 쉼표로 구분됩니다. 예:

p, li {

line-height:20px;

color:#c00;

}

#main p, #sider span {

color:#000;

line-height:26px;

}

그룹 선택기를 사용하면 CSS 코드가 크게 단순화됩니다. 동일한 속성이 여러 개 있는 요소를 병합하고 그룹화하여 선택할 수 있으며, 동일한 CSS 속성을 정의할 수 있어 코딩 효율성이 크게 향상되고 시간도 단축됩니다. 필수입니다. CSS 파일의 크기입니다.

3: CSS 태그 선택기

완전한 HTML 페이지는 다양한 태그로 구성되며 태그 선택기는 해당 CSS 스타일을 사용하는 태그를 결정합니다. 예:

p{ 
    color: red; 
}

이 코드는 모든 p 태그를 빨간색으로 만듭니다.

4: CSS 클래스 선택기

클래스 선택기는 클래스 속성에 지정된 클래스 이름이 있는 모든 요소를 대상으로 합니다. 예를 들어

.info { 
    color:black; 
}

색상이 변경됩니다. 클래스 이름이 info인 모든 요소는 black

5:css ID 선택기

ID 선택기는 특정 ID ID로 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다. 선택기는 "#" 기호로 시작합니다. 예:

#demop{

    color:#000;

}

이것은 글꼴 색상을 검은색으로 설정하는 데모 ID를 가진 요소를 나타냅니다.

6: CSS 의사 클래스 선택기

마우스 호버 등 문서 이외의 다른 조건을 사용하여 요소의 스타일을 적용해야 하는 경우가 있습니다. 이때 의사 클래스를 사용해야 합니다. 다음은 연결된 애플리케이션에 대한 의사 클래스 정의입니다. 예:

a:link{
    color:green ;
    font-size: 50px
}

a:hover{
    color:pink;
    font-size: 50px
}

a:active{
    color:yellow;
    font-size: 50px
}

a:visited{
    color:red;
    font-size: 50px
}

효과:
웹페이지를 열면 라벨이 녹색입니다.
라벨에 마우스를 올리면 라벨이 분홍색입니다.
클릭하면 라벨이 노란색이 됩니다.
클릭하면 라벨이 빨간색이 됩니다.

7: CSS 자손 선택기

자손 선택기는 특정 요소나 요소 그룹의 자손을 선택하는 데 사용됩니다. 상위 요소 선택은 앞에 배치되고 하위 요소 선택은 뒤에 배치되어 구분됩니다. 중간에 공백으로. 하위 항목 선택기에는 두 개 이상의 요소가 있을 수 있습니다. 다중 레벨 조상-하위 관계의 경우 이를 구분하기 위해 공백이 여러 개 있을 수 있습니다. 예를 들어 ID가 a, b, c인 세 개의 요소가 있는 경우 하위 항목입니다. 선택기는 #a #b #c{} 형식으로 작성할 수 있습니다. 단, 조상 요소 선택이 하위 요소 앞과 중간에 공백으로 구분되어 있어야 합니다. 예:

#people em{ 
    color: red; 
}

이 규칙은 ID 값이 "people"인 요소에 포함된 모든 em 요소의 색상을 빨간색으로 설정합니다.

8 info 클래스에 속하는 다른 단락은 무시됩니다.

9: CSS 속성 선택기

형식: 기본 선택기 [속성 = '속성 값']{ }, 속성만 작성할 수도 있습니다. 예:

p.info { 
    color:blue; 
}

실행 결과:

css 선택기 우선 순위 size:

!중요 > 인라인 스타일 > ID 선택자 > 속성 선택자 > 태그 > 상속 > 브라우저 기본 속성 그런 다음 가중치를 사용하여 CSS 선택기란 무엇입니까? 기본 CSS 선택기 요약(9가지 유형)

css 선택기 가중치 계산:

!important 1000

ID Selector100클래스|속성|의사 클래스 선택기 10태그 선택기1

각 행의 모든 선택기를 이 값으로 변환하고 합산하세요. 결과가 클수록 우선순위가 높아집니다!

CSS 선택기란 무엇입니까? 기본 CSS 선택기 요약(9가지 유형)

관련 기사