首页 > 博客列表 > 伪类选择器：状态匹配及元素属性缩写等

博主信息

博文 13

粉丝 0

访问量 18682

专题推荐

更多>

伪类选择器：状态匹配

一、链接

代码：
html:

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

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

二、表单

html:

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

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

选择器的优先级

html:

<form action="">
    <h2 class="on" id="foo">选择器优先级</h2>
</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、字体属性

h2{
    font-style: italic;
    font-variant: small-caps; 
    font-weight: bold;
    font-size: 12px;
    font-weight: bold;
    line-height: 140%;
    font-family: arial;
}

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

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

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

盒模型的属性缩写

.box{
    width:200px
    height:200px
    background-color:violet;
    box-sizing:border-box;
}

.box{
    边框\每个可以设置三个属性：宽度，样式，颜色
    border-top-width:5px;
    border-top-color:red;
    border-top-style:solid;
}

简写:
.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} （上下左右）

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Markdown 语法简介

2020-12-10 08:35:25