`

CSS 样式规则选择器

 
阅读更多

CSS 样式规则选择器

 

主要有三种：HTML选择器、class选择器、ID选择器

1.HTML选择器

复制代码
 1 <html>
 2   <head>
 3     <style type="text/css">
 4         p{
 5             color:red;
 6             font-family:System
 7         }
 8 </style>
 9   </head>
10   
11   <body>
12     <p>这里应用样式表</p> 
13   </body>
14 </html>
复制代码

也就是说选择器是HTML标签

2.class选择器

复制代码
 1 <html>
 2   <head>    
 3     <style type="text/css">
 4         .pclass{
 5             color:red;
 6             font-family:System
 7          }
 8 </style>
 9   </head>
10   
11   <body>
12     <p class="pclass">这里使用了.pclass 样式</p> 
13   </body>
14 </html>
复制代码

3.ID选择器

复制代码
 1 <html>
 2   <head>
 3     <style type="text/css" media="screen,projection">
 4         #pid{
 5             color:red;
 6             font-family:System
 7         }
 8 </style>
 9   </head>
10   
11   <body>
12     <p id="pid">这里使用了#pid 样式</p> 
13   </body>
14 </html>
复制代码

4.关联选择器（也称包含选择器）

复制代码
 1 <html>
 2   <head>    
 3     <style type="text/css" media="screen,projection">
 4         p h2{
 5             color:red;
 6             font-family:System
 7         }
 8 </style>
 9   </head>
10   
11   <body>
12     <p><h2>这里使用了"p h2"样式</h2></p>
13   </body>
14 </html>
复制代码

这里，"p h2"之间用空格分开，可以有更多标签，表示p段落中h2标题的样式

5.组合选择器

复制代码
 1 <html>
 2   <head>    
 3     <style type="text/css" media="screen,projection">
 4         p,h2{
 5             color:red;
 6             font-family:System
 7         }
 8 </style>
 9   </head>
10   
11   <body>
12     <p>这里也使用了"p,h2"样式<h2>这里使用了"p,h2"样式</h2></p>
13   </body>
14 </html>
复制代码

6.相邻选择器

 

复制代码
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>aa.html</title>
 5     <style type="text/css">
 6         div+p{
 7             font-size:20px;
 8             color:red;
 9             font-weight:bold;
10         }
11     </style>
12   </head>
13   <body>
14     <div>星期三</div>
15     <p>这里应用div+p样式</p>
16     <p>这里不再应用样式</p>
17   </body>
18 </html>
复制代码

在本例中，只在紧挨着 div 后的 p 标签中使用所定义的样式。　　、

7.子选择器

 

复制代码
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>aa.html</title>
 5     <style type="text/css">
 6         .test > strong{
 7             font-size:20px;
 8             color:red;
 9         }
10     </style>
11   </head>
12   <body>
13     <div class="test">
14         <strong>提示</strong>
15         <p>今天是<strong>儿童节</strong>哦~~</p>
16         <strong>系统提示</strong>
17     </div>
18   </body>
19 </html>
复制代码

 

本例中，除 p 对象中的 strong 元素外，其他均为红色。

 

 

8.伪标签选择器

指对同一个HTML标签的各种状态进行规则定义，基本格式如下：

HTML标签 : 伪标签

{

　　样式规则……

}

目前较常用的伪标签有： A:active  A:hover  A:link  A:visited  P:first-line  P:first-letter。如下：

 

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

 

 

分享到：
| DOM 基础
评论
发表评论

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

相关推荐

    react-React组件的css选择器

    在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...

    birt公用CSS样式

    此外，还可能包含了类选择器和ID选择器，以更精确地控制特定元素的样式。 2. 效果图.jpg：这是一个图像文件，展示了应用了birt.css样式后的报表实际效果。通过查看此图片，我们可以直观地了解这些公用CSS样式在实际...

    CSS样式表个人总结

    CSS 规则是 CSS 样式表的基本组成部分，它由选择器和声明组成。选择器是用于选择要应用样式的 HTML 元素，而声明是用于定义样式的属性和值。 示例： h1 { color:red; font-size:14px; } h1,h2,h3{ color:red; } ...

    CSS样式生成器

    - **层叠（Cascading）**：CSS的“层叠”特性意味着当有多个样式规则应用于同一个元素时，浏览器会根据规则的优先级来决定显示哪个样式。 - **嵌套规则**：在CSS中，可以将选择器组合起来，如`.parent .child`选择父...

    CSS选择器.pdf

    CSS选择器的使用，使得我们可以非常精确地定位页面中的元素，对它们应用不同的样式规则。正确地理解和使用CSS选择器，能够让我们更加高效地进行前端开发，从而构建出更加丰富和互动的网页界面。了解各类型选择器的...

    css样式表中文手册

    综上所述，"CSS样式表中文手册"提供了全面的CSS知识，包括基础概念、语法结构、选择器类型、布局方法以及CSS3的新特性。通过深入学习和实践，开发者可以有效地掌握CSS，创建美观、响应式的网页。

    SharePoint 的CSS样式

    这个PDF文件，即“CSS Reference Chart for SharePoint 2007 (Microsoft Office SharePoint Server 2007 and Windows SharePoint Services v3)”，很可能详尽地列出了SharePoint 2007中的所有内置类、ID和选择器...

    CSS样式表中文手册教程（我见过最好的，共享了！）

    它由选择器和声明组成，选择器定位要应用样式的元素，而声明则定义具体的样式规则。例如，“p {color: red;}”就是一个简单的例子，其中“p”是选择器，指定了段落元素，而“color: red;”则是声明，将文本颜色设置...

    HTML5&CSS3网页制作：CSS样式规则.pptx

    - 选择器：选择器是CSS样式规则中的起点，它指定样式将应用于哪些HTML元素。例如，`p` 选择器表示所有段落元素，`#header` 选择器针对ID为"header"的元素，`.class` 选择器则应用于具有特定类名的元素。 - 花括号...

    CSS样式参考.rar

    3. **优先级**：CSS的优先级根据选择器的类型决定，内联样式（如`style="..."`）优先级最高，接着是ID选择器（如`#id`），然后是类、属性和伪类（如`.class`、`[attr]`、`:hover`），最后是元素选择器（如`div`）...

    解决CSS样式冲突的几个办法(小结)

    通过使用组合器（Combinator）将选择器的描述写得更加精确（参考CSS选择器 – MDN ），例如对于下述代码片段，如果想给.cellphones中的.apple增加样式，只使用.apple，势必会对.fruit中的.apple也造成影响。...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    1. **CSS选择器**：CSS的选择器是定位HTML元素的关键，包括标签选择器、类选择器、ID选择器、属性选择器等。例如，`p` 选择器用于选取所有段落，`.myClass` 选择器选取具有特定类名的元素，`#myID` 选择器则选取ID为...

    CSS样式表帮助文档

    1. **基本概念**：介绍CSS的基本术语，如选择器、属性、声明和规则集。选择器用于指定要应用样式的元素，属性定义了元素的特定样式，而声明由属性和值组成，形成规则集。 2. **选择器类型**：包括类选择器（.class...

    css样式模板_css_

    压缩包中的“css样式模板.doc”很可能包含了预定义的类选择器和ID选择器，这些可以直接应用到HTML元素上，为网页快速赋予统一的视觉风格。模板可能涵盖了上述提到的一些常见样式，也可能包含了一些特定的设计模式，...

    css样式应用优先级实用PPT课件.pptx

    CSS 样式应用优先级是指在CSS样式规则应用时的顺序和优先级。该优先级规则决定了哪些样式规则将被应用于HTML元素。下面是CSS样式应用优先级的详细解释： 1. 重要声明（!important） 重要声明是CSS样式规则中最高的...

    css样式资源实例

    CSS由一系列规则组成，每条规则包含一个选择器和声明块。选择器指向要应用样式的元素，而声明块则由一对大括号{}包围，包含了具体的样式声明，如`color: red;`。声明由属性和值组成，属性定义了要设置的样式属性，值...

    Css样式的简单应用分析

    CSS样式通常由选择器和声明组成。选择器指向我们想要应用样式的HTML元素，例如`div`、`p`或`h1`等。声明则由属性和值构成，用来定义元素的具体样式。一个简单的CSS规则可能如下所示： ```css p { color: red; ...

    好看的css样式

    例如，`p`选择器应用于所有的段落，`.class`选择器应用于具有特定类名的元素，`#id`选择器应用于具有特定ID的元素。 2. **属性和值**：CSS由一系列规则组成，每个规则包含一个属性和对应的值，如`color: red;`设置...

    css编辑器，在线编辑css样式

    3. **选择器生成**：通过拖拽或点击元素，编辑器可以自动生成对应的选择器，帮助开发者快速定位并修改元素样式。 4. **调试工具**：内置的CSS调试功能可以帮助用户查找并解决样式冲突问题，理解样式层叠和优先级。 ...

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