网页css优先级

网页中加载多个css样式文件，其中一个是Ext库自带的样式文件，里面对所有标签定义了一些样式，导致原有网页显示不正确。通过找到对应样式，重新设置了正确的样式。将新样式加到body标签上，但是出现两个样式，Ext样式仍然有效。最后发现时在设置新样式的时候没有加*，导致只对body标签有用，而对子标签无效。下面为修改后的样式

[css]  
.diy,  
.diy *{  
    box-sizing: content-box;  
    -moz-box-sizing : content-box;  
    -webkit-box-sizing: content-box;  
}

当一个标签被定义多个样式，而样式之间出现冲突时，优先级为“针对ID定义的样式” > “类定义样式” > “针对标签类型定义的样式”。例如下面几个样式

[css] 
div{  
    border:2px solid #0000FF;   
}  
  
  
.powerHeader{  
    border:2px solid #00ff00;   
}  
  
  
#navigation{  
    border:2px solid #ff0000;   
}

 

在标签

，首先应用的是#navigation，当#navigation不存在时应用.powerHeader样式，最后才是div样式。

同时，单使用link或style定义多个标签类class之间出现冲突时，会应用定义在最后的那个类。

 

了解css样式优先级，能够在网页开发中避免许多样式冲突问题。

Label berkaitan：

css

sumber：php.cn

Artikel sebelumnya：css中文本换行属性word-wrap和white-space Artikel seterusnya：用ul、li标签 创建css横向导航菜单

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• html设置加粗、倾斜、下划线、删除线等字体效果示例介绍
  1970-01-01 08:00:00
• 实现一个 Java 版的 Redis
  1970-01-01 08:00:00
• 最简单的微信小程序Demo
  1970-01-01 08:00:00
• python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍
  1970-01-01 08:00:00
• 微信小程序：如何实现tabs选项卡效果示例
  1970-01-01 08:00:00
• Python构造自定义方法来美化字典结构输出
  1970-01-01 08:00:00
• HTML5:使用Canvas实时处理Video
  1970-01-01 08:00:00
• Asp.net使用SignalR实现发送图片
  1970-01-01 08:00:00
• 微信小程序开发教程-App()和Page()函数概述
  1970-01-01 08:00:00
• 详解python redis使用方法
  1970-01-01 08:00:00

Isu terkini

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1335

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...

daripada 2024-04-06 20:57:16

0

1

487

Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...

daripada 2024-04-06 20:45:26

0

2

386

Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...

daripada 2024-04-06 20:41:51

0

1

518

Topik-topik yang berkaitan

Lagi>

• css
• berpusat css
• Bagaimana untuk memasukkan gambar dalam css
• css di luar paparan...
• warna fon css
• apa itu css
• Bagaimana untuk menulis segitiga dalam css
• css menetapkan warna teks