从零开始前端学习[29]:Css3中新增加的选择器一

来源：互联网发布：淘宝pc端搭配套餐编辑：程序博客网时间：2024/06/07 01:24

Css3中新增加的选择器

以前的选择器
新增加的选择器

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

以前的选择器

通配符选择器

*{margin:10px auto;padding:10px}

ID选择器:

#main{width:100px;height:100px;background:blue;}

class类选择器

.main{width:1200px;height;50px;background:green;}

标签选择器

a{color:red;font:bold 22px/30px ""}

组合选择器

.main div #box1{width:100px;height:100px;background:#152345}

后代选择器

.main .p_style{color:white;font:bolder 18px/22px "";width:100px;height:22px}

子代选择器

.main>p{width:100px;height:100px;box-shadow:0 0 10p 0 blue}

毗邻选择器

div+p{height:100px;width:100px;border:1px solid green;}

属性选择器

E[attr=val][attr]{height:100px;width:100px;border:1px solid green;}div[class~="somebody"]{height: 100px; width: 100px;} //属性包含选择器

伪类选择器

div:hover{height: 100px; width: 100px; background: deeppink;}

新增加的选择器

关联选择器

E1~E2(选择E1后面紧邻的E2元素)//注意与毗邻选择器的区别其会跳过中间其他的，而毗邻选择器如果遇到下一个标签不是，则终止 .box1 p~p{ background: deeppink; }

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px ;margin: 20px auto}    .main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00}    .main div p,.main div div{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto}    .main .box1 p~p{background: greenyellow}  /**关联选择器*/    .main .box2 p+p{background: greenyellow}  /**毗邻选择器*/  </style></head><body><div class="main">  <div class="box1">    关联选择器    <p></p>    <p></p>    <p></p>    <p></p>    <div></div>    <p></p>  </div>  <div class="box2">    毗邻选择器    <p></p>    <p></p>    <p></p>    <p></p>    <div></div>    <p></p>  </div></div></body></html>

显示如下: 这里写图片描述

模糊包含选择器

模糊包含也就是类似于我们的正则表达式:
1:特殊符号^，表示以什么开头

^="text" 以text作为开头的类选择器p[class^="text"]{ height: 100px; width: 100px; background: deeppink; }

2:特殊符号$表示以什么结尾

$="text" 以text作为结尾的选择器p[class$="text"]{ height: 100px; width: 100px; background: deeppink; }

3：特殊符号*，表示包含什么

*="text"只要包含text的，p[class$="text"]{ height: 100px; width: 100px; background: deeppink; }

注意这三种运算符与属性运算符之间的区别，如果属性运算符E[class~=”aaaa”],aaaa表示的是一个完整的类名，而上述的三种其实都是在类名字符串中所做的一些模糊匹配

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px ;margin: 20px auto}    .main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00}    .main div p,.main div div{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto}    .main .box1 p[class^="head"]{background: greenyellow} /*  ^表示以head开头的模糊匹配*/    .main .box1 p[class$="footer"]{background: deeppink} /*  $表示以footer结尾的模糊匹配*/    .main .box1 p[class*="middle"]{background: blue}   /*  *表示包含middle的类*/    .main .box1 p[class~="p1_1"]{background: brown}   /*表示属性中必须是一个完整的名字*/  </style></head><body><div class="main">  <div class="box1">    模糊匹配选择器    <p class="headtext1"></p>    <p class="textfooter"></p>    <p class="textmiddlefooter"></p>    <div></div>    <p class="p1 p1_1 p1_2"></p>    <p></p>  </div></div></body></html>

这里写图片描述

新增加的伪类选择器:first-of-type，last-of-type，only-of-type,nth-of-type(n),nth-last-of-type

first-of-type主要是筛选出父类中所有相同的子元素，然后选出其中的第一个

p:first-of-type{background:blue};从父元素中筛选出所有的p元素，然后将第一个赋值

last-of-type主要是筛选出所有相同的子元素，然后对最后一个进行赋值

p:last-of-type{background:green}筛选出父级中所有的p元素，然后对最后一个进行赋值

only-of-type主要筛选出父级元素中所有的标签，判断里面是否是唯一的，如果是唯一的则选出，如果不是唯一的，则不会选中

pre:only-of-type{background:deeppink}筛选出父级中唯一的pre标签

nth-of-type(n);按照顺序的方式，主要是筛选出所有相同的子元素，然后选中其中的第n个元素，注意下表从1开始

p:nth-of-type(3){background:black;}按照顺序的方式,主要是筛选出所有相同的子元素，然后选中其中的第3个p元素

nth-last-of-type(n);按照逆序的方式，主要是筛选出所有相同子元素，然后按照逆序的形式选中其中的第n个元素,注意下标从1开始

p:nth-last-of-type(3){background:gold;}按照逆序的方式,主要是筛选出所有相同的子元素，然后选中其中的第3个p元素

代码如下所示:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px ;margin: 20px auto}    .main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00}    .main div p,.main div div,.main div pre{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto}    .main div p:first-of-type{background: green}    .main div p:last-of-type{background: blue}    .main .box1 pre:only-of-type{background: deeppink}    .main div p:nth-of-type(5){background: gold}    .main div p:nth-last-of-type(3){background: darkmagenta}  </style></head><body><div class="main">  <div class="box1">    first-of-type<br>    last-type-of<br>    only-of-type    <div>1</div>    <p >2</p>    <p >3</p>    <p >4</p>    <pre>5</pre>    <p >6</p>    <p>7</p>    <div>8</div>    <p >9</p>    <p>10</p>    <p >11</p>    <p>12</p>  </div></div></body></html>

显示如下所示:

这里写图片描述

伪类选择器child系列之only-child,last-child,nth-child,nth-last-child；

首先child是子类的意思，这组伪类选择器也就是选中在某个位置的子类，注意是从1开始的下标，子类标签对应的位置和其伪类对应都要相互对应，中间不能包括文字或其他标签

only-child排列在第一个位置的标签的选择

  .main div div:first-child{background: green}  注意这里的div必须是排列在父类中的第一个元素

last-child排列在最后一个元素

 .main div p:last-child{background: darkmagenta}  注意这里的p必须是排列在父类中的最后一个元素

nth-child(n)

.main div p:nth-child(3){background: blue}注意这里的p必须是排列在父类中的第三个元素，并且元素对应的标签是p

nth-last-child(n)

.main .box1 pre:nth-last-child(8){background: deeppink}注意这里的p必须是排列在父类中的倒数第8个元素，并且元素对应的标签是pre

实例代码如下所示:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px ;margin: 20px auto}    h3{text-align: center}    .main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00;text-align: center}    .main div p,.main div div,.main div pre{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto}    .main div div:first-child{background: green}    .main div p:nth-child(3){background: blue}    .main .box1 pre:nth-last-child(8){background: deeppink}    .main div p:last-child{background: darkmagenta}  </style></head><body><div class="main">  <h3>first-child, last-child, nth-child,nth-last-child</h3>  <div class="box1">    <div>1</div>    <p >2</p>    <p >3</p>    <p >4</p>    <pre>5</pre>    <p >6</p>    <p>7</p>    <div>8</div>    <p >9</p>    <p>10</p>    <p >11</p>    <p>12</p>  </div></div></body></html>

这里写图片描述

以上就是关于新增加的一些伪类选择器

欢迎持续访问博客

阅读全文

1 0