CSS 하위 선택기의 기본 사용 예에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS 하위 선택기의 기본 사용 예에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-07 14:43:39

원래의

2082명이 탐색했습니다.

기본

strong 태그는 p 태그의 자손에 속하고, i 태그는 하위 선택자를 작성하는 가장 간단한 방법을 살펴보겠습니다. 강력한 태그의 하위 항목:
HTML 코드:

<p>
    my name is <strong>li<i>daze</i></strong>, hahah.   
</p>

로그인 후 복사

CSS 코드:

p strong {   
    font-size: 30px;   
}   
p i {   
    font-size: 40px;   
}

로그인 후 복사

1. 규칙 왼쪽에 있는 선택기에는 공백으로 구분된 두 개 이상의 선택기가 포함되어 있습니다.
2. 선택자 사이의 공백은 결합 기호입니다.
3. 하위 요소 선택자, 하위 요소의 계층적 간격은 무한할 수 있습니다. 하위 요소 선택자와의 차이점에 유의하세요.

예1

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}     
</style>
</head>

<body>
<ul>
  <li>List item 1     
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3     
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

로그인 후 복사

실행 효과:
CSS 하위 선택기의 기본 사용 예에 대한 자세한 설명

예2

<html>
<head>
<style type="text/css">
p.sidebar {width:100px;height:100px;background:blue;}     
p.maincontent {width:100px;height:100px;background:yellow;}     

p.sidebar a:link {color:white;}     
p.maincontent a:link {color:red;}     
</style>
</head>
<body>
<p class=&#39;sidebar&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>

<p class=&#39;maincontent&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>
</body>
</html>

로그인 후 복사

실행 효과
CSS 하위 선택기의 기본 사용 예에 대한 자세한 설명