CSS3
1.选择器
属性选择器
//其中attr不一定是class，也可以是name，href，id，type。。。。
/*选择具有att属性的E元素*/
.con p[class]{
background: pink;
}
/*选择具有att属性且属性值等于val的E元素。*/
.con p[class="two"]{
color: white;
}
/*选择具有att属性且属性值为以val结尾的字符串的E元素。*/
.con p[class$="one"]{
color: deepskyblue;
}
/*选择具有att属性且属性值为以val开始的字符串的E元素。*/
.con p[class^="d"]{
text-decoration: line-through;
}
/*选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。*/
.con p[class~="dail"]{
font-size: 20px;
}
/*选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择。*/
.con p[class|="three"]{
color: white;
}
/*选择具有att属性且属性值为包含val的字符串的E元素。*/
.con p[class*="re"]{
color: white;
}伪类选择器
E:nth-child(n) { sRules }
/*匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。*/
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:#000;} /* 奇数 */
E:nth-of-type(n) { sRules }
/*匹配同类型中的第n个同级兄弟元素E。*/
E:empty { sRules }
/*匹配没有任何子元素（包括text节点）的元素E。*/仅仅利用选择实现样式
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.caleder{
width: 500px;
padding: 10px;
box-sizing: border-box;
margin: 100px auto;
color: #444;
font-size: 16px;
border: 1px solid #eee;
text-align: center;
}
.caleder div:first-child p:first-child{
border-bottom: 1px solid #eee;
line-height: 56px;
background: deepskyblue;
color: white;
padding-bottom: 4px;
}
.caleder span{
display: inline-block;
width: 60px;
}
.caleder div:nth-of-type(2) p:nth-child(2n){
font-size: 12px;
color: #ccc;
border-bottom: 1px solid #eee;
line-height: 20px;
}
.caleder div:nth-of-type(2) p:last-child{
border: none;
}
.caleder div:nth-of-type(2) p:nth-of-type(1) span:nth-child(-n+3){
color: #ccc;
}
.caleder div:nth-of-type(1) p:nth-child(1) span:nth-child(1){
color: red;
}
.caleder div:nth-of-type(1) p:nth-child(1) span:nth-child(7){
color: red;
}
.caleder div:nth-of-type(2) p:nth-child(-2n+9) span:nth-child(1){
color: red;
}
.caleder div:nth-of-type(2) p:nth-child(-2n+7) span:nth-child(7){
color: red;
}
.caleder div:nth-of-type(2) p:nth-child(4) span:nth-child(2){
color: red;
}
.caleder div:nth-of-type(2) p:nth-child(8) span:nth-child(3){
color: red;
}
.caleder div:nth-of-type(2) p:nth-last-of-type(2) span:nth-child(n+5){
color: #ccc;
}
</style>
</head>
<body>
<div class="caleder">
<div>
<p><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></p>
</div>
<div>
<p><span>30</span><span>31</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
<p><span>十一</span><span>十二</span><span>十三</span><span>十四</span><span>十五</span><span>十六</span><span>十七</span></p>
<p><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></p>
<p><span>十八</span><span>立冬</span><span>二十</span><span>廿一</span><span>廿二</span><span>廿三</span><span>廿四</span></p>
<p><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span></p>
<p><span>廿五</span><span>廿六</span><span>廿七</span><span>廿八</span><span>廿九</span><span>寒衣节</span><span>初二</span></p>
<p><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span></p>
<p><span>初三</span><span>初四</span><span>小雪</span><span>初六</span><span>初七</span><span>初八</span><span>初九</span></p>
<p><span>27</span><span>28</span><span>29</span><span>30</span><span>1</span><span>2</span><span>3</span></p>
<p><span>初十</span><span>十一</span><span>十二</span><span>十三</span><span>艾滋病日</span><span>下元节</span><span>十六</span></p>
</div>
</div>
</body>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.11.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录