CSS3-1

css3

1 学习前置条件：html + css2

2 概述

　　*历史　　

　　　　css3 就是层叠样式表的目前的最高版本，带来了许多新特性。如，圆角、渐变、过渡、动画、新布局(多列布局缩进盒子等)

// css 发展之初的这个设计，以至于css得以发展的如此之好。
// 遇到不认识的标签  它不会报错，并能让下面的代码继续起效。
haha {

}
// 无haha 标签，但是 p标签依旧有效
p {
hello: 122px;
font-size: 20px;//无hello元素，但是 font-size依旧有效。
}

* 兼容
　　http://html5test.com/ 在此内可以看看兼容的一些问题

css3更多用在移动端，移动端没有IE浏览器，PC端还要等段
时间才能完全使用

3 css3新增内容

* 选择器

关系选择器：

//1. 设置亲儿子的属性样式，孙子无用。   亲儿子  不是后代，IE7开始兼容
.wrap > p {
  color: red;  
}
//h2 标签的紧挨着的下一个 p 标签       下一个兄弟  IE7开始兼容
h2+p{
　　color: red;
}
//h4 标签后面的所有的兄弟 p 标签       同上
h4~p{
　　color: red;
}

属性选择器 //通过选择指定标签内的值来选择标签

1 img[src="img/3.png"]{
2   border:1px solid red;  
3 }

还可以 []直接选择，甚至可以 [][]

[src="img/3.png"]{

}

[src="img/3.png"][alt="aa"]{

}

还有以...开头的标签选择

 1 // ^ 表示以...开头的标签
 2 // $ 表示以...结尾的标签
 3 // * 表示含有...的标签
 4 // | 表示以...开头，并紧跟一个 - 的标签，等价于 [class^="para-"]
 5 // ~ 表示含有后面设置的类选择器名称的标签
 6 p[class^="para"]{
 7   color: red;  
 8 }
 9 p[class$="1"]{
10   font-size: 24px;  
11 }
12 p[class*="p"]{
13   background-color: yellow;  
14 }
15 p[class|="p"]{
16   background-color: yellow;  
17 }
18 p[class~="demo1"]{
19   text-decoration: underline;  
20 }
21 
22 <body>
23     <p class="para-1 demo1">段落</p>
24     <p class="para-2 demo1">段落</p>
25     <p class="para-3 demo2">段落</p>
26     <p class="para-4">段落</p>
27     <p class="pg1">段落</p>
28     <p class="pg2">段落</p>
29 </body>

儿子序选择器 (序号从1开始不是0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       /* 第一 必须是p  第二 一定是某个元素的第一个儿子 IE7兼容*/
       p:first-child {
           color: green; 
       }
       /*IE9兼容*/
       p:last-child {
            color: pink;
       }
       div p {
              width: 12px;
              height: 12px;
              background-color: #ccc;
       }
       /* 3 6 9 ...*/
       div p:nth-child(3n) {
              border-top: 2px solid red;
       }
       p:nth-child(3n) {
              width: 60px;
       }
       p:nth-last-child(4) {
              background-color: red;
       }
    </style>
</head>
<body>
    <p>111</p>
    <div>
        <p>222</p>
        <p>333</p>
    </div>
    <p>444</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>5555</p>
                        </li>
                        <li>
                            <p>6666</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br/>
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    *******************
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

伪类

伪元素

猜你喜欢