派生选择器

通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。

在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual
selectors
),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2
中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML
代码变得更加整洁。

比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

li strong {
font-style: italic;
font-weight: normal;
}

请注意标记为<strong>的蓝色代码的上下文关系:

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>

<ol>

<li><strong>我是斜体字。这是因为 strong 元素位于 li
元素内。</strong></li>

<li>我是正常的字体。</li>

</ol>

在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或
id,代码更加简洁。

再看看下面的 CSS 规则


strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}

下面是它施加影响的 HTML:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>

在这个段落中 ,strong标签中的样式是红色的。

<h2>This subhead is also red.</h2>

这个标题标签也是红的。

<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

这个h2标签中的strong元素样式是蓝色的。

时间: 2024-10-07 00:15:00

派生选择器的相关文章

CSS:基本语法及派生选择器

本文介绍css基本语法及派生选择器. 代码整理自w3school:http://www.w3school.com.cn (一)基础部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="

(四)CSS选择器和派生选择器

CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式.在学习派生之前,先来了解基本的CSS选择器.前面的文章中提到过下图,选择器的位置如下所示: CSS选择器 分为几种基本选择器:元素选择器.id选择器.类选择器.属性选择器 1.元素选择器 html {color:black;} h1 {color:blue;} h2 {color:silver;} 2.id选择器:为指定id的HTML元素指定样式. #red {color:red;} #green {color:green;} 在H

CSS基础-派生选择器

一.派生选择器:通过依据元素在其位置的上下文关系来定义样式 html: <p><strong>p标签:hello css</strong></p> <ul> <li><strong>li标签:hello css</strong></li></ul> css: li strong{ color: red;}   原文地址:https://www.cnblogs.com/Lehh/p/868

CSS选择器

CSS选择器有:id选择器.派生选择器 1.id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. #red {color:red;} #green {color:green;} <p id="red">这个段落是红色.</p> <p id="green">这个段落是绿色.</p> 2.派生选择器 在现代布局中,id 选择器常常用于建立派生

最常用的五类CSS选择器

一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com的其他文章. 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为选择器,可以是p.

CSS选择器总结

最近在www.w3school.com.cn学习了CSS选择器,下面做一个知识汇总.部分源码来自www.w3school.com.cn! 插入样式表的方法有三种: 第一种:外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 第二种:内部样式表 <head> <style type=&

css003 选择器:明确设置哪些样式

css003 选择器:明确设置哪些样式 1.每个样式的两个部分:选择器和声明块 1.标签选择器:整体控制 2.类选择器:精确控制(.+字母.数字.连字符或下划线) Css允许的类名为.+字母.数字.连字符或下划线(最前面的点一定要记得)且点之后的类名必须以字母开头.类名区分大小写. 3.ID选择器:控制特殊的网页元素 4.通用选择器:*{font-size: 18px;} 2.标签 1.祖先标签 2.派生标签:子孙标签 3.父标签:离一个标签最近的祖先标签为父标签(每个标签只有一个父标签) 4.

css基础语法和选择器的使用

css语法 selector{ property:value } 例:h1{color:red; font-size:14px} 属性大于1个之后,属性之间用分号隔开 如果值大于1个单词,则需要加上引号 p{font-family:"sans serif";} 选择器分组: h1,h2,h3,h4,h5,h6{color:red;} 继承: body{ color:green; } css-派生选择器 通过依据元素在其位置的上下文关系来定义样式 css-id选择器 id选择器可以为标有

css系列教程--选择器

css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}<div><ul><li>我是有边框的</li></ul></div><span><ul><li>我是无边框的</li></ul></span>定义了派生选择器的样式以后