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()两个.其他的 ...
随机推荐
- PHP---------去除数组里面值为空或者为空字符串的元素
array_filter(array('a'=>'','',null,'b'=>3),function($val){ if($val===''||$val===null){ ...
- 使用@Configuration注解来代替Spring的bean配置
下面是一个典型的Spring配置文件(application-config.xml): <beans> <bean id="orderService" class ...
- Java基本语法
一:跨行 Java变量不能跨行,如:String na me = “张三"; 字符串不能跨行,如:String a = "xxxxxxxxxx yyyyyyyy"; 二: ...
- java 除法向上，向下取整
向上取整用Math.ceil(double a) 向下取整用Math.floor(double a) // 举例: double a=35; double b=20; double c = a/b; ...
- 【转】ecshop后台语言项执行漏洞详解
该漏洞需要能登录ecshop后台权限,简单修改下语言项目,即可在网站植入木马后门. 以下是详细分析 1.登陆到ecshop台后,选择模板管理,语言项编辑,搜索用户信息 为什么要搜索用户 该漏洞需要能登 ...
- ruby on rails on windows
这次想系统学会rails,最终目标是将redmine改造成顺手的工具,主要的手段就是开发redmine插件.虽然网上都推荐使用类Unix系统,可手头只有win7系统,就安装了. 难免会遇到这样那样的问 ...
- servlet定义
. 运行在服务器上的java类
- 如何面试有2年java工作经验的应聘人员
1.什么是事务控制?答:事务控制就是将一系列操作当成一个不可拆分的逻辑单元,保证这些操作要么都成功,要么都失败.在关系数据库中,一个事务可以是一条SQL语句,一组SQL语句或整个程序.事务是恢复和并发 ...
- 2016年12月23日 星期五 --出埃及记 Exodus 21:18
2016年12月23日 星期五 --出埃及记 Exodus 21:18 "If men quarrel and one hits the other with a stone or with ...
- 关于 Oracle 的数据导入导出及 Sql Loader (sqlldr) 的用法
在 Oracle 数据库中,我们通常在不同数据库的表间记录进行复制或迁移时会用以下几种方法: 1. A 表的记录导出为一条条分号隔开的 insert 语句,然后执行插入到 B 表中2. 建立数据库间的 ...