一、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. }
  5. html中的代码:
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9. <meta charset="UTF-8">
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <title></title>
  13. <link rel="stylesheet" href="test.css">
  14. </head>
  15. <body>
  16. <p>css优先级实例</p>
  17. </body>
  18. </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">
  14. </head>
  15. <body>
  16. <p>css优先级实例</p>
  17. </body>
  18. </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>
  8. <link rel="stylesheet" href="test.css">
  9. <style>
  10. p{
  11. background-color: aqua;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p>css优先级实例</p>
  17. </body>
  18. </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>
  8. <link rel="stylesheet" href="test.css">
  9. <style>
  10. p{
  11. background-color: aqua;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p style="background-color: violet;">css优先级实例</p>
  17. </body>
  18. </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>
  16. </body>
  17. </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>
  16. </body>
  17. </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>
  16. </body>
  17. </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>
  17. <p>p受影响1。</p>
  18. <p id="para1">p受影响2</p>
  19. <p>p受影响3</p>
  20. </body>
  21. </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文件中,将鼠标悬停到选择器上,会自动出现选择器特征,即选择器权重。效果如下图所示:

更多相关文章

  1. android:Layout_weight正确的理解
  2. Android响应式布局
  3. 构建Android自适应布局应用方案解析
  4. html基础:css自定义样式的来源及选择器优先级权重的分析
  5. CSS样式优先级和权重和常用选择器代码演示
  6. css基础:链接形式及选择器的用法
  7. 跟着大牛学PHP--CSS样式和选择器
  8. css自定义样式来源选择器与选择器的权重分析
  9. 自定义样式的来源与优先级与常用选择器与权重分析方法

随机推荐

  1. Android布局中的常用属性小结
  2. android studio 使用gradle 导出jar包,并
  3. Android中文件的读写
  4. Android原生和H5、JS交互,使用JsBridge
  5. Android实现全屏显示的方法 固定横屏或者
  6. android APK反编译入门
  7. Google I/O Android官方新体系架构之:Life
  8. iOS开发之分页控件的简单封装
  9. android数据库
  10. Android读写XML(上)-----DOM