首页 > > 网页制作 > css >

css3选择器（上）

2018-06-24 00:15:25来源：未知阅读 ()

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>?

CSS代码：

background: orange;

min-height: 30px;

}

p:empty {

display: none;

6、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

例:

<h2><a href="#brand">Brand</a></h2>

content for Brand

</div>

<h2><a href="#jake">Brand</a></h2>

content for jake

</div>

<h2><a href="#aron">Brand</a></h2>

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>

</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>

</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代码：

<p>我是一个段落</p>

</div>

<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代码：

<p>我是一个段落</p>

<div>我是一个Div元素</div>

</div>

<div>我是一个Div</div>

<ul>

<li>我是一个列表项</li>

</ul>

<p>我是一个段落</p>

</div>