[前端入门]CSS概念与简单选择器

2017-11-14 19:21:12来源:CSDN作者:sparkleyn人点击

分享

简单选择器

  1. 通配选择器
  2. 标签选择器
  3. ID选择器
  4. 类选择器

~ 包含(以空格相连的包含)

    <p>      <label>BMI:</label>      <output for="weight height">22</output>    </p>    <style>      [for~="height"] {        color: red;      }    </style>

以。。。开头

 <p><a href="#top">回到顶部</a></p>    <p><a href="/home">返回首页</a></p>    <style>      a[href^="#"] {        color: red;      }    </style>

以什么结尾

 <p>你可以<a href="a.jpg">查看原图</a></p>    <style>      a[href$=".jpg"] {        color: red;      }    </style>

包含

 <i class="icon-user">用户</i>    <i class="icon-wifi">WiFi</i>    <i class="other1 icon-car">汽车</i>    <i class="icon-heart other2">爱心</i>    <style>      [class^="icon-"], [class*=" icon-"] {        color: coral;        font-family: FontAwesome;        font-style: normal;        margin-right: 1em;      }      .icon-user::before {        content: '/f007';      }      .icon-wifi::before {        content: '/f1eb';      }      .icon-car::before {        content: '/f1b9';      }      .icon-heart::before {        content: '/f004';      }    </style>

伪类 (pseudo-classes)

基于 DOM 之外的信息去(比如根据用户和网页的交互状态)选择元素。

 a:link    { ... }   /* 未访问过的链接 */    a:visited { ... }   /* 已访问过的链接 */    a:hover   { ... }   /* 鼠标移到链接上的样式 */    a:active  { ... }   /* 鼠标在连接上按下时的样式 */    a:focus   { ... }   /* 获得焦点时的样式 */

选择器组合
直接组合 EF
后代组合 E F
亲子组合 E > F(必须是直接子类 很严格)

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台