一、属性选择符

如下表所示:

例子如下：

<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. 【Spring】Spring AOP实现原理

    Spring AOP实现原理 在之前的一文中介绍过Spring AOP的功能使用,但是没有深究AOP的实现原理,今天正好看到几篇好文,于是就自己整理了一下AOP实现的几种方式,同时把代理模式相关知识也 ...

  2. Gephi可视化（一）——使用Gephi Toolkit创建Gephi应用

    在Prefuse上摸打滚爬了一段时间,发现其和蔼可亲,容易上手.但是每每在打开gephi,导入数据再运行时,总还是在心里暗自赞叹gephi的绚烂之极,无与匹敌,当然,gephi也有自己的缺陷,但是ge ...

  3. 你真的了解setTimeout和setInterval吗？

    博客园的代码排版真难用,编辑时候是好的,一保存就是乱了——本文也同时发表在我另一独立博客上 你真的了解setTimeout和setInterval吗?,可以移步至这里吧 setTimeout和setI ...

  4. Fatal signal 11 (SIGSEGV) at 0x00000000 (code=1), thread 1755 (CrBrowserMain)问题

  5. Coreseek + Sphinx + Mysql + PHP构建中文检索引擎

    首先明确几个概念 Sphinx是开源的搜索引擎,它支持英文的全文检索.所以如果单独搭建Sphinx,你就已经可以使用全文索引了.但是往往我们要求的是中文索引,怎么做呢?国人提供了一个可供企业使用的,基 ...

  6. 8.Fluent API in Code-First【Code-First系列】

    在前面的章节中,我们已经看到了各种不同的数据注解特性.现在我们来学习一下Fluent API. Fluent API是另外一种配置领域类的方式,它提供了更多的配置相比数据注解特性. Mappings[ ...

  7. EDNS

    随着业务的复杂化和多样化,RFC1035中定义的DNS消息格式和它支持的消息内容已经不足以满足一些DNS服务器的需求,于是,RFC2671中提出了一种扩展DNS机制EDNS(Extension Mec ...

  8. Linq查询操作之聚合操作(count,max,min,sum,average,aggregate,longcount)

    在Linq中有一些这样的操作,根据集合计算某一单一值,比如集合的最大值,最小值,平均值等等.Linq中包含7种操作,这7种操作被称作聚合操作. 1.Count操作,计算序列中元素的个数,或者计算满足一 ...

  9. 【要什么自行车】ASP.NET MVC4笔记01：Asp.net MVC 分页，采用 MvcPager 和CYQ.Data来分页

    Control: ) { ; ; using (MAction action = new MAction("brain")) { MDataTable table = action ...

  10. 获取 Chromium 源代码以及环境配置

    一.获取代码 a) 不下载代码,直接浏览,到这里:http://src.chromium.org/viewvc/chrome/ 或者这里:http://code.google.com/p/chromi ...