css3高级选择器使用方法


Posted in HTML / CSS onDecember 02, 2013

css3属性选择器

css3之属性选择器,其中包括:

复制代码
代码如下:

1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]

下面我将用实例演示它们的用法

css代码:

复制代码
代码如下:

<style type="text/css">
p[id=p_name] {color:red;}
p[id*=p] {border:1px solid #DDD;}
p[id^=start] {font-weight:700}
p[id$=end] {background:yellow}
</style>

效果如图1:

结构性伪类选择器

1.伪类选择器

在讲伪类选择器之前,我先说下类选择器,类选择器的使用如下所示:

复制代码
代码如下:

<style type="text/css">
p.p_test {color:#F60;}
</style>

伪类选择器,大家看到这个术语不是很懂,楼主跟你们一样,但是看到下面的示例,立马知晓:

复制代码
代码如下:

<style type="text/css">
a:link {color:#F00; text-decoration:none;}
a:visited {color:#0F0; text-decoration:none;}
a:hover {color:#F0F; text-decoration:underline;}
a:active {color:#00F; text-decoration:none;}
</style>

看到这大家顿时知道了吧,在css中我们最常用的伪类选择器是使用在a元素上。那么伪类选择器与类选择器额区别是,类选择器可以随便起名字如“p.right”,
“p.left”;但是伪类选择器是css中已经定义好的选择器,不能随便起名。

2.伪元素选择器

伪元素选择器是指并不是对真正的元素使用的选择器,而是针对css中已经定义好的伪元素使用的选择器。

在css中有下面四个伪元素选择器:

2.1.first-line伪元素选择器(它用于某个元素中的第一行文字使用样式,只能与块级元素关联)

示例如下:

复制代码
代码如下:

<html>
<head>
<style type="text/css">
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head></p> <p><body>
<p>
This is a text.<br/>
That is a text.
</p>
</body>
</html>

2.2.first-letter伪元素选择器(向文本的第一个字母添加特殊样式,在 CSS2.1 之前,:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围,可以与任
何元素关联)

示例如下:

复制代码
代码如下:

<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head></p> <p><body>
<p>This is a text.</p>
</body>
</html>

2.3.before伪元素选择器(在元素之前添加内容)

这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点.

示例如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
li {list-style:none;}
li:before {content:'■'}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>

2.4.after伪元素选择器(在元素之后添加内容)

示例如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
li {list-style:none;}
li:after {content:'--测试文字';color:red}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>

3. 4个基本结构性伪类选择器

3.1.root选择器(将样式绑定到页面的根元素中)

所谓根元素,是指位于文档树的最顶层结构的元素,在html页面上就是指包含整个页面的“html”部分.

示例如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
:root {background:yellow;}
body {background:red;}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>

ps:在使用样式指定root元素与body元素的背景时,根据情况不同的指定条件,背景色的显示范围会有所变化,如上面的代码不使用root选择器来指定root元素
的背景色,只指定body元素的背景色,则整个页面就变成红色的了。

3.2.not选择器(想对某个结构使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,就使用not选择器)

示例如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
body *:not(p) {color:blue;}
</style>
</head>
<body>
<p>我是排除元素</p>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>

3.3.empty选择器(指定当元素的内容为空时使用样式)

示例如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
table td {padding:10px;}
table td:empty {background:#DDD}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</p> <p></tr>
<tr>
<td>4</td>
<td>5</td>
<td></td>
</tr>
</p> <p></table>
</body>
</html>

3.4.target选择器(使用target选择器来对页面中的某个target元素[该元素的id被当作页面的超链接类使用]指定样式,该样式只有在用户点击了页面中的超链接

,并且跳转到target元素后起作用)

示例如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
:target {background:yellow;}
</style>
</head>
<body>
<a href="#div1">连接一</a>
<a href="#div2">连接一</a>
<div class="test" id="div1">内容一</div>
<div id="div2">内容二</p> <p></div>
</body>
</html>

4. 下面接着说其它几个选择器

first-child,last-child,nth-child,nth-last-child这几个选择器能够针对一个父元素中的第一个,最后一个,指定序号的子元素,甚至第偶数个,第奇数
个子元素进行样式指定。

4.1.first-child与last-child的运用,first-child在ie7开始被支持,其它现代浏览器都支持

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
.ul1 li:first-child {background:yellow;}
.ul1 li:last-child {background:red;}
</style>
</head>
<body>
<ul class="ul1">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>

4.2.nth-child(表示第几个元素),运用如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
.ul1 li:nth-child(2) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>

4.3.nth-last-child(表示倒数第几个元素),运用如下:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
.ul1 li:nth-last-child(1) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>

ps:nth-child与nth-last-child的序号是从1开始,当然也可以是关键词或公式。;除了对指定序号的子元素使用样式以外,还可以对某个父元素中的所有第奇
数个子元素或第偶数个子元素使用样式。

4.3.1 nth-child 对某个父元素中的所有第奇数个子元素的样式设置

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
.ul1 li:nth-child(odd) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</p> <p><li>项目5</li>
<li>项目6</li>
<li>项目7</li>
</ul>
</body>
</html>

4.3.2 nth-last-child 对某个父元素中的所有倒数上去的第偶数个子元素的样式设置

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
.ul1 li:nth-last-child(even) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</p> <p><li>项目5</li>
<li>项目6</li>
<li>项目7</li>
</ul>
</body>
</html>

4.4.nth-of-type(匹配属于父元素的特定类型的第 N 个子元素的每个元素)

4.5.nth-last-of-type(配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数)

好,既然知道他们的用处,那我们直接看个列子:

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
h2:nth-of-type(odd) {background:red;}
h2:nth-last-of-type(even) {background:green;}
</style>
</head>
<body>
<h2>标题一</h2>
<p>内容一</p>
<h2>标题二</h2>
<p>内容二</p>
<h2>标题三</h2>
<p>内容三</p>
</body>
</html>

5.only-child(匹配属于其父元素的唯一子元素的每个元素)

其实“:nth-child(1):nth-last-child(1)”的结合用法

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 选择器 </title>
<style type="text/css">
div p:only-child {background:red;}
</style>
</head>
<body>
<div>
<p>孩子一</p>
</div>
<div>
<p>孩子一</p>
<p>孩子二</p>
</div>
<div>
<p>孩子一</p>
<p>孩子二</p>
</p> <p><p>孩子三</p>
</div>
</body>
</html>

上面说了那么多的css选择器的示例运用,有这些选择器可以大幅度的提高开发书写或修改样式表是的工作效率,我其实一直期待使用这些css选择器,可惜有IE
在几乎在pc上是不能使用这些高级的选择器,还好移动端的浏览器支持的不错。好啦,这些也只是css3的一部分选择器,下次我将会列出其余的部分,大家想知
道也可以下载css3手册先一睹为快!
HTML / CSS 相关文章推荐
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 #HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 #HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 #HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 #HTML / CSS
CSS3之多背景background使用示例
Oct 18 #HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 #HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 #HTML / CSS
You might like
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php 文件上传系统手记
2009/10/26 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
jQuery插件开发全解析
2012/10/10 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
微信小程序 同步请求授权的详解
2017/08/04 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python实现京东秒杀功能
2018/07/30 Python
python中强大的format函数实例详解
2018/12/05 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
电子商务应届生求职信
2013/11/16 职场文书
投资建议书模板
2014/05/12 职场文书
作文评语怎么写
2014/12/25 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android