`
conkeyn
  • 浏览: 1522823 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第2章 选择器 =>类选择器 P39

    博客分类：
  • CSS
XHTMLCSSHTML工作 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类选择器</title>
<style type="text/css">
*.warning{
	font-weight:bold;}
</style>
</head>

<body>
<p class="warning">When handling plutonium,care must be taken to avoid the formation of a critaical mass.</p>
<p>
With plutonium, <span class="warning">the possibility of important is very real,and must be avoided at all costs</span>. This can be accomplished by keeping the various mass separate.</p>
</body>
</html>

 显示效果：

 

 

为了将一个类选择器的样式与元素关联，必段将class属笥指定为一个适当的值。在前面的代码中，有两个元素的class值指定为warning；第一段（第一个p元素）以及第二段中的span元素。

 

类选择器要正常工作，需要直接引用一个元素的class属笥中的值。这个引用前面往往有一个点号（.），标记这是一个类选择器。通过这个点号，可以帮助类选择器与它可能结合的其他部分分隔开（如类选择器可能结合了元素选择器）。

 

例如：可能希望只在整个段落是警告时才显示为粗体文本：

p.warning{font-weight:blod;}

 

选择器现在会匹配class属笥包含warning的所有p元素，但是其他任何类型的元素都不能匹配，不论是否有此class属性。

选择器p.warning解释为“其class属性包含词为warning的所有段落(p元素)。”因为span元素不是一个p元不经，这个规则的选择器与之不匹配，不能变为粗体文本。

 

  • 大小: 3.3 KB
分享到：
| 第2章 选择器 =>选择器分组 P34
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css的选择器

    本文介绍了CSS中多种类型的选择器，包括类与ID选择器、元素选择器、属性选择器、伪类和伪元素等。通过这些选择器，我们可以精确控制页面的布局和样式，实现复杂的设计效果。掌握这些选择器是成为优秀前端开发人员的...

    CSS选择器.txt

    2. **类选择器**：用于选中具有特定类名的元素。 - 示例：`.class`。选择所有包含类`class`的元素。 - 复合类选择器：`.class.class`。选择同时拥有两个类`class`的元素。 3. **属性选择器**： - `[text]`：选择...

    HTML CSS选择器

    &lt;p class="style2"&gt;&lt;em&gt;第二&lt;/em&gt;段样式为style123&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` 在这个例子中，`p.style1 em`表示选择所有具有`class="style1"`的`&lt;p&gt;`元素内部的`&lt;em&gt;`元素，并将其文字颜色设为蓝色。 **应用场景：*...

    第03章 常规选择器（4）

    由于没有具体的描述信息，我将根据标题“第03章 常规选择器（4）”来假设我们已经了解了基本的选择器，并将在此基础上继续深化理解。 首先，让我们回顾一下CSS选择器的基本类型。CSS选择器分为几个类别，包括标签...

    第四章 CSS选择器.docx

    3. **后代选择器**：使用空格分隔两个选择器，表示选择第一个选择器内的任何层次的第二个选择器元素。例如： ```css ul li { list-style-type: none; } ``` 这将移除所有`&lt;ul&gt;`下的`&lt;li&gt;`元素的列表样式。 4....

    jQuery基础选择器练习题

    2. **子元素选择器**: 使用`&gt;`符号，如`$("div &gt; p")`选取`&lt;div&gt;`的直接子元素`&lt;p&gt;`。 3. **相邻兄弟选择器**: 使用`+`符号，如`$("div + p")`选取紧跟在`&lt;div&gt;`后面的那个`&lt;p&gt;`元素。 4. **通用兄弟选择器**: 使用`...

    第13章 CSS选择器[下]

    二、类型选择器 类型选择器是基于HTML元素标签名的选择器，如`p`、`div`或`h1`。它们直接应用于指定类型的元素，如`p {font-size: 16px;}`将设置所有段落的字体大小为16像素。 三、类选择器 类选择器（.class_name...

    JSoup CSS选择器用法大全

    2. **属性选择器**： - `[attr]`: 匹配具有指定属性 `attr` 的任何元素。 - `[attr=value]`: 匹配 `attr` 属性值等于 `value` 的元素。 - `[attr^=value]`: 匹配 `attr` 属性值以 `value` 开头的元素。 - `[attr...

    css+jquery选择器大全

    3. 过滤选择器：包括简单过滤、内容过滤、可见性过滤、属性过滤、子元素过滤等，如`$("p:first")`（第一个`&lt;p&gt;`元素）、`$("tr:even")`（偶数行的`&lt;tr&gt;`元素）、`$("input:enabled")`（所有启用的`&lt;input&gt;`元素）等...

    jsoup 选择器（一）常规选择器

    **jsoup选择器（一）常规选择器** jsoup是一个Java库，专门设计用于处理HTML文档，它提供了方便且强大的API来抓取和操作结构化数据。本篇将重点介绍jsoup中的基本选择器，帮助你高效地在HTML文档中找到所需的信息。...

    python爬虫之css选择器

    描述：选择每个`&lt;p&gt;`元素为其父元素的第二个子元素、最后一个子元素、第n个子元素等。 ##### 7. 其他选择器 - **否定选择器**：`:not(selector)` 示例：`:not(p)` 描述：选择不是`&lt;p&gt;`元素的所有其他元素。 - ...

    CSS3选择器教辅.pdf

    2. 元素选择器： - 元素选择器（element）：用于选择指定类型的HTML元素。例如，使用“p”可以选择所有&lt;p&gt;元素。 - 多元素选择器（element,element）：可以同时选择多个指定类型的元素。例如，“div,p”将同时选择...

    第四章 CSS选择器.pdf

    2. **类选择器**：使用`.`前缀，用于定位具有特定类属性的元素，如`.class-name`。这样可以在多个元素间共享相同的样式，而不必针对每个元素重复定义。例如，`.highlight {background-color: yellow;}`将使所有具有`...

    jquery 选择器 大全

    在jQuery中，选择器分为多种类型，包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**： - `#id`：通过ID选择器选取具有特定ID的元素...

    JQuery选择器测试 离线版

    2. **类别选择器**：`.myClass`用于选取具有指定类的所有元素。可以结合其他选择器一起使用，如`$("div.myClass")`选取所有class为"myClass"的div元素。 3. **ID选择器**：`#myID`用于选取ID唯一的元素。ID在页面中...

    四大类CSS选择器的使用说明

    1. **交集选择器**：由两个选择器组成，第一个通常是标签选择器，第二个为类选择器或ID选择器。例如： ```css p.one { background-color: skyblue; } ``` 这表示只选择同时具有`p`标签和类名为`one`的元素。 ...

    第03章 常规选择器（1）

    二、类选择器 类选择器使用`.`前缀，允许我们根据元素的class属性来选择元素。比如，`.highlight`会选择所有class包含`highlight`的元素。类选择器非常灵活，可以在多个元素上重复使用，以实现统一的样式。 三、ID...

    HTML5&CSS3网页制作：结构化伪类选择器.pptx

    `:nth-child(n)`和`:nth-last-child(n)`选择器允许你选择父元素中的第n个子元素或倒数第n个子元素。`:nth-child(n)`从第一个子元素开始计数，`:nth-last-child(n)`从最后一个子元素反向计数。例如，`:nth-child(2n+1...

    jQuery选择器大全(48个代码片段 21幅图演示)

    2. **组合选择器** - `,` 分割选择器：用于选择不同类型的元素，如`$("div, p")`。 - `MultipleSelectors`：同时选择多个类或ID，如`$("#myID .myClass")`。 3. **层次选择器** - `child`：`&gt;` 选择子元素，如`$...

Magicbox
Global site tag (gtag.js) - Google Analytics