【代码笔记】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) ...
随机推荐
- URL处理----拼接和编码
ps:浪了好几周,我的锅... 前几天想爬取一个用户网站自动创建每个用户的资料方便注册一些账号,想写一个通用点的爬虫程序爬取只要配置一些爬取规则.爬取深度就ok,避免代码改动,由于时间关系只完成的个半 ...
- day4_常用的内置函数
# dict() 工厂函数, 生成字典 a = dict(u=2, i="hello", **{"kk":"cc"}) a = dict(y ...
- idea中怎么忽略(ignore)掉 .idea等文件
idea需要下载一个专门的plugins 来ignore .idea *.iml等文件 可以在https://plugins.jetbrains.com/idea/plugin/7495–ignore ...
- 微信小程序入门笔记
目录的作用: 1. pages目录: 该目录下存放所有的定义页面 2. utils目录: 该目录下存放定义的一些小功能组件 3. 根目录下app.js文件: 定义小程序对象, 执行小程序生命周期内的各 ...
- django+uwsgi+nginx 导出excel超时问题
一.问题现象和日志报错 之前在项目实现了excel导入导出:django导入导出excel实践,之前一直稳定运行,突然得知导出用户信息时出现nginx错误报告: 查看nginx日志,报错信息如下所示: ...
- inputType导致TextView不能多行显示
今天遇到一个问题很纳闷,那就是TextView不能自动换行多行显示,因为我的印象是TextView默认是可以自动换行多行显示的,今儿个怎么就不行呢. 最终找到原因,是因为设置了inputType属性导 ...
- mysql 字段修改汇总
-- 增加 ALTER TABLE `gdm_nursing_patient` ADD COLUMN `due_date` date DEFAULT NULL COMMENT '名称' AFTER ...
- okhttp 发送get post 请求
package com.qlwb.business.util; import java.util.Map; import com.alibaba.fastjson.JSON; import okhtt ...
- 热情组——项目冲刺 Day1
项目相关 作业相关 具体描述 班级 班级链接 作业要求 链接地址 团队名称 热情组 作业目标 实现软件的生成,以及在福大的传播 Github链接 链接地址 SCRUM部分: 成员昵称 昨日目标 昨日进 ...
- oracle--10.2.0.3升级到11.2.0.4
一,环境 01,待升级的系统 升级仅支持10.2.0.2版本之后的系统,如果不是,请把10G升级至高版本! 本次实验环境10.2.0.3 02,挂载11G系统 03,升级须知 1) 做好备份 二,DB ...