CSS 선택자란 무엇입니까? CSS 선택자는 무엇입니까?-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-10-20 16:48:55

원래의

4189명이 탐색했습니다.

이 글에서는 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

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS 常用选择器</title>
<link rel="stylesheet" type="text/css" href="0923.css">
</head>
<body>

<!--
id 选择器
-通过id属性值选中唯一的元素
- #id属性名{}


class 类选择器
-通过类选择器，选中一组
-.class属性名{}

-->
<h1>HTML选择器</h1>
<p id="p1">css test</p>
<p class="p2">css test</p>
<p class="p2">css test</p>
<p class="p2">css test</p>

</body>
</html>

로그인 후 복사

0923.css

h1{
    color: yellow;
}

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

로그인 후 복사

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

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