css关系选择器
1.包含选择符（E F）
选择所有被E元素包含的F元素，中间用空格隔开示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li{color: red;}
ul li{display: inline-block; color: red; list-style: none;}
</style>
</head>
<body>
<div class="Myclass">
<ul>
<li>苹果</li>
<li>橙子</li>
<li>西瓜</li>
</ul>
</div>
</body>
</html>
全部显示为红色的。
2.子选择符（E>F）
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用大括号表示。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
div>a{color: red;}
</style>
</head>
<body>
<div id="">
<a href="#">子元素</a>
<p><a href="">子孙元素</a></p>
</div>
</body>
</html>
显示为第一个a标签为红色。
3.相邻选择符（E+F）
选择紧贴在E元素之后的F元素，用加号表示。选择相邻的第一个兄弟元素。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p+span{color: red;}
</style>
</head>
<body>
<p>这是p元素</p>
<span>这是紧挨着p元素的第一个span元素</span>
<span>这是第二个span</span>
</body>
</html>
显示为第一个span为红色。
4.兄弟选择符（E~F）
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p~span{color: red;}
</style>
</head>
<body>
<p>这是p元素</p>
<span>这是紧挨着p元素的第一个span元素</span>
<span>这是第二个span</span>
</body>
</html>
显示为所有上盘元素为红色。
css关系选择器的更多相关文章
- CSS中的关系选择器
关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格.>.~,还 有+等,这些都是非常常用的选择器. 后代选择器:选择所有合乎规则的后代元素.空格连接. 相邻后代选择器:仅仅选择 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS：选择器大全
一.概念: CSS主要的作用就是给网页中的dom元素设置样式,选择器则是用来匹配dom元素的. CSS中的选择器有很多种,常用的分别是标签选择器(根据元素标签名称),类选择器(根据元素class属性) ...
- CSS概述<选择器总结>
概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...
- css基本选择器
CSS:层叠样式表 (Cascading Style Sheets) 结构层:HTML表现层: CSS行为层: DOM,JavaScript CSS语法结构:div{background:#f00;} ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- css以及选择器基础
CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...
- 前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
随机推荐
- 11.写一个函数，尽可能高效的，从一个标准 url 里取出文件的扩展名
//首先列出需要被操作的url $url_path = "http://www.sina.com.cn/abc/de/fg.php?id=1"; 方法一: ...
- Cannot use object of type yii\db\Connection as array
$pointLog = $conn->createCommand('select * from table1 where is_deleted = 0 AND id1 = :id1 AND id ...
- [Effective JavaScript 笔记]第67条：绝不要同步地调用异步的回调函数
设想有downloadAsync函数的一种变种,它持有一个缓存(实现为一个Dict)来避免多次下载同一个文件.在文件已经被缓存的情况下,立即调用回调函数是最优选择. var cache=new Dic ...
- asp.net单例模式
目的:保证一个类只有一个单一的实例 好处:1.在资源共享的情况下,避免由多个操作而导致的资源消耗:2.提供可变数目的实例. 标准的单例代码如下: using System; using System. ...
- phpcms V9 添加模块
为phpcms创建一个模块的开发流程 [1]创建模块目录 通过前面的学习,我们已经知道phpcms V9框架中的模块位于phcms/modules目录中,每一个目录称之为一个模块. 如果要创建一个模块 ...
- Upload file
<h3>Upload File</h3> <form action="@Url.Action("Upload","UploadCo ...
- html+css复习之第3篇 | jquery | bootstrap
html+css复习之第3篇 | jquery | bootstrap
- 如何在Linux中查看所有正在运行的进程
如何在Linux中查看所有正在运行的进程 FROM:http://os.51cto.com/art/201101/244090.htm 进程是一个其中运行着一个或多个线程的地址空间和这些线程所需要的系 ...
- Android Layout XML属性
转载自并做少量添加:http://www.cnblogs.com/playing/archive/2011/04/07/2008620.html Layout对于迅速的搭建界面和提高界面在不同分辨率的 ...
- EntityFramework Core 学习笔记 —— 包含与排除类型
原文地址:https://docs.efproject.net/en/latest/modeling/included-types.html 在模型类中包含一种类型意味着 EF 拥有了这种类型的元数据 ...