css3新增属性

1 CSS3 的选择器

1.1 基本选择器

tagName
.className
#idName
*
slector,selector,selector

 

1.2 层级选择器

selector1 selector2     后代
selectoer1>selectoer2   子元素
selector1+selector2     紧邻在后面的一个兄弟元素
selector1~selector      后面所有兄弟元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3选择器</title>
 6     <style>
 7         li {
 8             width: 500px;
 9             padding: 10px;
10             margin-top:10px;
11         }
12         .item {
13             border: 1px solid red;
14         }
15         .item+li{
16             border:2px solid green;
17         }
18         .item~li{
19             border:2px solid orange;
20         }
21 
22     </style>
23 </head>
24 <body>
25     
26     <ul>
27         <li>1Lorem ipsum dolor sit amet.</li>
28         <li class="item">2Lorem ipsum dolor sit amet.</li>
29         <li>3Lorem ipsum dolor sit amet.</li>
30         <li>4Lorem ipsum dolor sit amet.</li>
31         <li>5Lorem ipsum dolor sit amet.</li>
32     </ul>
33 
34     <ol>
35         <li>Lorem ipsum dolor sit amet.</li>
36         <li>Lorem ipsum dolor sit amet.</li>
37         <li>Lorem ipsum dolor sit amet.</li>
38     </ol>
39 </body>
40 </html>
兄弟元素选择器


1.3 属性选择器


selector[attr]          包含指定的属性
selector[attr=value]    指定属性的值
selector[attr^=value]   属性值以value开头
selector[attr$=value]   属性值以value结束
selector[attr*=value]   属性值包含value
selector[][][]          多个属性选择器


    

  • 

    属性选择器优先级 同 class
    

    • 







 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性选择器</title>
 6     <style>
 7         #box img {
 8             width:100px;
 9         }
10         
11         /*有title属性的img元素*/
12         img[title] {
13             border:2px solid green;
14         }
15         /*title属性值是hello 的img元素*/
16         img[title="hello"] {
17             border:2px solid red;
18         }
19         /*title的属性值 以hello开头*/
20         img[title^="hello"] {
21             border: 2px solid black;
22         }
23         /*alt属性以a结尾的 img元素*/
24         img[alt$="a"] {
25             border: 5px solid purple;
26         }
27         /*alt属性值包含h 的img元素*/
28         img[alt*="h"]{
29             border: 5px solid pink;
30         }
31         
32         /*了解  title属性值中 有空格隔开的hello 的img元素*/
33         img[title~="hello"] {
34             border:10px solid blue;
35         }
36         /*了解  title属性值中以world开头，后面跟-  的img元素*/
37         img[title|='world'] {
38             border: 10px solid skyblue;
39         }
40         
41 
42         .item[name] {
43             color: red;
44         }
45 
46         /*多个属性作为条件*/
47         /* title属性值包含hello， 并且有alt属性 的img元素*/
48         img[title*='hello'][alt] {
49 
50         }
51     
52     </style>
53 </head>
54 <body>
55     <div id="box">
56         <img src="../../dist/images_one/10.jpg" alt="lala" >
57         <img src="../../dist/images_one/9.jpg" title="world-hello" id="myImg" alt="wohao">
58         <img src="../../dist/images_one/8.jpg" title="hello world" alt="nihoa">
59     </div>
60 
61     <p class="item">Lorem ipsum dolor sit amet.</p>
62     <p class="item" name="haha">Lorem ipsum dolor sit amet.</p>
63     <p class="item">Lorem ipsum dolor sit amet.</p>
64     <p class="item">Lorem ipsum dolor sit amet.</p>
65 </body>
66 </html>



属性选择器


 


1.4 伪类选择器


/*语法*/
selector:伪类 {
   
}


 


:link     未访问的超链接
:visited  访问过的超链接
:hover    鼠标悬停 任意元素
:actived  激活状态的超链接
​
:focus    获得焦点时






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类选择器</title>
 6     <style>
 7         a {
 8             font-size: 30px;
 9         }
10         
11         /*设置超链接 在不同状态时的颜色*/
12 
13         /*未访问过的*/
14         a:link {
15             color: green;
16         }
17         /*访问过后*/
18         a:visited {
19             color: yellow;
20         }
21         /*鼠标悬停*/
22         a:hover {
23             color: red;
24         }
25         /*激活状态 鼠标按下时*/
26         a:active {
27             color: blue;
28         }
29         /* link visited hover active */
30         /* love hate  又爱又恨 */
31 
32         
33         .list {
34             list-style: none;
35             margin: 0;
36             padding: 0;
37         }
38         .list li {
39             width: 600px;
40             padding: 10px;
41             margin-top:10px;
42             border: 1px solid #999;
43         }
44         /*鼠标悬停*/
45         .list li:hover {
46             background: pink;
47             color: #fff;
48             border:1px dashed #999;
49         }
50 
51 
52         /*获取焦点*/
53         .user-input {
54             width: 300px;
55             height: 40px;
56             border: 1px solid #ccc;        
57         }
58         .user-input:focus {
59             border: 1px dashed orange;
60             outline: none;
61         }
62     </style>
63 </head>
64 <body>
65     <h1>伪类</h1>
66     <hr>
67 
68     <div class="link-group">
69         <a href="http://www.baidu.com">百度</a> <br>
70         <a href="http://www.qq.com">QQ</a> <br>
71         <a href="http://www.hao123.com">123</a>
72     </div>
73 
74     <ul class="list">
75         <li>Lorem ipsum dolor sit amet.</li>
76         <li>Lorem ipsum dolor sit amet.</li>
77         <li>Lorem ipsum dolor sit amet.</li>
78         <li>Lorem ipsum dolor sit amet.</li>
79         <li>Lorem ipsum dolor sit amet.</li>
80     </ul>
81 
82     <hr>
83     <input type="text" class="user-input">
84 
85 </body>
86 </html>



css3选择器-伪类


 


:first-child
:last-child
:nth-child()    指定数字，也可以指定关键字"odd", "even"
:nth-last-child
:only-child
​


 






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>结构伪类选择器</title>
 6     <style>
 7         .list {
 8             width: 500px;
 9         }
10         .list li {
11             margin-top: 5px;
12             border: 1px dashed black;
13             padding: 10px;
14             background: #fff;
15         }
16         
17         /* 获取所有满足前面选择器的元素   从里面筛选出（自己是兄弟元素中的第一个）*/
18         .list li:first-child {
19             background: pink;
20         }
21         .list li:last-child {
22             background: orange;
23         }
24         .list li:nth-child(2) {
25             background: #ccc;
26         }
27         .list li:nth-last-child(2) {
28             background: skyblue;
29         }
30         .list li:only-child {
31             background: red;
32         }
33         
34 
35 
36         .news-list {
37             width: 600px;
38         }
39         .news-list p {
40             margin:0;
41             padding: 20px;
42             border: 1px solid #ccc;
43         }
44         /*奇数行变色*/
45         .news-list p:nth-child(odd) {
46             background: #ccc;
47         }
48         /*偶数行变色*/
49         .news-list p:nth-child(even) {
50             background: #eee;
51         }
52 
53     </style>
54 </head>
55 <body>
56     <h1>伪类 结构</h1>
57     <hr>
58 
59     <ul class="list">
60         <li>Lorem ipsum dolor sit amet.</li>
61         <li>Lorem ipsum dolor sit amet.</li>
62         <li>Lorem ipsum dolor sit amet.
63             <ol>
64                 <li>12345667</li>
65                 <li>12345667</li>
66                 <li>12345667</li>
67                 <li>12345667</li>
68             </ol>
69         </li>
70         <li>Lorem ipsum dolor sit amet.
71             <ul>
72                 <li>你好你好 独生子女</li>
73             </ul>
74         </li>
75         <li>Lorem ipsum dolor sit amet.</li>
76         <li>Lorem ipsum dolor sit amet.</li>
77     </ul>
78 
79     <hr>
80 
81     <div class="news-list">
82         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
83         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
84         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
85         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
86         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
87         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
88     </div>
89 </body>
90 </html>



子元素选择器


 


 



:fist-of-type
:last-of-type
:nth-of-type()      指定数字，也可以指定关键字"odd", "even"
:nth-last-of-type()
:only-of-type()


 






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类</title>
 6     <style>
 7         .newslist {
 8             margin: 100px auto;
 9             width: 800px;
10         }
11 
12         .item,p{
13             margin: 10px 0;
14             padding: 10px;
15             border: 1px dashed orange;
16         }
17 
18         .newslist p:last-of-type{
19             background: pink;
20         }
21         .newslist .item:first-of-type {
22             background: red;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="newslist">
28         <p>Lorem ipsum dolor sit amet.</p>
29         <div class="item">Lorem ipsum dolor sit amet.</div>
30         <p>Lorem ipsum dolor sit amet.</p>
31         <p>Lorem ipsum dolor sit amet.</p>
32         <div class="item">Lorem ipsum dolor sit amet.</div>
33         <p>Lorem ipsum dolor sit amet.</p>
34         <p>Lorem ipsum dolor sit amet.</p>
35         <div class="item">Lorem ipsum dolor sit amet.</div>
36     </div>
37     
38 </body>
39 </html>



css选择器伪类-of-type


 


 


1.5 伪元素选择器


::first-letter   第一个字
::first-line     第一行
::before         最前面插入一个子元素
::after         最后面追加一个子元素


 






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪元素选择器</title>
 6     <style>
 7         .message {
 8             width: 400px;
 9             padding: 10px;
10             border: 1px solid #ccc;
11         }
12         .message::first-letter {
13             font-size: 3em;
14         }
15         .message::first-line {
16             color: pink;
17         }
18 
19         .message::before {
20             content:'你好';
21         }
22         .message::after {
23             content:'大家好';
24             display: block;
25             width: 200px;
26             height: 100px;
27             border: 1px solid red;
28             margin: 10px;
29         }
30 
31 
32         .nav li {
33             float: left;
34         }
35         .clearfix::after {
36             content:'';
37             display: block;
38             clear:both;
39         }
40 
41         .message::selection {
42             background: pink;
43         }
44 
45         input::placeholder {
46             color: red;
47         }
48 
49     </style>
50 </head>
51 <body>
52 
53     <input type="text" placeholder="请输入用户名">
54     
55     <p class="message">
56         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam laborum accusamus voluptate harum, ipsam, maiores perferendis non culpa, distinctio esse voluptatibus mollitia illum maxime ratione nisi, et. Vitae, at?
57     </p>
58     hr
59     <p>
60         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur aliquid velit perspiciatis. Natus quas eos ipsa excepturi at deleniti alias commodi delectus ad, itaque. Ea itaque molestiae, tenetur? Aliquam!
61     </p>
62 
63 
64     <hr>
65 
66     <div class="header">
67         <h1>Header</h1>
68     </div>
69     <div class="nav clearfix">
70         <ul>
71             <li>首页</li>
72             <li>首页</li>
73             <li>首页</li>
74             <li>首页</li>
75             <li>首页</li>
76         </ul>
77     </div>
78     
79     
80 
81     <div class="main clearfix">
82         <h1>main</h1>
83     </div>
84 </body>
85 </html>



伪元素选择器


 


 


补充：纯css实现下拉菜单






  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>纯CSS实现下拉菜单</title>
  6     <style>
  7         * {
  8             padding: 0;
  9             margin: 0;
 10         }
 11         body {
 12             font:14px "Microsoft YaHei",sans-serif;
 13         }
 14         ul {
 15             list-style: none;
 16         }
 17         .container {
 18             margin: 0 auto;
 19             width: 1000px;
 20         }
 21 
 22         .nav {
 23             /*margin-top: 60px;*/
 24             width: 100%;
 25             height: 40px;
 26             line-height: 40px;
 27             background: #333;
 28         }
 29         
 30         /*一级菜单*/ /*该选择器会选择 所有li*/
 31         .nav li {
 32             float: left;
 33             position: relative;
 34         }
 35 
 36         /*一级菜单*/
 37         .nav li a {
 38             display: block;
 39             width: 100px;
 40             text-align: center;
 41             color: #fff;
 42             text-decoration: none;
 43         }
 44 
 45         /*二级菜单*/
 46         .nav li ul li a {
 47             color: #333;
 48         }
 49         .nav li ul li {
 50             /*覆盖前面设置  */
 51             float: none;
 52         }
 53         .nav li ul {
 54             /*border: 1px solid #ccc;
 55             border-top: none;*/
 56             background: #fff;
 57             /*二级菜单先隐藏*/
 58             display: none;
 59 
 60             /*绝对定位*/
 61             position: absolute;
 62             left:0;
 63             top:;
 64         }
 65 
 66         
 67         /*划过那个li 哪个li就变红*/
 68         .nav li:hover {
 69             background: red;
 70         }
 71         .nav li:hover ul{
 72             display: block;
 73         }
 74 
 75         /*设置banner*/
 76         .banner img {
 77             width: 100%;
 78         }
 79     </style>
 80 </head>
 81 <body>
 82     
 83     <div class="nav">
 84         <div class="container">
 85             <ul>
 86                 <li><a href="#">首页</a></li>
 87                 <li>
 88                     <a href="#">博客</a>
 89                     <ul>
 90                         <li><a href="#">同志博客</a></li>
 91                         <li><a href="#">小同志博客</a></li>
 92                         <li><a href="#">老同志博客</a></li>
 93                         <li><a href="#">大同志博客</a></li>
 94                     </ul>
 95                 </li>
 96                 <li>
 97                     <a href="#">论坛</a>
 98                     <ul>
 99                         <li><a href="#">同志论坛</a></li>
100                         <li><a href="#">红色论坛</a></li>
101                         <li><a href="#">黄色论坛</a></li>
102                         <li><a href="#">绿色论坛</a></li>
103                     </ul>
104                 </li>
105                 <li><a href="#">关于我们</a></li>
106                 <li>
107                     <a href="#">举报我们</a>
108                     <ul>
109                         <li><a href="#">涉黄</a></li>
110                         <li><a href="#">涉黑</a></li>
111                         <li><a href="#">涉赌</a></li>
112                         <li><a href="#">涉毒</a></li>
113                     </ul>
114                 </li>
115             </ul>
116         </div>
117     </div>
118 
119 
120     <div class="banner">
121         <img src="../../dist/images_one/meinv02.jpg" alt="">
122     </div>
123 </body>
124 </html>



纯css实现下拉菜单


 


2 CSS3 基础


2.1 浏览器私有前缀


-weibkit-*    chrome/safari
-moz-*       firefox
-ms-*         ie
-o-*         opera


 






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3</title>
 6     <style>
 7         html {
 8             font-size:100px;
 9         }
10         body {
11             font-size: 16px;
12         }
13         #box {
14             width: 300px;
15             height: 200px;
16             border: 1px solid #ccc;
17             -webkit-border-radius:10px;
18             -moz-border-radius:10px;
19             -ms-border-radius:10px;
20             -o-border-radius:10px;
21             border-radius: 10px;
22 
23             background:url('../../dist/images_one/8.jpg');
24         }
25 
26         #box p{
27             padding: 20px;
28             background: rgba(10,10,10,0.5);
29         }
30 
31         .item {
32             /*width: 400px;*/
33             width: 50vw; /*窗口宽度的一半*/
34             height: 50vh;
35             border: 1px solid #ccc;
36             background-image: linear-gradient(to right, red, yellow,green);
37         }
38         .item {
39             font-size: 12px;
40         }
41         .item p {
42             font-size: 1em;
43             font-size: 1rem;
44         }
45     </style>
46 </head>
47 <body>
48     <div id="box">
49         <p>Lorem ipsum dolor sit amet.</p>
50     </div>
51 
52     <hr>
53 
54     <div class="item">
55         <p>
56             Hello，小侯
57         </p>
58     </div>
59 </body>
60 </html>



css3基础


 


2.2 CSS3 新增的颜色


rgba(r,g,b,不透明度)  不透明度：0~1 小数， 数越大，越不透明


 


2.3 CSS3新增长度单位


px
em      默认字体大小的倍数
rem     根元素字体大小的倍数
vw      窗口宽度分成100份  50vw
vh      窗口高度分成100份


 


2.4 CSS3新增属性


# 重新设置 盒子模型的规则
box-sizing: content-box(默认) / border-box （width/height盒子的宽高）
​
# 外轮廓  在border的外面 不算盒子
outline: 
outline-style
outline-color
outline-width
​
# 不透明度
opacity 0~1 小数


 






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3新增属性</title>
 6     <style>
 7         body {
 8             background: url('../../dist/images_one/8.jpg')
 9         }
10         #box {
11             width:200px;
12             height:200px;
13             padding: 50px;
14             border: 1px solid green;
15             background: red;
16             
17             /*改变盒子模型的规则 */
18             box-sizing:border-box;
19 
20             resize: both;
21 
22             /*外轮廓*/
23             outline:1px red solid;
24 
25             font-size:30px;
26             font-weight: bold;
27 
28             opacity: .5;
29         }
30 
31         input {
32             outline: none;
33         }
34     </style>
35 </head>
36 <body>
37     <div id="box">Hello</div>
38 
39     <input type="text">
40 </body>
41 </html>



css3新增属性


 


2.3 设置圆角


border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius


 






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3边框</title>
 6     <style>
 7         .item {
 8             display: inline-block;
 9             width: 200px;
10             height: 200px;
11             border: 1px solid red;
12 
13         
14         }
15         .item01 {
16             border-radius: 100px;
17         }
18 
19         .item02 {
20             /*左上角*/
21             border-top-left-radius: 100px;
22         
23             /*右下角*/
24             border-bottom-right-radius: 20px;
25         }
26 
27         .item03 {
28             /*border-radius:100px / 50px;*/
29             /*border-top-left-radius: 100px 20px;*/
30 
31             /*border-radius:10px 40px 60px 100px;*/
32             border-radius:50px 10px / 100px 20px;
33         }
34     </style>
35 </head>
36 <body>
37     
38     <div class="item item01"></div>
39     <div class="item item02"></div>
40     <div class="item item03"></div>
41 </body>
42 </html>



css3设置圆角


 


 补充：颜色不设置默认为透明






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #box {
 8             width: 200px;
 9             height: 200px;
10             background: pink;
11         }
12 
13         #inner {
14             width: 100px;
15             height: 100px;
16             border: 2px solid red;
17             /*background: #fff;*/
18         }
19     </style>
20 </head>
21 <body>
22     <div id="box">
23         
24         <div id="inner"></div>
25     </div>
26 </body>
27 </html>



默认背景颜色


 


 







            

            
posted @ 
2018-08-03 15:23 
Roc_Atlantis 
阅读(284) 
评论(0) 
编辑 
收藏 
举报