一、属性选择符

如下表所示:

例子如下：

<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多线程系列--“基础篇”02之 常用的实现多线程的两种方式

    概要 本章,我们学习“常用的实现多线程的2种方式”:Thread 和 Runnable.之所以说是常用的,是因为通过还可以通过java.util.concurrent包中的线程池来实现多线程.关于线程 ...

  2. [Node.js] 使用TypeScript编写Node项目

    原文地址:http://www.moye.me/2015/04/25/using_typescript/ 入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番. 是什么 Ty ...

  3. Nodejs学习笔记（二）——Eclipse中运行调试Nodejs

    前篇<Nodejs学习笔记(一)——初识Nodejs>主要介绍了在搭建node环境过程中遇到的小问题以及搭建Eclipse开发Node环境的前提步骤.本篇主要介绍如何在Eclipse中运行 ...

  4. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  5. DP - tencent2016实习生笔试A

    tencent2016实习生笔试A Problem's Link ------------------------------------------------------------------- ...

  6. 关于Response.Redirect和Server.Execute的区别

    Server.Transfer("path")内部重定向请求,是服务器内部的接管,浏览器无法意识到这个接管的发生,浏览器地址栏也不会发生变化.而Response.Redirect( ...

  7. SQL Server2000导出数据时包含主键、字段默认值、描述等信息

    时经常用SQL Server2000自带的导出数据向导将数据从一台数据库服务器导出到另一台数据库服务器: 结果数据导出了,但表的主键.字段默认值.描述等信息却未能导出,一直没想出什么方法,今天又尝试了 ...

  8. css background 背景图设置

  9. 清除svn账户账号密码

    1. 2. 3. 4. 5.再次访问时,会弹出要求输入用户名和密码:只是清除记住的用户名和密码.

  10. Java工程图标前面的红色叹号

    有时Java工程图标前面会出现一个红色的叹号,这是因为工程引入的jar包不存在(或者被删除.移动)造成的. 右键点击工程,选择Build Path->Configure Build Path,弹 ...