CSS3
设计理念
渐进增强 (progressive enhancement) : 开始只构建站点的最少特性,然后不断的针对浏览器追加功能
优雅降级 (graceful degradation) : 开始就构建站点的完整功能,然后针对浏览器测试和修复
CSS3选择器
div{
width: 400px;
margin: 0 auto;
border: 1px solid green;
padding: 20px;
}
span{
display:block;
}
div p {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
margin: 10px;
background: orange;
color: #fff;
font-size: 18px;
text-align: center;
font-weight: bold;
}
<body>
<div>
<span>111</span>
<span>222</span>
<p class="summer su">1</p>
<p class="summer">2</p>
<p class="summer-zmc">3</p>
<p class="p4 su">4</p>
<p class="summer-zmc summer">5</p>
<p class="su">6</p>
<p class="su-mmer">7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
</div>
<div class="a1" style="width: 100px;height: 100px; border:1px solid black">
<p>p1</p>
</div>
<div class="a1" style="width: 100px;height: 100px; border:1px solid black">
<p>p.1</p>
<span>span.1</span>
</div>
<div></div>
<a href="#div1">点击div1元素背景色变为粉色</a>
<div id="div1">
url地址里指向的目标元素,在CSS里用:target表示
url地址里指向的目标元素,在CSS里用:target表示
url地址里指向的目标元素,在CSS里用:target表示
</div>
</body>
结构选择器
- :nth-child(n)
div p:nth-child(1){ /*1.查找div的第一个子元素 2.子元素的标记名是否是p标签*/ background: red; }
- :nth-child(2n)/偶数元素/
div p:nth-child(2n){ /*1.查找div的偶数子元素 2.子元素的标记名是否是p标签(n从0开始)*/ background: blue; }
- :nth-child(2n+1)/奇数元素/
div p:nth-child(2n+1){ /*1.查找div的奇数子元素 2.子元素的标记名是否是p标签(n从0开始)*/ background: yellow; }
- :nth-of-type(n)
div p:nth-of-type(2){ background: pink; }
- :first-child
div :first-child{ background: purple; }
- :first-of-type
div p:first-of-type{ background: palegreen; }
- :last-child
div :last-child{ background: powderblue; }
- :last-of-type
div p:last-of-type{ background: green; }
- :only-child/只有一个子元素/
.a1 :only-child{ background: green; }
- only-of-type/同种标记名的子元素只有一个/
div :only-of-type{ background: grey; }
- :empty
div:empty{ height: 40px; width: 40px; background: black; }
否定选择器
- :not()
div p:not(.p4) { border-radius: 50%; }
属性选择器
- E[attr=val]
div p[class~="su"]{/*类名只能一个并且是su才满足*/ border-radius: 50%; }
- E[attr|=val] 只能等于val 或只能以val-开头
div p[class~="su"]{/*类名只能是su或者只能以su-开头才满足*/ border-radius: 50%; }
- E[attr*=val] 包含val字符串
div p[class~="su"]{/*类名含有su字符串就满足*/ border-radius: 50%; }
- E[attr~=val] 属性值有多个,其中有一个是val
div p[class~="su"]{/*可以有多个类名,其中一个是su就满足*/ border-radius: 50%; }
- E[attr^=val] 以val开头
div p[class^="su"]{/*以su开头就满足*/ border-radius: 50%; }
- E[attr$=val] 以val结尾
div p[class$="su"]{/*以su结尾就满足*/ border-radius: 50%; }
目标伪类选择器
- :target用来匹配url指向的目标元素
存在url指向该匹配元素时,样式效果才会生效
:target{ display: block; } #div1:target{ background: pink; }
- :target用来匹配url指向的目标元素
伪元素选择器
- : first-line 匹配第一行文本
#div1::first-line{ background: blue; }
- : first-letter 匹配第一个首字符
#div1::first-letter{ background: blue; }
- : before 和 : after DOM元素前后插入额外的内容
#div1::before{ content:"000"; color: green; } #div1::after{ content:"1111"; color: red; }