Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 选择器优先级提权方式及盒模型属性
Blogger Information
Blog 41
fans 0
comment 0
visits 31219
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
选择器优先级提权方式及盒模型属性
陈强
Original
576 people have browsed it

选择器优先级提权方式

选择器分为以下几种：

  • 标签选择器 权重[0,0,1]
    1. <h2>Hello Word</h2>
  • 类选择器 权重[0,1,0]
    1. <h2 class="top"></h2>
  • id选择器 权重[1,0,0]
    1. <h2 id="site"></h2>

选择器提权方式:

  • 上下文覆盖，写在后边的优先级大于写在前面的
    1. <style>
    2. h2 {
    3. color:red;
    4. }
    5. h2 {
    6. color:green;
    7. }
    8. </style>
  • 多标签选择器优先级大于单标签选择器 body h2>h2
    1. <style>
    2. h2 {
    3. color:red;
    4. }
    5. body h2 {
    6. color:green;
    7. }
    8. </style>
  • 类选择器优先级大于标签选择器 .top>h2
    1. <style>
    2. h2 {
    3. color:red;
    4. }
    5. .top {
    6. color:yellow;
    7. }
    8. </style>

  • id选择器优先级大于类选择器 #site>.top

    1. <style>
    2. .top {
    3. color:yellow;
    4. }
    5. #site {
    6. color:blue;
    7. }
    8. </style>

  • 复合择器优先级大于单一选择器 #site>.top

    1. <style>
    2. #site {
    3. color:blue;
    4. }
    5. h2#site {
    6. color:lemonchiffon;
    7. }
    8. </style>

    iconfont 字体图标

  • 在www.iconfont.cn注册并建立项目

  • 搜索字体图标加到项目中

  • 获取fontclass样式表
  • 在相应路径中建立iconfont.css样式表
  • 在文件中引入iconfont.css样式表
    1. <head>
    2.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    3.   <title></title>
    4.   <meta name="keywords" content="{$SEO['keyword']}" />
    5.   <link rel="stylesheet" href="/css/iconfont.css" />
    6. </head>
  • 在相应位置调用iconfont字体图标,需注意引入字体图标的时候一定要一起引入iconfont的字体样式
    1. <div class="map">
    2.  <span class="tag">SUBSCRIBE</span>
    3.  <span class="iconfont icon-caidan"></span>
    4. </div>

盒模型属性

  • 边框border
    • 左右边框值相同
      1. .top {
      2. border: 5px 10px 20px;
      3. border-style: #solid;
      4. border-color: #000;
      5. }
    • 四条边框值相同
      1. .top {
      2. border: 5px solid #000;
      3. }

  • 内边距 padding 内容区到边框的距离

    • 左右内边距值相同
      1. .top {
      2. padding: 5px 10px 20px;
      3. }
    • 上下左右内边距值相同
      1. .top {
      2. padding: 5px;
      3. }

  • 外边距 margin 边框以外的距离，不会对盒子的大小产生影响

    • 左右外边距值相同
      1. .top {
      2. margin: 5px 10px 20px;
      3. }
    • 上下左右外边距值相同
      ```html
      .top {
      margin: 5px;
      }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：markdown语法 还不熟悉
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