css3选择器（上）
1、给导航加分割线，左右
.nav li::before,.nav li::after{
content:"";
position:absolute;
top:14px;
height:25px;
width:1px;
}
.nav li::before{
left:0;
background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);
}
.nav li::after{
right:0;
background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);
}
.nav li:first-child::before{ background:none;}
.nav li:last-child::after{ background:none;}
2、
html代码：
<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
css代码
a[class^=icon]{
background: green;
color:#fff;//定义以icon开头的任何字符串
}
a[href$=pdf]{
background: orange;
color: #fff;定义href以pdf结尾任何字符串
}
a[title*=more]{
background: blue;
color: #fff;定义有title的的任何字符串
}
例如：<style>
a[class^=column]{
background:#fc0001;
}
a[href$=doc]{
background:#007d02;
}
a[title*=box]{
background:#0000fe;
}
</style>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
3、
结构性伪类选择器root
:root选择器，从字面上我们就可以很清楚的理解是根选择器，
他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>
（“:root”选择器等同于<html>元素，简单点说：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建议使用:root方法。
另外在IE９以下还可以借助“:root”实现hack功能。）
4、
结构性伪类选择器—not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：form {
input:not([type="submit"]){
border:1px solid red;
}//意思是除了type=submit意外的input边框为红色
5、结构性伪类选择器—empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。
HTML代码：
<p>我是一个段落</p>
<p> </p>
<p></p>
CSS代码：
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
6、结构性伪类选择器—target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
例:
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
content for aron
</div>
css代码：
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target{
background: red;
color: #fff;
}
7、结构性伪类选择器—first-child
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
HTML代码：
<ol>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">link3</a></li>
</ol>
CSS代码：
ol > li:first-child{
color: red;
}//讲html的序列号第一个变成红色，如果是无序列表则是前端的序列图标变色
First-child与last-child刚好相反
8、结构性伪类选择器—nth-child(n)
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
HTML代码：
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
CSS代码：
ol > li:nth-child(2n){
background: orange;
}//通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。
9、结构性伪类选择器—nth-last-child(n)
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素
ol > li:nth-last-child(5){
background: orange;
}//选择列表中倒数第五个列表项，将其背景设置为橙色。
10、first-of-type选择器
“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。
.wrapper > p:first-of-type {
background: orange;
//last-of-type选择器
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
11、nth-of-type(n)选择器
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
例：.wrapper > p:nth-of-type(2n){
background: orange;
}通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。
18、nth-last-of-type(n)选择器
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。
.wrapper > p:nth-last-of-type(3){
background: orange;
}
12、only-child选择器
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
示例演示
通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。
HTML代码：
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>
CSS代码：
.post p {
background: green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background: orange;
}
13、only-of-type选择器
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
示例演示
通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。
HTML代码：
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
<div class="wrapper">
<div>我是一个Div</div>
<ul>
<li>我是一个列表项</li>
</ul>
<p>我是一个段落</p>
</div>
CSS代码：
.wrapper > div:only-of-type {
background: orange;
}
css3选择器（上）的更多相关文章
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器（三）
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- CSS3选择器的研究，案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- 第 13 章 CSS 选择器[上]
学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...
- [css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
随机推荐
- PHP的学习--图解PHP引用
在一篇文章中看到关于PHP引用的图解,对于加深对PHP引用的理解很有帮助,在这里备份一下. 如果你对PHP的引用一点也不了解,可以先看我之前的博客:PHP的学习--PHP的引用
- 【干货】如何通过OPC自定义接口来实现客户端数据的读取？
上篇博文分享了我的知识库,被好多人关注,受宠若惊.今天我把我在项目中封装的OPC自定义接口的程序分享一下.下面将会简单简单介绍下OPC DA客户端数据访问,以及搭配整个系统的运行环境. OPC(OLE ...
- 轻松自动化---selenium-webdriver(python) (十一)
本节重点: 控制滚动条到底部 有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户 ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- DirectoryHelper
/// <summary> /// 将相对路径转换成程序所在的绝对路径 /// </summary> /// <param name="path"&g ...
- HtmlAgilityPack 处理通配的contains
//选择不包含class属性的节点 var result = node.SelectNodes(".//span[not(@class)]"); //选择不包含class和id属性 ...
- .NET Framework介绍
.NET Framework 是一个集成在 Windows 中的组件,它支持生成和运行下一代应用程序与 XML Web Services. .NET Framework 旨在实现下列目标: 提供一个一 ...
- freemarker：简介
Apache FreeMarker模板引擎:Java库来生成文本输出(HTML网页,电子邮件,配置文件,源代码,等等)基于模板和变化的数据.模板都写在FreeMarker模板语言(FTL),这是一个简 ...
- 可注册两位字母+两位数字com域名大全（到2016-5-12：12时候）
ed03.comed31.comef46.comgv04.comhv04.comib72.comij29.comik03.comim09.comir32.comir94.comiu07.comiv05 ...
- Focus
在尘世中沉浸得越久,越无法集中精力去做好一件事. 缺乏学习!