css的伪类说明

来源：互联网发布：php日期比较编辑：程序博客网时间：2024/06/04 08:08

语法

伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

作用：用于显示前面几个都一样，最后一个样式特殊！

.detail_list {
      position: relative;
   /*height: 214px;*/
   margin-left: 46px;
   margin-right: 46px;
      /*margin-bottom: 25px;*/
    padding-top: 25px;
      padding-left: 21px;
    padding-bottom: 25px;
border-bottom: 2px solid lightgrey;
      display: inline-block;
}
.detail_list:last-child{
   border: 0 !important;（取代前面的 border-bottom: 2px solid lightgrey;样式）
}

<div class="detail_list">
<div class="detail_list_words">
<h1 >背景</h1>
</div>
<div class="detail_list_icons"> </div>
</div>

<div class="detail_list">
<div class="detail_list_words">
<h1 >分布式存储系统HDFS</h1>
</div>
<div class="detail_list_icons"> </div>
</div>

</div>

例如下图：前几个下面都有横线，最后一个使用了伪类，导致没有。

#login_box input {  height:52px;  width:340px;  font-size:18px;  color: #969696;  border: 1px solid #969696;  border-radius: 5px;  margin-top:30px;}#login_box input:last-child {  border: 0;}

<div id="login_box">  <h1>用户登录</h1>    <input maxlength="254" name="username" type="text" class="first" value="用户名"/>    <input name="password" type="password" value="密码"/>    <input id="login_submit" type="submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;录"/>  </form></div>

0 0