css3的那些高级选择器一

　　css大家都不陌生了，从1996年12月css1正式推出，经历了1998年5月css2，再到2004年2月css2.1，最后一直到2010年推出的css3。css的推出给web带来巨大
的改变，使我们的网页样式多变，丰富多彩。现在所使用的css基本上是在1998年推出的css2的基础上发展而来的。

　　技术是发展的，2010年css3的推出，给我们带来许多亮点，比如可以创建圆角边框，可以在边框上使用图像等等。我也是被它这些新的样式所吸引。自己也一边
看一边学习，只是有新样式在部分浏览器是不支持的，但是也不妨碍我们对新的技术的追求。也随着现代浏览器的标准化，这些css3的新样式是迟早用的着，虽
然知识有点基础，但是每个技术都是基础牢固才会有更好的发展与突破，经常跟一些很牛逼的人聊天，他们都是工作一定的时候反过去看一些基础理论性的东西
，所以不要轻视基础，只有基础扎实，你的技术大厦才能更高，废话不多说，今天我就从css3的选择器说起。

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><body>
<p>
This is a text.<br/>
That is a text.
</p>
</body>
</html>

View Code

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><body>
<p>This is a text.</p>
</body>
</html>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

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></tr><tr><td>4</td><td>5</td><td></td></tr></table>
</body>
</html>

View Code

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">内容二</div>
</body>
</html>

View Code

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>

View Code

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>

View Code

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>

View Code

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><li>项目5</li><li>项目6</li><li>项目7</li></ul>
</body>
</html>

View Code

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><li>项目5</li><li>项目6</li><li>项目7</li></ul>
</body>
</html>

View Code

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>

View Code

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></div>
</body>
</html>

View Code

　　上面说了那么多的css选择器的示例运用，有这些选择器可以大幅度的提高开发书写或修改样式表是的工作效率，我其实一直期待使用这些css选择器，可惜有IE
在几乎在pc上是不能使用这些高级的选择器，还好移动端的浏览器支持的不错。好啦，这些也只是css3的一部分选择器，下次我将会列出其余的部分，大家想知
道也可以下载css3手册先一睹为快！

转载于:https://www.cnblogs.com/qiheng/p/3453084.html

css3的那些高级选择器一相关推荐

3.css3深入，高级选择器浮动布局，html5/css3基础开始(推荐收藏)
文章目录 HTML03 CSS深入 1 案例:九宫格第二节:****CSS选择器深入**** 2.1 全局 * 2.2 并集选择器 2.4 儿子代选择器 2.5 后代选择器 2.8 css特性第三 ...
css的基本选择器和高级选择器
css选择器:指定css要作用的标签,即选择哪个容器,更改它的样式 css选择器主要分为两大类:基本选择器和高级选择器基本选择器: 元素选择器(标签选择器) id选择器类选择器(class选择器) ...
jquery学习（3）--高级选择器
自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/ ---高级选择器:ie7+ 层次选择器: 后代选择器 ul li ...
4、表单和高级选择器
表单和高级选择器 1.什么是表单表单用于收集用户的信息,是浏览器和用户之间沟通的桥梁. 就是你在注册账号时,让你输手机号,输密码那个小框框,明白了吧还不明白? 来给你个图 [外链图片转存失败,源 ...
jQuery之高级选择器
二.jQuery高级选择器针对上次课有点复杂的选择器,或之前没有接触过的选择器. 为什么要反复的讲选择器,这个就是jQuery的一个核心点,在之前js的时候,通过复杂的document.getEle ...
CSS--背景样式---伪类选择器---高级选择器---盒子模型---浮动
文章目录背景样式背景颜色背景图片图片重复方式图片位置图片附着简写属性伪类选择器高级选择器后代选择器直接后代选择器并列选择器相邻兄弟选择器盒子模型边框内边距外边距外边 ...
php如何每天自调用不同的ccs,Python-ccs高级选择器盒模型
css高级选择器与盒模型脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, . ...
CSS选择器（中）——高级选择器
高级选择器,是区别于常见选择器的概念,是CSS的高级运用,也是作为扩展.总体来说,不使用高级选择器一样能做出十分优雅和绚丽的效果,但是使用高级选择器具有更高的语义化程度,而且能使你的html文本更加干 ...
CSS3新增特性：选择器、盒子模型、其他属性
目录 1. CSS3现状 2. 新增选择器 2.1 属性选择 2.2 结构伪类选择 2.3 伪元素选择器(重点) 2.3.1使用场景 3. 盒子模型 4. css3的其他特性 4.1 css3滤镜fi ...
CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...

css3的那些高级选择器一

css3的那些高级选择器一相关推荐

最新文章

热门文章