CSS-派生选择器

派生选择器
在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。
比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:
li strong {
font-style: italic;
font-weight: normal;
}
例子:
我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用
我是斜体字。这是因为 strong 元素位于 li 元素内。
我是正常的字体。
在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。
再看看下面的 CSS 规则:
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影响的 HTML,效果如下:
The strongly emphasized word in this paragraph isred.
This subhead is also red.
The strongly emphasized word in this subhead isblue.

时间: 2024-09-13 13:43:07

CSS-派生选择器的相关文章

所在元素-css 派生选择器的结构是怎样的?

问题描述 css 派生选择器的结构是怎样的? 比如如下的结构 <div class="testcss"> <h1> <p>tttttttttt</p> 如果要修改其中的 里面的字体的色彩. 派生选择器是这样写吗? .testcss div h1 p{ color:blue; } 或者是这样写吗? .testcss h1 p{ color:blue; } 也就是说类名后面需要加上所在元素吗? 解决方案 不需要写全,下面的就行,testcss

CSS 派生选择器的用法与实例详解

通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁.在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则.在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的. 派生选择器允许你根据文档的上下文关系来确定某个标签的样式.通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁. 比方说,你希望列表中的 strong 元素变为斜体字,而

CSS 类选择器

在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. This heading will be center-aligned This paragraph will also be center-aligned. 注意:类名的第一个字符不能使

css类选择器的使用方法详解_CSS/HTML

类选择器 在 CSS 中,类选择器以一个点号显示: 复制代码 代码如下:     .center {text-align: center}  在上面的例子中,所有拥有 center 类的 HTML 元素均为居中.在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. 复制代码 代码如下:     <h1 class="center">     This heading will b

CSS 类选择器与多类选择器的用法详解

类选择器 在 CSS 中,类选择器以一个点号显示:  代码如下 复制代码     .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则.  代码如下 复制代码     <h1 class="center">     This heading will b

CSS id 选择器

核心提示:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: #red {color:red;}#green {color:green;} 下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色.

简单学习了解CSS的选择器 、属性、值

css HTML有标签,CSS有选择器.选择器是给内部和外部样式里面的样式命名. 每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color. 值在冒号(不是等号)后面,分号分离属性. body {    font-size: 0.8em;    color: navy;} 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜色是n

CSS父子选择器

(1) 父子选择器可以有多级,但实际应用中不建议过多,不要超过三层. (2) 父子选择器有严格的层级关系. (3) 父子选择器可以是多种类型选择器的组合,比如: #id span span .cls1 #id span div #id .style1 (4) 使用父子选择器时,html文件头部要有下面这句: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/

CSS通配符选择器的例子

希望所有的元素都符合某一种样式,可使用通配符选择器.通配符选择器可应用于所有html元素,但其优先级最低. 语法: *{ 属性名:属性值; --. } 例: html文件: <html> <head> <title>CSS通配符选择器</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head&g

CSS类选择器的例子

html文件的内容: <html> <head> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="selector.css" /> </head> <body> <span class="style1">新闻一</span> <sp