>웹 프론트엔드 >CSS 튜토리얼 >CSS 선택자란 무엇입니까? CSS 선택자는 무엇입니까?

CSS 선택자란 무엇입니까? CSS 선택자는 무엇입니까?

青灯夜游
青灯夜游원래의
2018-10-20 16:48:554212검색

이 글에서는 CSS 선택자가 무엇인지 소개합니다. CSS 선택자는 무엇입니까? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

W3School 오프라인 매뉴얼(2017.03.11 버전) 다운로드: https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A

선택자는 수정하려는 요소를 의미합니다. CSS에서 일반적으로 사용되는 선택기에는 HTML 선택기, 클래스 선택기 및 ID 선택기 가 포함됩니다.

HTML 선택기

가장 일반적인 CSS 선택기는 요소 선택기입니다. 즉, 문서의 요소는 가장 기본적인 선택자입니다.

HTML 스타일을 지정하는 경우 선택기는 일반적으로 p, h1, em, a 또는 html 자체와 같은 HTML 요소가 됩니다.

예:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

는 특정 스타일을 한 요소에서 다른 요소로 전환할 수 있습니다.

위의 단락 텍스트(h1 요소 대신)를 회색으로 만들기로 결정했다고 가정해 보겠습니다. h1 선택기를 p로 변경하면 됩니다.

html {color:black;}h2 {color:silver;}

클래스 선택기

W3C 표준에서는 요소 선택기를 유형 선택기라고도 합니다.

"유형 선택기는 문서 언어 요소 유형의 이름과 일치합니다. 유형 선택기는 문서 트리에 있는 해당 요소 유형의 모든 인스턴스와 일치합니다."

형식은 다음과 같습니다.

selector.classname{
    property1:valu;
    property2:valu;
    ……
  }

예:

p.left {font-family: sans-serif;}

id selector

요소에 대해 별도의 스타일을 디자인해야 하는 경우 id 선택기를 사용하려면 먼저 스타일을 지정할 개체의 id 값을 정의해야 합니다. 고유하며 다른 요소의 id 값은 반복될 수 없습니다.

예:

<p id="top"></p>

상의 스타일 정의:

#top{
  property1:value;
  property2:value;
  ……
}

html

76c82f278ac045591c9159d381de2c57
3d5001d4a74c4b681850f519bcffe8a9
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7CSS 常用选择器6e916e0f7d1e588d4f442bf645aedb2f
269ba738a29aafb66c6db71e97931089
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

8fcb895fbf6702c912ece3f561682883
4a249f0d628e2318394fd9b75b4636b1HTML选择器473f0a7621bec819994bb5020d29372a
1543e05224819c12ab8136df28db3a2ecss test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3
25fdd61924ec43f68f6d130ac257deb1css test94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

0923.css

h1{
    color: yellow;
}

#p1{
    color: aqua;
    font-size: 20px;
}
.p2{
      color: red;
      font-size:40px;
}

요약: 위 내용은 이 글의 전체 내용입니다. 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 비디오 튜토리얼 , CSS3 비디오 튜토리얼 , bootstrap 비디오 튜토리얼 을 방문하세요!

위 내용은 CSS 선택자란 무엇입니까? CSS 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.