css3学习系列之选择器（一）
CSS3中的属性选择器
- [att*=val]属性选择器：[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式。
- [att^=val]属性选择器：选择值以val指定的字符串开头的att属性使用这个样式。
- [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学习系列之选择器（一）的更多相关文章
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
- CSS3学习系列之选择器（三）
E:enabled伪类选择器和E:disabled伪类选择器 E:enabled伪类选择器用来指定元素处于可用状态的样式. E:disabled伪类选择器用来指定当元素处于不可用状态时的样式. 当一个 ...
- css3学习总结1--CSS3选择器
CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- CSS3学习系列之字体
给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...
- CSS3学习系列之盒样式（一）
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之背景相关样式（一）
新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...
随机推荐
- 输入一个数字n 如果n为偶数则除以2，若为奇数则加1或者减1，直到n为1，求最少次数 写出一个函数
题目: 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数 首先,这道题肯定可以用动态规划来解, n为整数时,n的解为 n/2 的解加1 n为奇数时 ...
- Nodejs进阶：express+session实现简易身份认证
本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 文档概览 本文基于express.express-session ...
- javaWeb项目（SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat）之一 基础Struts框架搭建篇
即将开始着手写这个项目,所以希望通过这篇博客来记录自己学习的过程 今天开学第一天,就上了软件工程实践课,自己也开始着手做这个大作业了.首先我的项目名称叫做智能班车管理系统. 项目的概况: 该软件产品是 ...
- 金山助手流氓软件-被进程sjk_daemon.exe坑死
修改完Android工程代码,进入调试阶段时DDMS中报错:The connection to adb is down, and a severe error has occured. 由于之前也碰到 ...
- input元素之间的融合
将两个input融合在一起,注意input标签之间的空格 .put1{ width: 20px; height: 28px; vertical-align:middle; border: 1px so ...
- poj1751最小生成树
The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a very poor system of p ...
- redis持久化快速回忆手册
Redis提供的持久化机制: 1). RDB持久化:该机制是指在指定的时间间隔内将内存中的数据集快照写入磁盘. 2). AOF持久化:该机制将以日志的形式记录服务器所处理的每一个写操作,在Redis服 ...
- jenkins 使用注意
在jenkins使用的时候,在输入文件地址的时候,文件各级目录不能有空格等特殊符号!否则报错!
- 【exp/imp】将US7ASCII字符集的dmp文件导入到ZHS16GBK字符集的数据库中
[exp/imp]将US7ASCII字符集的dmp文件导入到ZHS16GBK字符集的数据库中 1.1 BLOG文档结构图 1.2 前言部分 1.2.1 导读和注意事项 各位技术爱好者,看完本文后 ...
- MyEclipse2016统一字符编码
MyEclipse一般没做修改,默认的字符编码是GBK,但是在实际的开发中常用的是utf-8,为了避免出现乱码等情况,我们需要把开发工具的编码都统一设置成utf-8,修改步骤如下: 1.打开MyEcl ...