选择器与css的一些用法
1.选择器
例如：
<style>
div>p:first-child{
color: blue;
}
</style>
</head>
<body>
<div>
<p>01</p>
<p>02</p>
<p>03</p>
<p>04</p>
<p>05</p>
<p>06</p>
<p>07</p>
<p>08</p>
<p>09</p>
<p>10</p>
<span>我</span>
<a href="#">你</a>
</div>
</body>
1.1.div>p:first-chlid{
color:pink
}
代表div子元素是p的第一个
1.2.div>p:last-child{
color:pink
}
代表div子元素是p的最后一个
1.3.div>p:nth-child（n）{
color:pink
}
代表div子元素是p的第n个
1.4.div>p:nth-child（3n+1）{
color:pink
}
代表div子元素是p的第3n+1个（比如1,4,7....）,其他类似
1.5.div>p:nth-child（odd/even）{
color:pink
}
代表div子元素是p的奇数/偶数。
1.6.div>p:not（：first-child）{
color:pink
}
代表div子元素是p的除了第一个。
1.7.div :not（p）{
color:pink
}
代表div子元素除了p的子元素。2.emmet语法
例如：
div.box$$*10>a[href=#]{$$}
3.样式写出三角形
例如：
<style>
.sanjiao{
display: block;
height: 0;
width: 0;
border: 20px solid transparent;
border-bottom-color: red;
}
</style>
</head>
<body>
<span class="sanjiao"></span>
</body>
其中改变边框的方向就可以改变三角的朝向。本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.09.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录