首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

css3高级选择器使用方法

所属分类： 网页制作 / CSS 阅读数： 202
收藏 0 赞 0 分享

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手册先一睹为快！

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 　　但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

　　这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

　　这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22