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编辑  收藏  举报