CSS 선택기란 무엇입니까? 기본 CSS 선택기 요약(9가지 유형)-CSS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-07-27 16:02:24

원래의

4736명이 탐색했습니다.

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{} 형식으로 작성할 수 있습니다. 단, 조상 요소 선택이 하위 요소 앞과 중간에 공백으로 구분되어 있어야 합니다. 예: