从零开始前端学习[29]:Css3中新增加的选择器一
2017-09-28 22:23
1026 查看
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必须是排列在父类中的第三个元素，并且元素对应的标签是pnth-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>
以上就是关于新增加的一些伪类选择器
欢迎持续访问博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 从零开始前端学习[30]:Css3中新增加的选择器二
- 从零开始前端学习[31]:css3中新增加的一些背景属性
- 从零开始学习前端开发 — 11、CSS3选择器
- 从零开始前端学习[32]:css3中新增加的一些文本属性
- 从零开始前端学习[14]:选择器的优先级
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
- 从零开始前端学习[13]:伪类选择器
- 从零开始前端学习[40]:css3中的resize，user-select属性，多列布局特性，怪异盒子模型，倒影
- 从零开始，学习web前端之CSS3
- 从零开始学习前端开发 — 15、CSS3过渡、动画
- 从零开始学习前端开发 — 12、CSS3弹性布局
- 从零开始前端学习[41]:html5中新增加的一些智能表单
- 从零开始学习前端开发 — 17、CSS3背景与渐变
- 从零开始前端学习[8]:初级选择器的使用
- 从零开始前端学习[12]:css样式中的高级选择器
- css3，js,jquery选择器前端学习
- 从零开始学习前端开发 — 14、CSS3变形基础
- 前端知识汇总-----CSS选择器和CSS3新增选择器
- 从零开始前端学习[45]:js中的所谓的事件类型，鼠标事件，表单事件，键盘事件以及系统事件
- 9、实例CSS3新增加结构性伪类选择器