简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > iframe后台与CSS优先级及元素样式来源
Blogger Information
Blog 23
fans 0
comment 3
visits 23397
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
iframe后台与CSS优先级及元素样式来源
a.
Original
985 people have browsed it

Iframe后台演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>XXX管理后台</title>
  7.   </head>
  8.   <body>
  9.     <header>XXX管理后台</header>
  10.     <div>
  11.       <aside>
  12.         <a href="index.html" target="manage">首页</a>
  13.         <a href="set.html" target="manage">系统设置</a>
  14.         <a href="article.html" target="manage">文章管理</a>
  15.         <a href="message.html" target="manage">留言管理</a>
  16.         <a href="user.html" target="manage">用户管理</a>
  17.       </aside>
  18.       <main>
  19.         <iframe srcdoc="欢迎来到后台管理" name="manage"></iframe>
  20.       </main>
  21.     </div>
  22.     <footer>您的IP地址为：xxxx，上次访问时间</footer>
  23.   </body>
  24. </html>

元素样式来源

编号 层级 说明
1 继承的 根据元素在文档的结构和层级关系来确定它最终的样式
2 浏览器定义的 用户代理样式，大多数浏览器表现基本一致
3 用户自定义样式 写到了 html 文档的 style 标签中
4 行内样式（内联样式） 仅适用于当前元素，对其它元素无影响，写在标签里的 style 属性里

user agent stylesheet:代理发出用户请求
用户是通过浏览器发出 http 请求，所以默认情况下，浏览器就是用户代理
继承的部分浏览器控制台已不在显示
优先级由低到高

CSS选择器优先级

选择器 示例代码 简写 优先级
ID 选择器 h1[id=”title”]{…} #title{…} 高
类选择器 h1[class=”title”]{…} h1.title{…} 中
标签/元素选择器 h2{…} - 低

使用!important 可强制提高优先级

优先级代码演示

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>选择器的优先级</title>
  6.     <style>
  7.       /**
  8.         tag < class < id
  9.         */
  10.       h1 {
  11.         color: green !important;
  12.         /**设置了！important后显示绿色，不设置显示紫色
  13.         */
  14.       }
  15.       h1.title {
  16.         color: hotpink;
  17.       }
  18.       #head-title {
  19.         color: purple;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <header class="header">
  25.       <h1 class="title" id="head-title">WEB全栈开发课程</h1>
  26.     </header>
  27.   </body>
  28. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！