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()两个.其他的 ...
随机推荐
- Mysql----------的一些常用命令
1.查询一张表中某个字段重复值的记录 select id,cert_number from (select id,cert_number,count(*)as n from 表明 group by c ...
- JSP-11-Servlet
1 初识Servlet Ø Servlet做了什么 本身不做业务 只接收请求并决定调用哪个JavaBean去处理请求 确定用哪个页面来显示处理返回的数据 Ø Servlet 是什么 Servlet ...
- DOM解析
1.xml可扩展标记语言(Extensible Makeup Language) 最简单的声明语法: <?xml version="1.0" ?> 用encoding属 ...
- 【android Studio】零git知识、零脚本命令，即刻体验git版本管理魅力！
git的优点就不去多说了.阻碍咱新手体验它的唯一问题就是门槛太高,脚本看着像天书, 本文主要阐述的,就是如何在android studio上,也能像tfs那样,非常简单的操作,就能使用git进行版本管 ...
- sql经典语句大全
SQL Server提供了大量的函数, 但是在一些常见的如, 字符串拆分, 字符提取,过滤等没有对应的处理, 本帖主要收集一些常见的函数, 整理如下: ------------------------ ...
- Android Layout XML属性
转载自并做少量添加:http://www.cnblogs.com/playing/archive/2011/04/07/2008620.html Layout对于迅速的搭建界面和提高界面在不同分辨率的 ...
- 提高mysql插入性能
参考地址:http://blog.jobbole.com/29432/ 参数优化: 1. SQL语句是有长度限制,在进行数据合并在同一SQL中务必不能超过SQL长度限制,通过max_allowed_p ...
- 2016年12月19日 星期一 --出埃及记 Exodus 21:14
2016年12月19日 星期一 --出埃及记 Exodus 21:14 But if a man schemes and kills another man deliberately, take hi ...
- [问题2014A06] 解答
[问题2014A06] 解答 用反证法, 设存在 \(n\) 阶正交阵 \(A,B\), 使得 \[A^2=cAB+B^2,\,\,c\neq 0.\cdots(1)\] 在 (1) 式两边同时左乘 ...
- EXCEL计算数字、汉字、英文单元格的计数
1.数字COUNT(A1:A100)2.汉字{=SUMPRODUCT(IF(LEN(A1:A100)LENB(A1:A100),1,0)*1)}3.英文{=SUMPRODUCT(IF(ISTEXT(A ...