• CSS3中的属性选择器

  1. [att*=val]属性选择器：[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式。
  2. [att^=val]属性选择器：选择值以val指定的字符串开头的att属性使用这个样式。
  3. [att$=val]属性选择器：选择值以val指定的字符串结尾的att属性使用这个样式。

属性选择器的例子：利用[att$=avl]属性选择器，可以根据超链接中不同的文件扩展符使用不同的样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after {

            content: "Web网页";

            color: red;

        }

        a[href$=jpg]:after {

            content: "JPG图像文件";

            color: green;

        }

    </style>

</head>

<body>

<ul>

    <li><a href="http://www.baidu.com/">HTML5和CSS3</a></li>

    <li><a href="http://www.baidu.com.html">CSS3</a></li>

    <li><a href="photo.jpg">图像素材</a></li>

</ul>

</body>

</html>
  • css中的伪类选择器及伪元素

1、伪类选择器

伪类选择器是css中已经定义好的选择器，不能随便起名，在css中我们最常用的伪类选择器是使用在a元素上的几种选择器，如下：

a:link{color:#FF0000;text-decoration:none}/*未访问时的状态*/

a:visited{color:#00FF00;text-decoration:none}/*已访问过的状态*/

a:hover{color:#FF00FF;text-decoration:none}/*鼠标移上去的状态*/

a:active{color:#0000FF;text-decoration:none}/*鼠标按下去时的状态*/

2、伪元素选择器

所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，使用方法如下：

选择器: 伪元素{属性: 值}

在css中，主要有四个伪元素选择器：

  • first-line伪元素选择器：用于为某个元素中的第一行文字使用样式。例如：使p元素第一行文字设置为蓝色。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first-line伪元素使用实例</title>

    <style>

       p:first-line{color: #0000FF}

    </style>

</head>

<body>

  <p>段落中的第一行。<br/> 段落中的第二行</p>

</body>

</html>
  • first-letter伪元素选择器：用于为元素中的文字的首字母（欧美文字）或第一个字（中文或日文）使用样式。例如：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first-letter伪元素使用实例</title>

    <style>

        p:first-letter {

            color: #0000FF

        }

    </style>

</head>

<body>

<p>this is an english text.</p>

<p>这是一段中文文字。</p>

</body>

</html>
  • before伪选择器：用于在某个元素之前插入一些内容。
  • after伪元素选择器：用于在某个元素之后插入一些内容。

3、root选择器

root选择器将样式绑定到页面的根元素中，如下例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>root选择器</title>

    <style>

        :root {

            background-color: yellow;

        }

        body {

            background-color:limegreen;

        }

    </style>

</head>

<body>

<p>this is an english text.</p>

<p>这是一段中文文字。</p>

</body>

</html>

注意：在使用样式指定root元素与body元素的背景时，根据不同的指定条件，背景色的范围会有所变化，比如上面这个示例，如果采取如下所示样式，不使用root选择器来指定root元素的背景色，值指定body元素的背景色，则整个页面的就全部变成绿色了。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>root选择器</title>

    <style>

        body {

            background-color:limegreen;

        }

    </style>

</head>

<body>

<p>this is an english text.</p>

<p>这是一段中文文字。</p>

</body>

</html>
 

4、not选择器

如果想对某个结果元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>root选择器</title>

    <style>

        body *:not(h1) {

            background-color:limegreen;

        }

    </style>

</head>

<body>

<h1>this is an english text.</h1>

<p>这是一段中文文字。</p>

</body>

</html>

5、empty选择器

使用empty选择器来指定当元素内容伪空白时使用的样式，例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>empty选择器</title>

    <style>

        :empty {

            background-color: limegreen;

        }

    </style>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td>A</td>

        <td>B</td>

        <td>C</td>

    </tr>

    <tr>

        <td>D</td>

        <td>E</td>

        <td></td>

    </tr>

</table>

</body>

</html>

6、target选择器

使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target选择器</title>

    <style>

        :target {

            background-color: limegreen;

        }

    </style>

</head>

<body>

<p id="menu">

    <a href="#text1">示例文字1</a>|

    <a href="#text2">示例文字2</a>|

    <a href="#text3">示例文字3</a>|

    <a href="#text4">示例文字4</a>|

    <a href="#text5">示例文字5</a>

</p>

<div id="text1">

    <h2>示例文字1</h2>

    <p>...此处略去</p>

</div>

<div id="text2">

    <h2>示例文字2</h2>

    <p>...此处略去</p>

</div>

<div id="text3">

    <h2>示例文字3</h2>

    <p>...此处略去</p>

</div>

<div id="text4">

    <h2>示例文字4</h2>

    <p>...此处略去</p>

</div>

<div id="text5">

    <h2>示例文字5</h2>

    <p>...此处略去</p>

</div>

</body>

</html>

css3学习系列之选择器（一）的更多相关文章

  1. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  2. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

  3. CSS3学习系列之选择器（三）

    E:enabled伪类选择器和E:disabled伪类选择器 E:enabled伪类选择器用来指定元素处于可用状态的样式. E:disabled伪类选择器用来指定当元素处于不可用状态时的样式. 当一个 ...

  4. css3学习总结1--CSS3选择器

    CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...

  5. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  6. CSS3学习系列之字体

    给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...

  7. CSS3学习系列之盒样式（一）

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  8. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  9. CSS3学习系列之背景相关样式（一）

    新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...

随机推荐

  1. 随应潮流-基于ABP+Angulsrjs现代化应用软件开发框架(1)-总体介绍

    前言 近几年一直从事电子政务和企业管理软件的外包开发工作,深感开发技术更新之快,尤其随着移动互联网的发展,前端技术发展更是一日千里. 现在随便一个项目都要求多端使用(PC+App+微信),如果没有一个 ...

  2. SELECT中的多表连接

    MySQL多表连接查询 连接(join):将一张表中的行按照某个条件(连接条件)和另一张表中的行连接起来形成一个新行的过程. 根据连接查询返回的结果,分3类: 内连接(inner join) 外连接( ...

  3. 短路运算|字符串操作函数|内存mem操作函数

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  4. Magento中URL路径的获取

    //获得 media 带 http 的url 地址. Mage::getBaseUrl('media') //获得skin 和js 目录的地址: Mage::getBaseUrl('skin'); M ...

  5. shell 分割字符串存至数组

    shell 分割字符串存至数组 shell编程中,经常需要将由特定分割符分割的字符串分割成数组,多数情况下我们首先会想到使用awk但是实际上用shell自带的分割数组功能会更方便.假如a=”one,t ...

  6. Linux中批量添加文件和修改文件小笔记

    1.#使用通配符批量创建5个文件 $ touch file{1..10}.txt 2.#批量修改这五个后缀名为.txt的文本文件名重命名为.c后缀名结尾的文件 $ rename 's/\.txt/\. ...

  7. OC中的私有变量和私有方法

    在类的实现即.m文件中也可以声明成员变量,但是因为在其他文件中通常都只是包含头文件而不会包含实现文件,所以在.m文件中声明的成员变量是@private得.在 .m中定义的成员变量不能和它的头文件.h中 ...

  8. TPshop手机新模板的用户消息实现

    今天在开发TPshop的手机新模板的消息页面,姑且记录一下. 首先,点击下方右上角,进入消息页面: 数据库中目前模拟了三条数据,有: 点击上图右上角,有: 这个 消息设置 功能是新增的,而且类型由原本 ...

  9. ajax返回json数据示例

    前端发送请求与接收数据: $.ajax({        type : "post",        url : "/queryStudent",       ...

  10. 使用Browserify来实现CommonJS的浏览器加载

    前面的话 Nodejs的模块是基于CommonJS规范实现的,可不可以应用在浏览器环境中呢? var math = require('math'); math.add(2, 3); 第二行math.a ...