一、属性选择符

如下表所示:

例子如下：

<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. 邻接矩阵无向图(三)之 Java详解

    前面分别介绍了邻接矩阵无向图的C和C++实现,本文通过Java实现邻接矩阵无向图. 目录 1. 邻接矩阵无向图的介绍 2. 邻接矩阵无向图的代码说明 3. 邻接矩阵无向图的完整源码 转载请注明出处:h ...

  2. Windows Azure Active Directory (4) China Azure AD Self Password Reset

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. 在开始本章内容之前,请读者熟悉笔者之前写的文档: Windows ...

  3. Elasticsearch——multi termvectors的用法

    前一篇已经翻译过termvectors的使用方法了,这对于学习如何使用tf-idf来说是很有帮助的了. 更多内容参考我整理的ELK教程 什么是TF-IDF? 今天早晨起来,看<ES IN ACT ...

  4. Elasticsearch 连接查询

    在一般的关系型数据库中,都支持连接操作. 在ES这种分布式方案中进行连接操作,代价是十分昂贵的. 不过ES也提供了相类似的操作,支持水平任意扩展,实现连接的效果. 其他内容,参考Elasticsear ...

  5. html/css基础篇——html代码编写过程中的几个警惕点

    本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格 正常情况下书写 ...

  6. iOS平台快速发布HT for Web拓扑图应用

    iOS平台一直是封闭的生态圈,iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试,所开发的APP需要上传到App Store经过苹果审核以后才可对外发布.如果要开发企业内部应用,则 ...

  7. HT for Web可视化QuadTree四叉树碰撞检测

    QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域.QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是 ...

  8. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  9. 【视频处理】YUV格式说明

    YUV,是一种颜色编码方法,Y表示明亮度(Luminance.Luma),U和V则是色度.浓度(Chrominance.Chroma). YUV,Y`UV,YCbCr,YPbPr等都可以称为YUV,彼 ...

  10. Python性能提升小技巧

    第一部分 1-使用内建函数: 你可以用Python写出高效的代码,但很难击败内建函数. 经查证. 他们非常快速 2-使用 join() 连接字符串. 你可以使用 + 来连接字符串. 但由于string ...