집 > 기사 > 웹 프론트엔드 > CSS 하위 선택기의 기본 사용 예에 대한 자세한 설명

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

高洛峰원래의: 2017-03-07 14:43:391949검색

기본

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 하위 선택기의 기본 사용 예에 대한 자세한 설명

약간의 설명:

XML / HTML 코드클립보드에 콘텐츠 복사

a:link {color: #FF0000} /* 방문하지 않은 링크 * /
a:visited {color: #00FF00} /* 방문한 링크 */
a:hover {color: #FF00FF } | 링크를 통해 >
CSS 하위 항목 선택기의 기본 사용법에 대한 자세한 예를 보려면 주의하세요. 관련 기사를 보려면 PHP 중국어 웹사이트를 방문하세요!

성명：

이전 기사：CSS 하위 요소 선택기 사용법에 대한 자세한 소개다음 기사：CSS 하위 요소 선택기 사용법에 대한 자세한 소개

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

관련 기사

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