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()两个.其他的 ...
随机推荐
- VS2010--2013使用技巧及使用过程中遇到的问题
Microsoft Visual Studio 2010 --2013默认情况下是不显示代码的行号的,但是在编译出错时,可点击下面输出窗口中的错误提示进行定位.但是这样操作起来你有没有感觉到不方便呢. ...
- install sublime for linux
Download Your Free eBooks NOW - 10 Free Linux eBooks for Administrators Python API, that available f ...
- [attribute] 匹配包含给定属性的元素
描述: 查找所有含有 id 属性的 div 元素 HTML 代码: <div> <p>Hello!</p> </div> <div id=&quo ...
- 如何在Macbook Pro搭建PHP开发环境
[Apache] sudo apachectl start // 启动Apache服务 sudo apachectl restart // 重启Apache服务 sudo apachectl s ...
- 流镜像（华为S9306和S5700）
流镜像是指将设备.端口或者VLAN内收.发的指定类型报文复制到观察端口上,监控设备只对指定类型报文进行监测. 流镜像有基于ACL和基于MQC(即复杂流分类)两种配置方式.前者配置简便,但是没有后者支持 ...
- [问题2014A04] 解答
[问题2014A04] 解答 (1) 由条件可得 \(AB+BA=0\), 即 \(AB=-BA\), 因此 \[AB=A^2B=A(AB)=A(-BA)=-(AB)A=-(-BA)A=BA^2=B ...
- ace_admin_1.3.1 wysiwyg 工具条下拉出不来
试了很久才知道是因为<script src="__PUBLIC__/assets/js/bootstrap.min.js"></script> 这个js加 ...
- GZFramwork数据库层《四》单据主从表增删改查
同GZFramwork数据库层<三>普通主从表增删改查 不同之处在于:实例 修改为: 直接上效果: 本系列项目源码下载地址:https://github.com/GarsonZhang/G ...
- Maven学习（二） -- 坐标和依赖
标签(空格分隔): 学习笔记 坐标 实际就像在几何中,我们用一对坐标(x, y)来表示坐标系中唯一的点:或者我们可以用(经度,纬度)来表示地球上的某一个位置,在Maven的世界中,有坐标来唯一的表示项 ...
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列：为ASP.NET MVC应用程序使用异步及存储过程
这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第九篇:为ASP.NET MVC应用程序 ...