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()两个.其他的 ...
随机推荐
- 怎么理解Android版本兼容？？？
程序中设置了minSdkVersion和targetSdkVersion如下: <uses-sdk android:minSdkVersion="8" android:tar ...
- Python快速建站系列-Part.Four-首页内容填充
|版权声明:本文为博主原创文章,未经博主允许不得转载. Part.Three中实现了注册和登录的功能,那这一节完成主页内容的填充,并且主页中要实现简单的可以查找代码的功能. 而且有于公共代码部分存储在 ...
- POJ - 1978 Hanafuda Shuffle
最初给牌编号时,编号的顺序是从下到上:洗牌时,认牌的顺序是从上到下.注意使用循环是尽量统一“i”的初始化值,都为“0”或者都为“1”,限界条件统一使用“<”或者“<=”. POJ - 19 ...
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- GAT2.0使用文档（组合接口测试）
3.2接口用例场景组件 在此之前,大家应该都已经开发完成了一个最简单的接口测试用例,但是之前的接口用例的期望结果是固定值,不能动态的去做对比,有很大局限性.下面开始介绍怎样通过场景组件来动态对测试结果 ...
- yii2框架原生的结合框架使用的图片上传
首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...
- 正则表达式（http://tieba.baidu.com/p/882391125）
觉得不错,就记下来了 正则表达式30分钟入门教程版本:v2.31 (2009-4-11) 作者:deerchao 转载请注明来源30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你 ...
- [Python]处理windows下多级目录文件，上传到Linux服务器
#-*- coding: utf-8 -*- __author__ = 'tsbc' import sys reload(sys) sys.setdefaultencoding('utf-8') im ...
- PHP 用户登录与退出
PHP 用户登录与退出 登录页面 login.html 负责收集用户填写的登录信息. <fieldset> <legend>用户登录</legend> <fo ...
- 使用redis-dump进行Redis数据库合并
前言 最近处理数据时,涉及到跨服务器访问的问题,我有两个Redis服务器分别在不同的机器上,给数据维护带来了诸多不便,于是便研究了下如何将两个Redis中的数据合并到一处. 从网站搜了一些工具,找到了 ...