程序员之家
程序员之家

CSS 组合选择符


CSS 组合选择符

组合选择符说明了两个选择器之间的关系。

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

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

  • 后代选择器(以空格     分隔)
  • 子元素选择器(以大于 > 号分隔)
  • 相邻兄弟选择器(以加号 + 分隔)
  • 普通兄弟选择器(以波浪号  分隔)

后代选择器

后代选择器用于选取某元素的后代元素。

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

div p
{
  background-color:yellow;
}

子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> :

div>p
{
  background-color:yellow;
}

相邻兄弟选择器

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

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

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{
  background-color:yellow;
}


后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> : 

div~p
{
  background-color:yellow;
}

手机扫码阅读本文


本文来自互联网,本网站转载的目的在于传递更多信息以供访问者学习参考,所属内容只代表原作者的个人观点,不代表本网站的立场和价值判断,版权归原作者所有。如有侵犯您的版权,请联系我们,我们收到后会尽快核实并第一时间改正。


手机扫码阅读本文

HTML5+CSS3+Javascript从入门到精通(标准版)【图】
HTML5+CSS3+Javascript从入门到精通(标准版)

10万读者检验,手机扫码看412节同步视频+661个案例分析+1000习题面试题+4396个案例+47部参考手册+1636个模版+17类素材库

Bootstrap入门经典【图】
Bootstrap入门经典

热门Web开发 Javascript框架 HTML CSS网站建设 网页设计制作 零基础读者杰出Bootstrap教程 全面涵盖常见组件的使用方法 书中代码真实有效可运行

Spring Boot+MVC+Vue3 项目全流程开发指南:从需求分析到上线部署【图】
Spring Boot+MVC+Vue3 项目全流程开发指南:从需求分析到上线部署

一站式掌握SpringBoot、MVC、Vue3全流程开发。本书通过全面覆盖从需求分析到上线部署的各个环节,提供了一套完整、实用的软件项目开发方法。它不仅适合有一定编程基础的开发者深入学习,也适合技术管理者和架构师提升项目管理和架构设计的能力。

css css-combine