CSS学习总结（三）

一、属性选择符

如下表所示:

例子如下：

<head>
        <meta charset="utf-8">        
        <style type="text/css">
            h3[class]{
                color: red;
            }    
            a[class="link"]{
                color: burlywood;
            }    
            a[class~="aa"]{
                text-decoration: none;
            }    
            a[class^="aa"]{
                color: yellow;
            }
            a[class$="bb"]{
                color: blueviolet;
            }
            a[class*="cc"]{
                color: brown;
            }
            a[class|="test"]{
                color: darkcyan;
            }
        </style>
    </head>
    <body>
        <h3 class="hh">我是标题3</h3>
        <h3>我是标题3</h3>
        <h3 class="ss">我是标题3</h3>
        <h3>我是标题3</h3>
        <a href="#" class="link">链接一</a>
        <a href="#" class="link1 aa">链接二</a>
        <a href="#" class="aalink1">链接三</a>
        <a href="#" class="linkbb">链接一</a>
        <a href="#" class="linkcc">链接二</a>
        <a href="#" class="cclink1">链接三</a>
        <a href="#" class="test-link">链接四</a>
        
    </body>

二、伪对象选择符

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

（1）、E:first-letter/E::first-letter   注：此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。

<head>
    <style type="text/css">
           .p1::first-letter
                       {
                float: left;
                font-size: 30px;
                padding: 5px;
            }
    </style>
</head>
<body>
       <p class="p1">今天天气晴朗，有风。</p>
    
</body>

（2）、E:first-line/E::first-line      注:此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。

<head>
    <style type="text/css">
         .p2::first-line
           {
                color: red;
            }
    </style>
</head>
<body>
     <p class="p2">设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。</p>    
</body>

（3）、E:before/E::before  、E:after/E::after

<head>
    <style type="text/css">
                        h2::before{
                color: red;
                content: "谢谢你的访问。";
            }
            h3::after{
                color: blue;
                content: "谢谢你的访问。";
            }
    </style>
</head>
<body>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>   
</body>

（4）、E::selection

不同浏览器测试下的写法：

内核类型写法(E::selection)
Webkit(Chrome/Safari) E::selection
Gecko(Firefox) E::-moz-selection
Presto(Opera) E::selection
Trident(IE) E::selection 
<head>
    <style type="text/css">
               #pp1::-moz-selection{
                color: red;
                background: #fff;
            }
            #pp1::selection{
                color: red;
                background: #fff;
                }
    </style>
</head>
<body>
      <p id="pp1">请选中这段文字，就会知道selection的作用。</p>
</body>

请选中这段文字，就会知道selection的作用。

 

posted @ 2016-08-12 13:55  ly婠婠  阅读(331)  评论(1)  编辑  收藏  举报