一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS 组合选择符</title>

    <style>

    /*后代选择器*/

    div p {

        background-color: yellow;

    }

    /*子元素选择器*/

    div>p {

        background-color: green;

    }

    /*相邻兄弟选择器，选取了所有位于div元素后的第一个p元素*/

    div+p {

        background-color: red;

    }

    /*普通相邻兄弟选择器,所有位于div元素的所有相邻元素p*/

    div~p {

        background-color: yellow;

    }

    </style>

</head>

<body>

    <div>

        <p>段落1，在div中</p>

        <p>段落2，在div中</p>

    </div>

    <p>段落3，不在div中</p>

    <p>段落4，不在div中</p>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS组合选择符的更多相关文章

  1. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  2. java：CSS（定位，组合选择符，边距，Float，Table的样式，显示和隐藏，换行，盒子模型，iframe和frameset框架）

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

  3. CSS：CSS 组合选择符

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

  4. CSS组合选择符

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

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

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

  6. CSS那些事儿-阅读随笔1（CSS简介与选择符）

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  7. CSS知识点：选择符

    一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...

  8. CSS(二）选择符

     2019-04-11 22:14:23 1.类型选择符(标签选择符)  html中所有的标签都可以直接对元素选择  p em i a html body.....   特点:对页面中所有当前类型的元 ...

  9. css伪类选择符

    1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...

随机推荐

  1. Codeforces Round #590 (Div. 3) F

    传送门 题意: 给出一个只含前\(20\)个字符的字符串,现在可以选择一段区间进行翻转,问区间中字符各不相同时,最长长度为多少. 思路: 首先,容易将题意转换为选择两个字符各不相同的区间,然后长度相加 ...

  2. IOI 2020 集训队作业胡扯

    首先安慰自己:做的没集训队快很正常-- 很正常-- 做不完也很正常-- 很正常-- 全都不会做也很正常-- 很正常-- 表格 试题一 完成情况 试题二 完成情况 试题三 完成情况 cf549E cf6 ...

  3. Tkinter 鼠标键盘事件（二）

    一个Tkinter主要跑在mainloop进程里.Events可能来自多个地方,比如按键,鼠标,或是系统事件. Tkinter提供了丰富的方法来处理这些事件.对于每一个控件Widget,你都可以为其绑 ...

  4. Netty粘包问题（六）

    netty使用tcp/ip协议传输数据,而tcp/ip协议是类似水流一样的数据传输方法.多次访问的时候可能出现粘包的问题,解决这种问题的方式有如下几种. 一.定长数据流 二.特殊结束符 三.

  5. TVM：

    Hello TVM  发表于 2019-06-29 TVM 是什么?A compiler stack,graph level / operator level optimization,目的是(不同框 ...

  6. 用 mongodb + elasticsearch 实现中文检索

      而 elasticsearch 可以很好的支持各种语言的全文检索,但我们暂时又不想切换到 elasticsearch 作为后端数据库. 当然,可以在 web 应用中存储数据的时候,再主动写一份到 ...

  7. 第一章、Go安装与Goland破解

    1.1.安装Go 安装包下载:https://studygolang.com/dl 一直点下一步安装即可,默认是安装在“C:\Go”,如果自己换成其它目录则需添加环境变量. 1.2.Liteide l ...

  8. [LeetCode] 494. Target Sum 目标和

    You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...

  9. [LeetCode] 22. Generate Parentheses 生成括号

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  10. $ is not defined与SpringMVC访问静态资源

    编写前台Jquery代码时,遇到谷歌浏览器报错:Uncaught ReferenceError: $ is not defined 意味着Jquery库并没有导入到页面.这是有几种情况需要考虑: 1. ...