特殊的上下文选择符

通过增删选择符熟练各个选择符的用法:(注:笔者FF浏览器在源码上注释一部分内容后并不能改变运行后的输出结果,必须删除要注释的内容才行)

<!DOCTYPE html>
<html>   
<head>
    <style type="text/css">
    section>h1 {font-style:italic;}
    h1+p {font-variant:small-caps;}
    h1~a {color:purple;}
    * h1 {color:red;}
    * p {color:blue;}
    * a {color:green;}
    p * {color:black;}
    </style>
</head>
<body>
<section>    
<h1>An H2 Heading</h1>    
<p>This is paragraph 1</p>    
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>    嵌套标签内标签默认是紫色,且有下划线   
<a href="#">Link</a>
</section>
</body>
</html>

最终效果:

1、 子选择符>
标签1 > 标签2
标签2必须是标签1的子元素,或者反过来说,标签1必须是标签2的父元素。与常规的上下文选择符不同,这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。
section>h1 {font-style:italic;}

2、 紧邻同胞选择符+
标签1 + 标签2
标签2必须紧跟在其同胞标签1的后面。
h1 + p {font-variant:small-caps;}

3、 一般同胞选择符~
标签1 ~ 标签2
标签2必须跟(不一定紧跟)在其同胞标签1后面。
h1 ~ a {color:purple;}

4、 通用选择符*
通用选择符*(常被称为星号选择符)是一个通配符,它匹配任何元素。

* p {color:blue;} 这样只会把p包含的所有元素的文本变成l蓝色;

p * {color:black;}会把p标签下的内嵌标签a link变成黑色;

a *{color:green;}把所有的a标签变成绿色。

这个选择符有一个非常有意思的用法,即用它构成非子选择符。比如:
section * a {font-size:1.6em;}

任何是section孙子元素,而非子元素的a标签都会被选中。至于a的父元素是什么,没有关系。

时间: 2024-11-05 14:41:30

特殊的上下文选择符的相关文章

CSS设计指南之上下文选择符

假定有如下场景:你想分别给article和aside中的段落文本,分别设置不同的字号.像这种"基于位置"变换标签样式的问题,可以用上下文选择符来解决. 1.普通的上下文选择符 格式:标签1 标签2 {声明} 标签2就是我们想要选择的目标,而且只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中. article p{color:Red;} 这个例子中的上下文选择符表明,只有是article后代的p元素才会应用后面的样式 2.子选择符 > 格式:标签1 > 标签2 {

(004)CSS选择符(selector)

一.引言 选择符,顾名思义,用于从XHTML文档中选择元素.选择符有很多种,各有其不同的具体性,可以确定一大批元素或仅仅少数几个元素.具体性是度量选择符的作用范围的手段.所谓作用范围,换句话说,指的是选择符选择了多少元素.在CSS的设计原则中,比较具体的选择符将凌驾于较不具体的选择符之上并取而代之.具体性是CSS中较为含糊和难以掌握的概念之一,但也是这种语言中最强大的特性之一. 二.全体选择符 全体选择符是一个星号(*).它充当一个“通配符(wild card)”,选择文档中的每一个元素. 三.

11 css中分组选择符的用法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> h1,span{color:red;} a:hover{color:#2EE926;} /*分组选择符的用法*/ </style> </head> <body&

css那些事儿1 css选择符与管理

结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型项目平台的建设机会是很难能够大纵深的切入,恰恰前端通过编写微信公众号作为一个切入点,希望不会再也找不到工作,再也无法跳巢的尴尬境地. 1 css语法 选择符{属性:value}css的语法非常简单. 2 css常见简写 color:#ffffff ;color:rgb(255,255,255);rg

CSS选择符

一.选择符类型及使用 1.html标记,在CSS中可选择要实现目标的标记, 如:P{属性:值} 2.多个html标记,可在CSS中写相对的标记用逗号隔开. 如:h1,h2,h3,h4,h5{属性:值} 3.选择符在已经使用过的标记,再重复添加需在已经添加的样式下一行方可实现. 如要添加在前面,可用 [!important][IE浏览器不支持]. 如: h2{color:green !important;} h2,h3,h4,h5{color:grey; font-size:36px;} 二.id

HTML/CSS 选择符优先级

CSS的选择符优先级 1.同级样式默认后者覆盖前者 2.样式优先级 类型(1) < class[type](10)=伪类(10) < id(100) < style行间样式(1000) < style内部样式 < link外部引入样式 选择符的相应值综合相加起来大的优先级高 注 : 相应值仅仅是代表他们的等级, 11个类型选择符的优先级仍然小于1个类选择符,以此类推 3.important(IE7及以上) 加了important的样式属性优先级最高. 例 .box{backg

CSS之选择符、链接、盒子模型、显示隐藏元素

<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素</title> <style> a:link{ color:red; } a:visited{ color:black; } a:hover{ color:blue; } a:active{ color:green; } </style> </head> <bo

CSS_css选择符

1.通配选择符语法: * { sRules } 说明:通配选择符.选定文档目录树(DOM)中的所有类型的单一对象.假如通配选择符不是单一选择符中的唯一组成,"*"可以省略. 示例: *[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; } 2.类型选择符语法: E { sRules } 说明:类型选择符.以文档语言对象(Element)类型作为选择符. 示例: td { font-size:1

HTML标签、选择符、超链接以及SEO

常见标签: <div>块</div> img标签是个单标签 alt作用 图片加载失败 显示alt中内容 <img src="图片名字" alt="图片的名字"/> a标签详细介绍: a标签的链接实现: <a href = "链接" target="_blank">a标签 </a> 点击a标签 会转到相应链接下控制链接新打开一个页面用或者其他用target,还有self