认识CSS3新增选择器和样式

最新推荐文章于 2022-07-19 11:31:45 发布

weixin_30418341

最新推荐文章于 2022-07-19 11:31:45 发布

阅读量90

点赞数

文章标签： php java 前端 ViewUI

原文链接：http://www.cnblogs.com/snow-lanuage/p/10727170.html

版权

前端之HTML5，CSS3（二）

　　CSS3新增选择器和样式

　　CSS3新增选择器

　　结构伪类选择器

　　:first-child：选取父元素中的第一个子元素的指定选择器

　　:last-child：选取父元素中的最后一个子元素的指定选择器

　　:nth-child(n)：选取父元素中的第n个子元素的指定选择器，n取小于等于子元素个数的正整数。当n取n值表示选取父元素中所有子元素；n取2n表示选取父元素中所有偶数的子元素，等同于:nth-child(odd)；n取2n+1表示选取父元素中所有奇数的子元素，等同于:nth-child(odd)。　　

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>伪类选择器-测试</title>
 6     <style type="text/css">
 7         li {
 8             list-style: none;
 9         }
10         li:first-child {
11             color: red;
12         }
13         li:last-child {
14             color: blue;
15         }
16         li:nth-child(4) {
17             color: orange;
18             font-size: 16px;
19         }
20         /*li:nth-child(n) {  选取父元素中的所有元素
21             background-color: pink;
22         }
23         li:nth-child(2n) {  选取父元素中的偶数元素
24             background-color: white;
25         }
26         li:nth-child(2n+1) { 选取父元素中的奇数元素
27             background-color: yellow;
28         }*/
29     </style>
30 </head>
31 <body>
32     <ul>
33         <li>C</li>
34         <li>java</li>
35         <li>python</li>
36         <li>C++</li>
37         <li>javascript</li>
38         <li>php</li>
39         <li>ruby</li>
40     </ul>
41 </body>
42 </html>

View Code

　　效果

　　属性选择器

　　基本语法：标签[attribute] {css}，表示选取某一标签中带有某种属性的所有元素。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>伪类选择器-测试</title>
 6     <style type="text/css">
 7         li {
 8             list-style: none;
 9         }
10         li[class] {  /*选取li标签中带有class属性的所有元素*/
11             color: red;
12         }
13     </style>
14 </head>
15 <body>
16     <ul>
17         <li class="c">C</li>
18         <li>java</li>
19         <li>python</li>
20         <li>C++</li>
21         <li class="js">javascript</li>
22         <li>php</li>
23         <li>ruby</li>
24     </ul>
25 </body>
26 </html>

View Code

　　效果

　　属性选择器中属性可以赋值，如div[class=demo]等同于类选择器.demo，使用div[class^=start]表示class属性值以start开头的元素，div[class$=end]表示class属性值以end结尾的元素，结合正则表达式更容易理解。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>属性选择器-测试</title>
 6     <style type="text/css">
 7         li {
 8             list-style: none;
 9         }
10         li[class^=j] {  /*选取li标签中带有class属性的所有元素*/
11             color: red;
12         }
13         li[class$=p] {
14             color: blue;
15         }
16     </style>
17 </head>
18 <body>
19     <ul>
20         <li class="c">C</li>
21         <li class="java">java</li>
22         <li class="p">python</li>
23         <li>C++</li>
24         <li class="js">javascript</li>
25         <li class="php">php</li>
26         <li>ruby</li>
27     </ul>
28 </body>
29 </html>

View Code

　　效果

　　伪元素选择器

　　基本语法：标签::伪元素 {css}，表示按照伪元素的规则选取标签内的内容元素。如p::first-letter表示选取p标签内内容的第一个单词，P::first-line表示选取p标签内内容的第一行，p::selection表示改变选取p标签内容的样式。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>属性选择器-测试</title>
 6     <style type="text/css">
 7         p::first-letter {
 8             font-size: 16px;
 9         }
10         p::first-line {
11             color: red;
12         }
13         p::selection {
14             font-size: 20px;
15             color: blue;
16         }
17     </style>
18 </head>
19 <body>
20     <p>有时我会想，也许最好的生活方式便是将每一天当做自己的末日。用这样的态度去生活，生命的价值方可以得以彰显。我们本应纯良知恩、满怀激情地过好每一天，然而一日循着一日，一月接着一月，一年更似一年，这些品质往往被时间冲淡。我常想，假如上帝给我三天光明，我最想看什么呢？或者我将怎样享受这份幸福呢？当我这样想的时候，也请你顺便怎样想象一下吧，请想想这个问题，假定你也只有三天光明，那么你会怎样使用你的眼睛呢？你最想让你的目光停留在什么地方？
21     </p>
22 </body>
23 </html>

View Code

　　效果

　　::before和::after：表示选取标签内的内容之前和之后的位置。before和after伪元素必须在样式中添加content属性，表示在选取标签内的内容之前或者之后添加content属性的属性值。需要注意before和after添加的content属性值是包含在标签内的，而且是以行内元素的形式存在的。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>属性选择器-测试</title>
 6     <style type="text/css">
 7         div::before {
 8             content: "歌曲：";
 9         }
10         div::after {
11             content: "-于果";
12         }
13     </style>
14 </head>
15 <body>
16     <div>
17         侧脸
18     </div>
19 </body>
20 </html>

View Code

　　效果

　　利用伪元素::after和::before添加图标字体的方式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪元素添加图标字体-测试</title>
 6     <style>
 7     @font-face {
 8       font-family: 'icomoon';
 9       src:  url('fonts/icomoon.eot?hrstq9');
10       src:  url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
11             url('fonts/icomoon.ttf?hrstq9') format('truetype'),
12             url('fonts/icomoon.woff?hrstq9') format('woff'),
13             url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
14       font-weight: normal;
15       font-style: normal;
16     }
17     div::after {
18         content: "\e947";
19     }
20     div {
21         font-family: 'icomoon';
22     }
23     </style>
24 </head>
25 <body>
26     <div></div>
27 </body>
28 </html>

View Code

　　其中content属性值为：

　　CSS3盒子模型

　　css2中盒子模型，添加padding或者border会改变盒子自身的大小，css3中添加box-sizing:border-box，盒子大小不会发生改变，盒子的内容大小会适当缩减。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css3盒子模型-测试</title>
 6     <style>
 7         /*css2盒子模型*/
 8         div {
 9             width: 100px;
10             height: 100px;
11             padding: 20px;
12             border: 5px solid skyblue;
13             background-color: lightgreen;
14             /*box-sizing: border-box;*/
15         }
16     </style>
17 </head>
18 <body>
19     <div></div>
20 </body>
21 </html>

View Code

　　效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css3盒子模型-测试</title>
 6     <style>
 7         /*css3盒子模型*/
 8         div {
 9             width: 100px;
10             height: 100px;
11             padding: 20px;
12             border: 5px solid skyblue;
13             background-color: lightgreen;
14             box-sizing: border-box;
15         }
16     </style>
17 </head>
18 <body>
19     <div></div>
20 </body>
21 </html>

View Code　　

　　效果

　　注意：当指定box-sizing:content-box，即为css2盒子模型。

　　有意思的小实例

　　实例一

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         /*图片鼠标经过外加边框，不改变盒子大小*/
 8         div {
 9             width: 632px;
10             height: 340px;
11             position: relative;
12             border-radius: 10px;
13             overflow: hidden;
14         }
15         div:hover::after {
16             content: "";
17             position: absolute;
18             width: 100%;
19             height: 100%;
20             top: 0;
21             left: 0;
22             border: 20px solid rgba(255, 255, 255, 0.5);
23             box-sizing: border-box;
24         }
25     </style>
26 </head>
27 <body>
28     <div>
29         <img src="mi.jpg" alt="">
30     </div>
31 </body>
32 </html>