search

博客列表 >HTML样式和常用选择器

HTML样式和常用选择器

三九三伏
三九三伏原创
2022年07月09日 11:21:50537浏览

一、HTML样式

HTML样式分为浏览器默认样式、外部样式和内部样式以及内联样式，优先级也逐渐增高，即外部样式和内部样式可覆盖浏览器默认样式，内联样式又可覆盖外部样式和内部样式。外部样式和内部样式的优先级取决于书写书序，后面的样式覆盖前面的样式。

1. 浏览器样式

自定义样式是相对于浏览器默认样式而言，
如下代码展示浏览器默认样式下的p元素：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <p>css优先级实例</p>
  11. </body>
  12. </html>

效果如下：

2. 外部样式的引入

  1. 外部样式test.css文件中的代码：
  2. p {
  3.     background-color: red;
  4. }
  6. html中的代码：
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10.     <meta charset="UTF-8">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.     <title></title>
  14.     <link rel="stylesheet" href="test.css">
  15. </head>
  16. <body>
  17.     <p>css优先级实例</p>
  18. </body>
  19. </html>

效果如下图：

可见，外部样式已经覆盖了浏览器的默认样式。

3. 内部样式的引入

3.1 内部样式位置先于外部样式引入

内部样式位置先于外部样式引入,则内部样式会被外部样式覆盖。
代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <style>
  9.         p{
  10.             background-color: aqua;
  11.         }
  12.     </style>
  13.     <link rel="stylesheet" href="test.css">
  15. </head>
  16. <body>
  17.     <p>css优先级实例</p>
  18. </body>
  19. </html>

效果如下：

3.2 内部样式引入位置位于外部样式之后

内部样式引入位置后于外部样式,则内部样式覆盖外部样式。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  9.     <link rel="stylesheet" href="test.css">
  10.     <style>
  11.         p{
  12.             background-color: aqua;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <p>css优先级实例</p>
  18. </body>
  19. </html>

3.2 内联样式的引入

内联样式的引入将覆盖内部样式和外部样式，自然也会覆盖浏览器默认样式。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  9.     <link rel="stylesheet" href="test.css">
  10.     <style>
  11.         p{
  12.             background-color: aqua;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <p style="background-color: violet;">css优先级实例</p>
  18. </body>
  19. </html>

效果如下：

[========]

二、常用选择器

1. 标签选择器

直接使用标签来选择

  1. h1 {
  2.     background-color: aliceblue;
  3. }

2. 属性选择器

语法：

  1. [属性]{
  2.           样式：值
  3. }

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <style type="text/css">
  9.         a[href]{
  10.             color:red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <a href="www.baidu.com">百度</a>
  17. </body>
  18. </html>

效果如下：

2.1 最常用的属性选择器

2.1.1 类选择器

语法：

  1.     .类名字{
  2.         样式:值;
  3.     }

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <style type="text/css">
  9.         .baidu {
  10.             color:red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <a class="baidu" href="www.baidu.com">百度</a>
  17. </body>
  18. </html>

效果如下：

2.1.2 ID选择器

语法：

  1. .元素ID{
  2.             样式:值;
  3.  }

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <style type="text/css">
  9.         #baidu {
  10.             color:red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <a id="baidu" href="www.baidu.com">百度</a>
  17. </body>
  18. </html>

效果如下：

3. 通配符选择器

语法：

  1.      * {
  2.          样式:值;
  3.      }

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <style type="text/css">
  9.         * {
  10.             color:red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <a id="baidu" href="www.baidu.com">超链接受影响</a>
  16.     <h1>h1受影响</h1>
  18.     <p>p受影响1。</p>
  19.     <p id="para1">p受影响2</p>
  20.     <p>p受影响3</p>
  22. </body>
  23. </html>

效果如下：

4. 选择器的权重

选择器权重被称为选择器特征（Selector Specificity），表示为三组数字，三组数字依次代表了ID选择器权重，类选择器权重，标签选择器权重，表现形式为（x，x，x），每组有一个相应类型选择器匹配时，数值会增加1。
例如，
一个p标签选择器的权重表示为（0,0,1）,对应css代码为：

  1. p {
  2.     background-color: red;
  3. }

一个类选择器加上一个p标签选择器的权重表示为（0,1,1）,对应css代码为：

  1. .classname p {
  2.     background-color: red;
  3. }

一个ID选择器加上一个类选择器再加上一个p标签选择器的权重表示为（1,1,1）,对应css代码为：

  1. #id .classname p {
  2.     background-color: red;
  3. }

两个ID选择器加上一个类选择器再加上一个p标签选择器的权重表示为（2,1,1）,对应css代码为：

  1. #id1 #id2 .classname p {
  2.     background-color: red;
  3. }

不过除非特别需要，我们不建议将权重提升到ID选择器这个权重级别，因为已经达到了最高权重，调节样式匹配就不是很灵活了。

查看选择器的权重，可以在vscode中的css文件中，将鼠标悬停到选择器上，会自动出现选择器特征，即选择器权重。效果如下图所示：

上一条：数据库的CURD操作、PDO本质与原理的学习下一条：字体图标的引用和自定义样式/媒体查询的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多