一、属性选择符

如下表所示:

例子如下：

<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的作用。

CSS学习总结（三）的更多相关文章

  1. CSS学习笔记三：自定义单选框，复选框，开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  2. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  3. css学习笔记三

    总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步! 1.水平居中 1.1):行内元素水平居中,在其父类设置text-align:center; 1.2): 块级元素水平居中有三种 第一种:定宽 ...

  4. css学习の第三弹—盒模型的创建和使用

    一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...

  5. CSS学习（三）

    CSS 分组 和 嵌套 选择器 分组选择器 h1,h2,p { color:green; } 嵌套选择器 <!DOCTYPE html> <html> <head> ...

  6. CSS学习（三）特指度和层叠

    一.特指度 特制度的一般形式是0,0,0,0 行内样式,第一位的特指度加一 id选择符,第二位的特指度加一 类选择符.属性选择符.伪类,第三位的特指度加一 元素选择符.伪元素,第四位的特指度加一 特指 ...

  7. CSS学习第三天

    定位布局: 相对定位:相对于自身的位置进行偏移position需要搭配left right top bottom      position: relative; 绝对定位:相对于有position属 ...

  8. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  9. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  10. html css的简单学习（三）

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

随机推荐

  1. NASA的下一个十年（译）

    原文 MICHAEL ROSTON (New York Times) 从左起:木卫二:土卫六:经过火星的水手谷星的合成图:金星的拼接图 大多数人已经从人类第一次近距离看到冥王星的兴奋中冷静下来.下一个 ...

  2. 【Android】[转] Android Handler应设为static

    android开发中,使用Lint检测时会提示这么一句话 : This Handler class should be static or leaks might occur.意为handler应用s ...

  3. SQL Server代理(10/12)：使用代理账号运行作业

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这一系列的上一篇,你查看了msdb库下用 ...

  4. SQL Server代理(7/12)：作业活动监视器

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这个系列的前几篇文章里,你创建配置了SQ ...

  5. 【原创】Django-ORM基础

    概述 1.什么是ORM? ORM,即Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在具体的操作业务对象的时候,就不 ...

  6. StreamHelper

    public static MemoryStream CreateMemoryStreamFromBytes(byte[] inputData) { if (inputData == null || ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts

    在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...

  8. 现在就使用HTML5的十大原因

    你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因: 它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码. HTML5是Web开发世界的一次重大的改变,事实 ...

  9. 奔跑的歌颂 diskgenius 找回了20G数据

    2.0同学家的电脑不慎重装系统,结果默认重新分区.其他倒没什么数据,就是几千张记录孩子成长的照片最为珍贵.为了找回数据,用U盘启动,使用Diskgenius全部找回,在此奔歌一下.

  10. c#获取当前应用程序所在路径

    一.获取当前文件的路径1.   System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName     获取模块的完整路径,包括文 ...