简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 伪类选择器：状态匹配及元素属性缩写等
Blogger Information
Blog 13
fans 0
comment 2
visits 14295
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
837 people have browsed it

伪类选择器：状态匹配

一、链接

代码：
html:

  1. <body>
  2.     <a href="https://www.php.cn">PHP中文网</a>
  3. </body>

标签的四种状态：
css：样式
1、默认状态：没有访问、点击
a:link{ color:blue; }
2、已访问过的状态
a:visited{ color:green; }
3、悬停状态
a:hover{ color:red; }
4、激活，当鼠标点击压下去的时候
a:active{ color:yellow; }

二、表单

html:

  1. <form action="">
  2.     <p>用户名：<input type="text" readonly autofocus></p>
  3. </form>

css:
input:read-only{ background-color:linghtgreen; }

选择器的优先级

html:

  1. <form action="">
  2.     <h2 class="on" id="foo">选择器优先级</h2>
  3. </form>

1、当选择器相同时，与书写顺序有关，后面的样式覆盖前面的
css：
h2{ color:gold; }
h2{ color:blue; }
显示：蓝色

2、当选择器不同时与优先级相关，级别高的覆盖级别低的。如果仍想提升选择器的优先级，此时到了 class 我们应该用 Id 级
css:
#foo{ color:gold; }
.on{ color:blue; }

结论： ID > class 类 > tag 标签

选择器的优先级的提权方式

选择器的类型对优先级的影响
css:
.on{ color:gold; }
h2{ color:blue; }
显示： 金色

原因：ID > class 类 > tag 标签
实际工作中，应该用一系列的选择器组合来灵活的设置优先级
大家都是标签级，为什么写到后面的无效，一定有一个规则
css:
body h2{ color:gold; }
h2{ color:blue; }
显示： 金色

原因：有一个计算公式：[id 选择器的数量，class 选择器的数量，tag 选择器的数量]

body h2 的权重[0,0,2]
h2 的权重[0,0,1] 这个的标签权重少（低）

具体标准：
[1,0,0]>[0,1,1]>[0,1,0]>[0,0,3]

注意：如果想继续提权，选择一个比 body h2 权重级别高的组合就可以。

书写顺序 tag/class/id {…}

元素属性的简写

1、字体属性

  1. h2{
  2.     font-style: italic;
  3.     font-variant: small-caps; 
  4.     font-weight: bold;
  5.     font-size: 12px;
  6.     font-weight: bold;
  7.     line-height: 140%;
  8.     font-family: arial;
  10. }

简写：
h2{font:italic small-caps bold 12px/140% arial }

  1. h2{
  2.     background-color: #FFF0000;
  3.     background-image: url(../img/1.png);
  4.     background-repeat: no-repeat;
  5.     background-attachment: fixed;  
  6.     background-position: 0 0; 
  7. }

简写：
h2{background:#FFF0000 url(../img/1.png) no-repeat fixed }

盒模型的属性缩写

  1. .box{
  2.     width:200px
  3.     height:200px
  4.     background-color:violet;
  5.     box-sizing:border-box;
  6. }
  1. .box{
  2.     边框\每个可以设置三个属性：宽度，样式，颜色
  3.     border-top-width:5px;
  4.     border-top-color:red;
  5.     border-top-style:solid;
  6. }

简写:
.box{border-top:5px red solid}

内边距 padding：上 右 下 左；顺时针方向

简写:
{padding: 5px 10px 15px 20px;}

{padding:10px 20px 15px} (上 左右 下)
{padding:10px 20px} （上下 左右）
{padding:10px } （上下左右）

外边距 margin: 上 右 下 左；顺时针方向

简写:
{margin: 5px 10px 15px 20px}

{margin: 5px 10px 15px} （上 左右 下）
{margin: 5px 10px} （上下 左右）
{margin：5px} （上下左右）

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！