<html>
<head>
<title>testCSS</title>
<style type="text/css">
/*1.1定义多个HTML标签的CSS，即h1和h2，h3使用同一个CSS*/
h1,h2,h3 {
color:red;
}
/*1.2派生选择器：依据元素的上下文来定义CSS，即只有li下的strong 元素才会使用此CSS*/
li strong {
font-style: italic;
font-weight: normal;
}
/*2.1 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,使用#来定义id选择器**/
#red {color:red;}
/*2.2 多个id选择器使用一个CSS定义，注意中间用逗号*/
#aid,#bid{color:green;}
/*2.3 id 选择器用于建立派生选择器，以下选择器需要外层元素id为cid，内层元素是p才符合；一个id为“cid”的<p>元素是不符合条件的**/
#cid p{color:yellow;}
/*3.1 类选择器 使用.来定义**/
.divcss{padding:20px;color:yellow;}
/*3.2 多个类选择器的定义,不起作用**/
.aclass,.bclass{color:red;}
/*3.3 类选择器用于建立派生选择器，注意：用于css为redColorCss的元素且子元素为p的元素，而不是用于<p>且其class为redColorCss的**/
.redColorCss p{color:red;}
div .greenColorCss {color:green;}
/**
*总结：
1 三种选择器：html标签选择器 id选择器(#) 类选择器（.）
2 使用逗号可以定义多个html标签选择器与id选择器(#),但不能定义多个类选择器
3 派生选择器：一般用三种选择器 与HTML标签选择器组合，注意是上下级的关系，而不是且的关系
*/
</style>
</head>
<body>
1.选择器<br>
<h1>h1的内容 </h1>
<h2>h2的内容 </h2>
<h3>h3的内容 </h3>
2.派生选择器<br>
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
3.id选择器<br>
<span id="red">我的id是red，使用id选择器</span>
<span id="aid">AAAA</span>
<span id="bid">bbbb</span>
4.id 选择器用于建立派生选择器<br>
<span id="cid">我只符合id选择器，所以是黑色</span>
<p id="cid">我很特殊，请注意</p>
<span id="cid"><p>我符合id选择器建立的派生选择器，所以是黄色</p></span>
5.类选择器<br>
<span class="divcss">我应用了类选择器</span><br>
<span id="aclass">多个类选择器一块定义，不起作用</span><br>
<span id="bclass">多个类选择器一块定义，不起作用</span><br>
<span id="aclass">使用多个类选择器 <span id="bclass">使用多个类选择器</span></span><br>
6.类选择器用于建立派生选择器<br>
<p class="redColorCss">我不应该是红色的</p>
<span class="redColorCss">我不应该是红色的</span>
<span class="redColorCss"><p>我应该是红色的</p></span>
6.1 类选择器用于建立派生选择器<br>
<div class="greenColorCss">我不应该是绿色的</div>
<div><span class="greenColorCss">我应该是绿色的</span></div>
<div><h5 class="greenColorCss">我应该是绿色的</h5></div>
</body>
</html>
分享到：
相关推荐
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
在这个"HTML5+CSS3 城市选择器"项目中，开发者巧妙地利用了这两门技术的优势，构建了一个灵活的城市选择器组件，能够实现多选和单选功能，并允许用户最多选择三个城市。 首先，HTML5在其中扮演的角色主要是提供页面...
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
星状选择符（*）是CSS选择器中最简单的一种，作用于所有元素。例如：`* { margin: 0; padding: 0; }`，这将将所有元素的margin和padding设置为0。星状选择符也可以在子选择器中使用，例如`#container * { border: 1...
【标题】：“利用css＋javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上，用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素，允许用户方便地...
选择器在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中...
类别选择器是 CSS 中另一种基本选择器，它可以定义一个类名，然后在页面中使用该类名来引用该样式。例如： .title1 { font-size: 18px; color: blue; } 四、CSS 的应用 CSS 的应用非常广泛，例如： * 实现网页...
下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
此外，CSS 还提供了分组选择器，可以将多个选择器分组在一起，并应用同样的样式。例如： ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起，对此...
本文将深入探讨CSS选择器特殊性，并介绍一种可视化方法来帮助开发者更有效地理解和管理CSS样式。 首先，我们来看看CSS选择器特殊性的计算规则。特殊性分为四个等级： 1. **ID选择器**（#id）：每个ID选择器赋予100...
CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。 它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值，并显示最近使用的颜色的列表。 默认情况下，颜色选取器将输入...
理解css属性选择器
在这篇关于"CSS基础选择器"的讲解中，我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML元素。 **CSS选择器**是CSS中的基本概念，它们是用于选取HTML文档中特定元素的工具。选择器使得我们可以...
#### 三、CSS选择器分类及示例 ##### 1. 基本选择器 - **类选择器**：`.class` 示例：`.intro` 描述：选择所有class属性为"intro"的元素。 - **ID选择器**：`#id` 示例：`#firstname` 描述：选择所有id属性...
CSS基础-派生选择器，CSS入门必备资料
### CSS选择器的应用 #### CSS概述与引入方式 CSS（层叠样式表）是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性，从而增强网页的表现力。CSS可以通过多种方式引入： -...
常用选择器是 CSS 选择器中最基本的选择器，包括三种类型：ID 选择器、类选择器和标签选择器。 * ID 选择器：根据元素的 ID 来选择元素，例如 `#demoDiv{color:#FF0000;}`。在 HTML 中，元素可以定义一个 ID 属性，...
本文将深入探讨两种常用的选择器——CSS选择器和jQuery选择器，并通过具体的例子来帮助读者更好地理解和掌握它们。 #### 二、CSS选择器 CSS选择器是CSS的核心功能之一，用于定义哪些HTML元素应该应用特定的样式。...