【代码笔记】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) ...
随机推荐
- eclipse集成maven（四）
一.配置maven 打开Window-Preference-Maven,我们可以看到,默认是使用Eclipse的,不是我们要的maven,可以在Installations中,点击"Add&q ...
- Artificial Intelligence in Finance
https://sigmoidal.io/real-applications-of-ai-in-finance/ Artificial Intelligence is taking the finan ...
- angularjs 运行时报错ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected. node_modules/rxjs/internal/t
解决方法: 在package.json文件里面 修改 "rxjs": "^6.0.0" 为 "rxjs": "6.0.0" ...
- python的可变类型和不可变类型
Python有六种数据类型:数字类型.字符串类型.列表类型.元组类型.字典类型和集合类型 其中不可变类型包括三种:数字类型.字符串类型和元组类型 剩余三种为可变类型:列表类型.字典类型和集合类型 可变 ...
- 喜欢去知乎炸鱼?用python吧
知乎高赞贴: 有一双大长腿是什么体验? 有一副迷人的身材是什么体验? 别用手机费劲的翻了,python帮你一臂之力 import re import requests import os import ...
- boolean 属性的定义规范
[强制]POJO类中的任何布尔类型的变量,都不要加is前缀,否则部分框架解析会引起序列化错误.说明:在本文MySQL规约中的建表约定第一条,表达是与否的值采用is_xxx的命名方式,所以,需要在< ...
- 日志模块log4js的配置说明
1:先安装log4js模块 npm install log4js 目前安装的版本信息:"log4js": "^3.0.5" 2:引用及配置 var log4js ...
- C# Thread.Abort方法与ThreadAbortException异常（取消线程与异常处理）
1.Abort当前线程,后续程序不会执行 class Program { public static Thread thread1; static void Main(string[] args) { ...
- Python【每日一问】38
问: 基础题: 设计一个经营杠杆系数函数DOL,它包含三个参数,S为营业收入,C为变动成本总额,F为固定成本的总额. 已知2018年的S为20,C为11,F为3,求2019年的经营杠杆系数. 提高题: ...
- SIFT提取特征
SIFT特征提取: 角点检测: Morvavec角点检测算子:基于灰度方差的角点检测方法,该算子计算图像中某个像素点沿水平.垂直方向上的灰度差异,以确定角点位置 Harris角点检测算子:不止考察水平 ...