認識CSS3新增選擇器和樣式

時間 2019-11-19

標籤認識 css3 css 新增選擇器樣式欄目 CSS 简体版

原文原文鏈接

前端之HTML5，CSS3（二）

　　CSS3新增選擇器和樣式

　　CSS3新增選擇器

　　結構僞類選擇器

　　:first-child：選取父元素中的第一個子元素的指定選擇器javascript

　　:last-child：選取父元素中的最後一個子元素的指定選擇器php

　　:nth-child(n)：選取父元素中的第n個子元素的指定選擇器，n取小於等於子元素個數的正整數。當n取n值表示選取父元素中全部子元素；n取2n表示選取父元素中全部偶數的子元素，等同於:nth-child(odd)；n取2n+1表示選取父元素中全部奇數的子元素，等同於:nth-child(odd)。　　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: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

　　效果html

　　屬性選擇器

　　基本語法：標籤[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

　　效果java

　　屬性選擇器中屬性能夠賦值，如div[class=demo]等同於類選擇器.demo，使用div[class^=start]表示class屬性值以start開頭的元素，div[class$=end]表示class屬性值以end結尾的元素，結合正則表達式更容易理解。python

 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

　　效果css3

　　僞元素選擇器

　　基本語法：標籤::僞元素 {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

　　效果ruby

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