Blogger Information
Blog 18
fans 0
comment 0
visits 16009
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器提权字体图标引入和盒模型常用缩写
沉寂的博客
Original
572 people have browsed it

选择器提权字体图标引入和盒模型常用缩写

选择器提权

选择器的提权方式,有以下公式决定(id=0 css=0 tag=0)零表示选择器的数量 。
具体实例代码如下所示:

  1. div.div1 h3:nth-of-type(n + 1) {
  2. color: red;
  3. }
  4. .div1 h3:nth-of-type(n + 1) {
  5. color: blue;
  6. }
  7. `
  1. <div class="div1">
  2. <h3>Hello World</h3>
  3. <h3 id="two">你好啊!</h3>
  4. `

运行结果为:
选择器提权

字体图标引入

字体图标引入方式
<link rel="stylesheet" href="../CSS/icon-font/iconfont.css" />
实现代码如下所示:

  1. <div class="pic">
  2. <p class="iconfont icon-weibiaoti-4"></p>
  3. <p class="iconfont icon-weibiaoti-41"></p>
  4. <p class="iconfont icon-weibiaoti-43"></p>
  5. </div>

运行结果:
字体图标

盒模型常用缩写代码

盒模型主要代码有 marginpadding 外边距和内边距
后边跟一个值时为上下左右:
margin/padding:10px;
后边跟两个值时为上下、左右:
margin/padding: 10px 20px;
后边跟四个值为上、右、下、左,顺时针方向排列:
margin/padding: 10px 20px 30px 40px;

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