div+css 웹페이지 레이아웃 디자인의 새로운 시작 (3)-CSS 튜토리얼-php.cn

标题

집

웹 프론트엔드

CSS 튜토리얼

div+css 웹페이지 레이아웃 디자인의 새로운 시작 (3)

黄舟

Dec 29, 2016 pm 02:17 PM

다음은 조합 선택자를 소개합니다
조합 선택자는 동일한 속성이 함께 모이는 것을 의미합니다

예를 들어

<h1 id="标题">标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

로그인 후 복사

이런 텍스트를 원합니다 5가지 유형의 제목이 모두 빨간색으로 변하는데, 분명히 하나씩 정의하는 것은 너무 번거롭습니다
이렇게 할 수 있습니다



 

<h1 id="标题">标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

로그인 후 복사

물론 ID 선택자, 클래스 선택자, 및 라벨 선택기를 함께

,a,#b,div{
color:red
}

로그인 후 복사

쉼표로 구분해야 합니다.
쉼표로 구분하지 않으면 아래에서 설명할 상위-하위 선택자입니다

<div id="a">
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<div>

로그인 후 복사

div의 모든 hi 태그를 빨간색으로 표시하려면
태그 선택기를 사용하는 방법이 있지만 페이지의 모든 H1 태그를 만듭니다. 그렇지 않다면
클래스 태그를 사용할 수도 있습니다. 하지만 h1 태그마다 클래스를 지정하는 것은 번거롭습니다

이렇게 하면 됩니다



 

<div id="a">
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<div>

로그인 후 복사

괜찮습니다

그렇다면

<div id="a">
<a><h1 id="标题">标题</h1></a>
<a><h1 id="标题">标题</h1></a>
<div>

로그인 후 복사

괜찮습니다



 

<div id="a">
<a><h1 id="标题">标题</h1></a>
<a><h1 id="标题">标题</h1></a>
<div>

로그인 후 복사

사실 매우 간단합니다. 상위 선택으로 모든 라벨이나 클래스를 제어할 수 있습니다. 또는 그 아래에 ID 선택자, 즉 손자 또는 증손자
이것도 가능합니다



 

<div id="a">
<a><h1 id="标题">标题</h1></a>
<a><h1 id="标题">标题</h1></a>
<div>

로그인 후 복사

그런데 하지 않는 것이 좋습니다. 레벨이 명확하지 않으면 헷갈리기 쉽기 때문에

자주 사용하지 않는 또 다른 속성 선택자

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]{
color:red;
}
</style> <head>
<body>
<div id="a">
<a title="a"><h1 id="标题">标题</h1></a>
<a title="b"><h1 id="标题">标题</h1></a>
<div>
</body>
</html>

로그인 후 복사

꼭 배워야 한다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

로그인 후 복사

문서 설명은 유용합니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 


标题
标题

로그인 후 복사

속성 선택기는 클래스나 ID가 없는 양식에 특히 유용합니다. 스타일 설정 시:

input[type="text"]
{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 
input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

로그인 후 복사

그러나 일반적으로 사용되지는 않습니다. 필요한 교육을 받지 않고도 콘텐츠를 마스터할 수 있습니다

다음은 인접 선택자에 대한 소개입니다
이해하기 어려울 수 있습니다

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;} </style> <head>
<body>
<h1 id="标题">标题</h1>
<p>我离上面标题50px</p>
<p>不变</p>
<p>不变</p>
</body>
</html>

로그인 후 복사

이것은 실제로 첫 번째 p의 스타일입니다. Margin-top:50px는 외부 여백이 50px임을 의미합니다.

에도 하위 요소가 있습니다.

먼저 다음

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

로그인 후 복사

을 살펴보겠습니다. 이는 매우 친숙한 부모-자식 선택자입니다. . 아버지는 아래 자식 요소 중 하나를 제어할 수 있으므로 둘 다 빨간색으로 변합니다.
a가 p의 자식 요소가 되고 다른 a가 스팬의 자식 요소가 되기를 원한다면 이렇게 해야 합니다.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p>a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

로그인 후 복사

이 두 선택자는 을 추가해야 합니다(물론 유일한 것은 아닙니다). 그렇지 않으면 유효하지 않습니다

이 두 선택자는 매우 유연하므로 초보자의 경우 다른 선택자를 위한 탄탄한 기반을 마련하는 것이 좋습니다.

🎜>

div+css 웹페이지 레이아웃 디자인의 새로운 시작 (3)