简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

CSS 组合选择符

CSS 组合选择符

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

  • 后代选取器(以空格分隔)

  • 子元素选择器(以大于号分隔）

  • 相邻兄弟选择器（以加号分隔）

  • 普通兄弟选择器（以破折号分隔）

后代选取器

后代选取器匹配所有值得元素的后代元素。

以下实例选取所有p元素插入到div元素中:

    php中文网(php.cn)  

  
 
段落 1。 在 div 中。
 
段落 2。 在 div 中。
 
 
段落 3。不在 div 中。
 
段落 4。不在 div 中。

运行程序观察一下

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以下实例选择了

元素中所有直接子元素

：

    php中文网(php.cn)  

  
Welcome to My Homepage
 
 
My name is Donald
 
I live in Duckburg.
 
 
 
I will not be styled.
 
 
My best friend is Mickey.

运行程序观察一下

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于

元素后的第一个

元素:

    php中文网(php.cn)  

  
Welcome to My Homepage
 
 
My name is Donald
 
I live in Duckburg.
 
 
My best friend is Mickey.
 
I will not be styled.

运行程序观察一下

普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

以下实例选取了所有

元素的所有相邻兄弟元素

:

    php中文网(php.cn)  

  
 
段落 1。 在 div 中。
 
段落 2。 在 div 中。
 
 
段落 3。不在 div 中。
 
段落 4。不在 div 中。

运行程序观察一下



지속적인 학습
||
php中文网(php.cn)

段落 1。 在 div 中。

段落 2。 在 div 中。

段落 3。不在 div 中。

段落 4。不在 div 中。

제출하다 코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)490979회 재생
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！