【代码笔记】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) ...
随机推荐
- 代码审计-md5()函数
<?php error_reporting(0); $flag = 'flag{test}'; if (isset($_GET['username']) and isset($_GET['pas ...
- ISerializable接口
继承ISerializable接口可以灵活控制序列化过程 格式化器的工作流程:格式化器再序列化一个对象的时候,发现对象继承了ISerializable接口,那它就会忽略掉类型所有的序列化特性,转而调用 ...
- 【Mybatis】CDATA
忽视内部尖括号那些东西
- Python Warning
Python Warning 官方文档 概念 warning是内置的异常类,所有用户的warning应该继承于内置warning异常. 警告控制的两个阶段: 通过异常过滤器控制警告是否触发,通过fil ...
- 【php】day01
一.PHPCORE基础 1.什么是PHP:[Hypertext Preprocessor] WEB程序开发语言,运行在服务器端 的 ...
- 快速挖pi币
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- [LeetCode] 598. Range Addition II 范围相加之二
Given an m * n matrix M initialized with all 0's and several update operations. Operations are repre ...
- [LeetCode] 142. Linked List Cycle II 单链表中的环之二
Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...
- 挂载ESP(EFI)分区到Windows，并让资源管理器有权限读写
如果你的磁盘精灵经常原地自爆,但你又想读写ESP分区的文件,那么请看此贴 1 //例子如下 diskpart //运行Diskpart工具 list disk //列出所有磁盘 sel disk // ...
- 黑苹果MacOS安装记录
https://blog.daliansky.net/macOS-Catalina-10.15-19A583-Release-version-with-Clover-5093-original-ima ...