CSS 样式规则选择器

柔光的暖阳◎ 2022-07-15 23:11 254阅读 0赞

主要有三种：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>

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>

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>

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>

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>

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。如下：

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2<html>

3   <head>

4     <title>aa.html</title>

5

6     <style type="text/css">

7        a:link\{

8            color:\#FF0000;

9            text-decoration:none;

10         \}

11        a:visited\{

12            color:\#00FF00;

13            text-decoration:none;

14         \}

15        a:hover\{

16            color:\#0000FF;

17            text-decoration:underline;

18         \}

19        a:active\{

20            color:\#FF00FF;

21            text-decoration:underline;

22         \}

23     </style>

24   </head>

25   <body>

26     <a href="\#">测试一下</a>

27   </body>

28</html>

CSS 样式规则选择器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css样式、选择器

相关 CSS_样式选择器

相关 CSS样式：选择器

相关 CSS 样式、选择器

相关 css类选择器的匹配规则,浏览器+css基础+选择器+权重+匹配规则

相关 CSS 样式规则选择器

相关 CSS样式选择器分类（0）

相关 CSS选择器的语法规则

相关 css3样式选择器

相关 CSS 选择器权重计算规则