first-letter和first-line的區別

本文轉載自查看原文 2019-06-21 19:48 719

1.first-letter和first-line都作用於塊級元；

2.first-letter:作用於第一行的首字符；

3.first-line：作用於第一行的所有字符；

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9        .parent {
10             height: 500px;
11             border: 1px solid #222;
12             display: flex;
13         }
14         
15         .left {
16             width: 200px;
17             border: 1px solid #ccc;
18             margin: 20px;
19             height: 200px;
20         }
21         
22         .left::first-letter{
23             color:red;
24             font-size: 24px;
25         }
26         .right {
27             border: 1px solid #ff4400;
28             margin:20px;
29             height: 200px;
30             flex: 1;
31         }
32         .right::first-line{
33             color:red;
34             font-size: 24px;
35         }
36     </style>
37 
38     <body>
39         <div class="parent">
40             <div class="left">
41                 <p>qwewwerwerwerer</p>
42             </div>
43             <div class="right">
44                 <p>dspojdiohudf</p>
45             </div>
46         </div>
47     </body>
48 
49 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js uppercase the first letter of string jQuery中:first，:first-child，first()的使用區別 First,FirstOrDefault,Single,SingleOrDefault的區別 jQuery過濾選擇器:first和:first-child的區別，CSS偽類:first-child EF三種編程方式的區別Database first ，Model first ，code first EF三種編程方式的區別Database first ，Model first ，code first Component series.line3D not exists.Load it first. First project Scrapy中get和extract_first的區別 css選擇器中:first-child與:first-of-type的區別