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;
}

尝试一下 »

CSS 组合选择符的更多相关文章

  1. CSS:CSS 组合选择符

    ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...

  2. CSS组合选择符

    组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...

  3. 【代码笔记】Web-CSS-CSS组合选择符

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. java:CSS(定位,组合选择符,边距,Float,Table的样式,显示和隐藏,换行,盒子模型,iframe和frameset框架)

    1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  5. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  6. css关系选择符

    <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 1+x证书学习日志——css 基本选择符

    ##css选择符                 1:类型选择符 直接用标签名称当作选择符                     特点:选中所有同类元素                 2:id名称 ...

  8. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  9. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

随机推荐

  1. HDU-- Buy Tickets

    告知每次要插到第 i 个位置上,问最后它们的顺序是什么. 这一题,不是考线段树,是考如何想出用线段树...思维很巧妙,倒过来做的话就能确定此人所在的位置....   Buy Tickets Time ...

  2. 《C语言程序设计现代方法》第4章 编程题

    1 编写一个程序,要求用户输入一个两位数,然后按数位的逆序打印出这个数. 方法一:没技术含量的 #include <stdio.h> int main() { int high, low; ...

  3. atomic_t原子操作

    所谓原子操作,就是该操作绝不会在执行完毕前被任何其他任务或事件打断,也就说,它的最小的执行单位,不可能有比它更小的执行单位,因此这里的原子实际是使用了物理学里的物质微粒的概念. 原子操作需要硬件的支持 ...

  4. Web 应用性能和压力测试工具 Gor - 运维生存时间

    Web 应用性能和压力测试工具 Gor - 运维生存时间 undefined 无需花生壳,dnspod实现ddns - 推酷 undefined

  5. 【转】【opencv】仿射变换

    仿射变换 目标 在这个教程中你将学习到如何: 使用OpenCV函数 warpAffine 来实现一些简单的重映射. 使用OpenCV函数 getRotationMatrix2D 来获得一个  旋转矩阵 ...

  6. typeahead使用配置参数。

    示例代码: var suggestion_source = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace( ...

  7. struts2环境搭建和第一个程序

    环境搭建 项目目录 导入依赖jar包,如上图lib目录所示. 不同的版本可能会不一样,没关系在tomcat启动时,如果报错java.lang.ClassNotFoundException,我们可以按照 ...

  8. SAP ABAP 日期相关函数

    获的两个日期之间的分钟数 data min TYPE i. CALL FUNCTION 'DELTA_TIME_DAY_HOUR' EXPORTING T1 = ' T2 = ' D1 = ' D2 ...

  9. Cocos2d 3.0继承自Sprite的类在addChild后出现故障

    当继承自Sprite的类被addChild到其它的Node里后出现例如以下图问题,说明没有调用父类Sprite::init()的方法.由于父类Sprite里的_textureAtlas须要初始化为nu ...

  10. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...