一、属性选择符

如下表所示:

例子如下：

<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. A/B 测试之前必须要了解的 10 件事

    如今,转化率优化(CRO)已是营销人员必须具备的技能,并且与 ROI 直接挂钩.但是在优化网页的转化率方面又有太多因素要考量,如果你已经不堪其忧,请专心做一件事-- A/B 测试. A/B测试,即你设 ...

  2. [python 译] 基于面向对象的分析和设计

    [python 译] 基于面向对象的分析和设计 // */ // ]]>   [python 译] 基于面向对象的分析和设计 Table of Contents 1 原文地址 2 引言 2.1 ...

  3. 数据库备份与还原SQL代码

    --备份数据库 --必须先创建Backup文件夹 ) SET @name = 'D:\Backup\DingHanECard_V2_ZQGDJ_' ), ) + '.bak' BACKUP DATAB ...

  4. Azure China (1) Azure公有云落地中国

    <Windows Azure Platform 系列文章目录> 微软公有云Microsoft Azure已经落地中国,官方网址:http://www.windowsazure.cn/. 在 ...

  5. Microsoft Azure News(1) 新的数据中心Japan East, Japan West and Brazil South

    <Windows Azure Platform 系列文章目录> 微软官方博客今天表示,微软宣布将在日本东部(埼玉县)和日本西部(大阪)提供Windows Azure服务.就在最近,微软为W ...

  6. RAID磁盘阵列的搭建（以raid0、raid1、raid5、raid10为例）

    mdadm工具的使用 -C或--creat 建立一个新阵列 -r 移除设备 -A 激活磁盘阵列 -l 或--level= 设定磁盘阵列的级别 -D或--detail 打印阵列设备的详细信息 -n或-- ...

  7. asp.net MVC4的执行流程

    MVC在底层和传统的asp.net是一致的,在底层之上,相关流程如下: 1)Global.asax里,MvcApplication对象的Application_Start()事件中,调用 RouteC ...

  8. [水煮 ASP.NET Web API2 方法论]（3-6）万能路由

    问题 定义什么样的路由,可以不会受请求参数类型和数量的限制,而被全部捕获? 解决方案 在路由模板中,给参数添加一个"*"前缀,例如 {*param},只要请求的 URL 能够和路由 ...

  9. SQL更改表字段为自增标识

    下面是SQL语句: --删除主键约束 ) select @Constraint_Name = Name from dbo.sysobjects where Xtype = 'PK' and Paren ...

  10. 不可或缺 Windows Native (25) - C++: windows app native, android app native, ios app native

    [源码下载] 不可或缺 Windows Native (25) - C++: windows app native, android app native, ios app native 作者:web ...