【代码笔记】Web-CSS-CSS组合选择符
一，效果图。
二，代码。
<!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组合选择符的更多相关文章
- CSS 组合选择符
CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...
- java：CSS（定位，组合选择符，边距，Float，Table的样式，显示和隐藏，换行，盒子模型，iframe和frameset框架）
1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- CSS：CSS 组合选择符
ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...
- CSS组合选择符
组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS知识点：选择符
一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...
- CSS(二）选择符
2019-04-11 22:14:23 1.类型选择符(标签选择符) html中所有的标签都可以直接对元素选择 p em i a html body..... 特点:对页面中所有当前类型的元 ...
- css伪类选择符
1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...
随机推荐
- 初识v4l2（四）-------v4l2_open、v4l2_read、v4l2_write浅析
原文:https://blog.csdn.net/leesagacious/article/details/49995729 1.app: open("/dev/video0&quo ...
- 201871010136 -赵艳强《面向对象程序设计（java）》第十六周学习总结
201871010136-赵艳强<面向对象程序设计(java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnbl ...
- 莫烦TensorFlow_03 Variable加法
import tensorflow as tf ## 定义变量 state = tf.Variable(0, name = 'counter') #print(state.name) one = tf ...
- Java高级-反射
1.如何创建Class的实例 1.1过程:源文件经过编译(javac.exe)以后,得到一个或者多个.class文件..class文件经过运行(java.exe)这步,就需要进行类的加载(通过JVM的 ...
- jenkins+maven+svn实现springboot项目的自动化部署过程
说明:部署springboot项目的jar 前提(参考:https://www.cnblogs.com/myitnews/p/11493779.html): 全局安全配置(前面配置过) 全局工具配置( ...
- SLAM：
十四讲: 传感器约束了外部环境 测到的通常都是一些间接的物理量而不是直接的位置数据 只能通过一些间接的手段,从这些数据推算自己的位置 好处是没有对环境提出任何要求 camera:单目.双目.深度 Mo ...
- Spring Cloud微服务安全实战_4-5_搭建OAuth2资源服务器
上一篇搭建了一个OAuth2认证服务器,可以生成token,这篇来改造下之前的订单微服务,使其能够认这个token令牌. 本篇针对订单服务要做三件事: 1,要让他知道自己是资源服务器,他知道这件事后, ...
- 用NABCD法提出靠谱的项目建议
在项目中提出靠谱的建议,一方面能提高项目成功的概率,另一方面锻炼自己能力提升自己在项目中的影响力,所以我们要尽可能抓住机会在项目中提建议.那要如何提出靠谱的建议呢?从需求出发,明确做法和好处,分析竞争 ...
- Object.defineProperty 中的 writable 和 configurable 和 enumerable 的理解
在现在比较新的框架中, 比如 reactjs, vuejs中用得很多的一个属性便是 Object.defineOProperty 此属性的文档在网上一搜, 其中的几个属性, 包括 存取描述符(有set ...
- IDEA 部署Tomcat教程（透彻理解操作）
目录 首先我们看一下 IDEA 里的当前项目结构配置 设置 Web 资源目录和 Tomcat读取的 web.xml 配置文件 Tomcat 的 Run/Debug 配置 处理常见问题 Web资源找不到 ...