CSS3学习手记（4） 伪元素

伪元素

CSS伪元素用于向某些选择器设置特殊效果

语法格式

元素::伪元素

 

：：first-line

根据“first-line”伪元素中样式对Element元素的第一行文本进行格式化 只能用于块级元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      div{width: 500px;margin: 0 auto;}
      div::first-line{color: red}
        </style>
    </head>
    <body>
    <div>
   2012年11月，中国第十八届全国代表大会胜利召开，海内外各界高度关注新时期中央对港澳的方针政策会不会发生改变。
    支持香港、澳门两个特别行政区发展经济、改善民生、推进民主、
   促进和谐的政策也不会变。”三个“不会改变”掷地有声，给港澳同胞吃下了一颗定心丸。
    </div>
    </body>
</html>

：：first-letter

设置文本首子母的样式 只能用于块级元素、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      div{width: 500px;margin: 0 auto;}
      div::first-letter{color: red;font-size: 24px}
        </style>
    </head>
    <body>
    <div>
  2012年11月，中国第十八届全国代表大会胜利召开，海内外各界高度关注新时期中央对港澳的方针政策会不会发生改变。
    支持香港、澳门两个特别行政区发展经济、改善民生、推进民主、
   促进和谐的政策也不会变。”三个“不会改变”掷地有声，给港澳同胞吃下了一颗定心丸。
</div> </body> </html>

 

：:before

在元素的内容前面插入新的内容  content配合使用

  • 第一个子元素
  • 行级元素
  • 内容通过content写入
  • 标签中找不到对应的标签
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      div{width: 500px;height: 100px;border: 1px solid #000;}
      div::before{content: "我在内容的前面"}
        </style>
    </head>
    <body>
    <div> </div>
    </body>
</html>

 

：：after

在元素内容后面插入新内容，常用“content”配合使用，多用清楚浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     header{background: #abcdef}
     header::after{display: block;content: "";clear:both;}
     header > article{float: left;width: 40%;height: 30px;background: #f00}
     header > aside {float: right;width: 40%;height: 30px;background: #ff0}
        </style>
    </head>
    <body>
    <header>
        <article></article>
        <aside></aside>
    </header>
    </body>
</html>

::selection

用于设置在浏览器选中文本后的前景色与背景色

兼容性

只有IE9+版本支持，在Firefox中需要加上前缀“-moz”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      div::selection{background: red;color: #ff0}
        </style>
    </head>
    <body>
       <div>selection</div>
    </body>
</html>

posted @ 2017-06-26 16:15  星河mio  阅读(199)  评论(0)  编辑  收藏  举报