CSS组合选择符
组合选择符说明了两个选择器直接的关系。
目录:
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔)
- 相邻兄弟选择器(以加号分隔)
- 普通兄弟选择器(以破折号分隔)
后代选取器
后代选取器匹配所有值得元素的后代元素。
以下实例选取所有<p>
元素插入到 <div>
元素中
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选取器</title>
<style>
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>
子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
以下实例选择了<div>
元素中所有直接子元素 <p>
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素选择器</title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
以下实例选取了所有位于 <div>
元素后的第一个<p>
元素
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相邻兄弟选择器</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div>
元素之后的所有相邻兄弟元素 <p>
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后续兄弟选择器</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<p>之前段落,不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
CSS组合选择符的更多相关文章
- CSS 组合选择符
CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...
- CSS:CSS 组合选择符
ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...
- 【代码笔记】Web-CSS-CSS组合选择符
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- java:CSS(定位,组合选择符,边距,Float,Table的样式,显示和隐藏,换行,盒子模型,iframe和frameset框架)
1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- css关系选择符
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- 1+x证书学习日志——css 基本选择符
##css选择符 1:类型选择符 直接用标签名称当作选择符 特点:选中所有同类元素 2:id名称 ...
- CSS属性选择符
属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...
- CSS高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
随机推荐
- SAP Parallel Accounting(平行分类账)业务配置及操作手册
目录 SAP Parallel Accounting(平行分类账业务)配置及操作手册 SAP Parallel Accounting(平行分类账业务)配置及操作手册 Overview 业务说明 为了适 ...
- swoole 基础知识
$host = 127.0.0.1 监听本地ip $host = 255.3.258.139 监听外网的某个ip $host= 0.0.0.0 监听所有ip $ws = new swoole_we ...
- Java字符串连接的多种实现方法及效率对比
JDK 1.8(Java 8)里新增String.join()方法用于字符串连接.本文基于<Java实现String.join()和效率比较>一文,分析和比较四种自定义实现与String. ...
- C# windows GDI+仿画图 绘图程序设计
C# windows GDI+仿画图 绘图程序设计 1.介绍 这里分享一个简单的画图程序 原作者:author: ping3108@163.com 2.程序主窗体设计 3.程序设计 本程序工程使用VS ...
- MapReduce Map数 reduce数设置
JobConf.setNumMapTasks(n)是有意义的,结合block size会具体影响到map任务的个数,详见FileInputFormat.getSplits源码.假设没有设置mapred ...
- 求问ps如何导出单个切片及PS导出所有的切片图像
在ps里面对图片进行切片,并根据需要弄好切片,利用shift键,可以选择其中部分的切片: 弄好以后,点击“文件”,选择“存储为WEB和设备所用格式”:. 在打开的“存储为WEB和设备所用格式”界面上点 ...
- git 回滚指定行
Stage the parts you want with git add -p, then discard (git checkout -- filename) the unstaged chang ...
- 关于图文转换的web工具
图文转换web服务提供的功能很简单,就是调用百度云提供的图文转换接口,将用户提供的图片中的文字识别返回给用户.具体功能就这个,但是该服务有用到以下的东西: 1.spring-boot web项目搭建 ...
- 使用强类型DataSet增加数据并获取自动增长的ID
使用强类型的DataSet可以方便的操作数据库:有时候我们会对表的ID设置为自动增长,并且需要在插入数据后获取新插入数据的ID,按以下方法即可达到目的: 一. 首先建立一个表,id为自动增加, ...
- Android无法删除项目+导入项目报错
Android无法删除项目+导入项目报错 Android无法删除项目:关闭eclipse或关闭电脑,然后重启,继续删除就可以了 导入项目报错:右键–>配置–>中就可以看到了,更改一下就可以 ...