关于CSS 伪类及伪元素

CSS 属性：

font: bold 20px/30px Arial;
意思代表的是：font-weight: bold; font-size: 20px; line-height: 30px; font-family: Arail;

伪类和伪元素

伪类用:表示，有foucs , hover , active等
伪元素用::表示，有before , after
之所以有单冒号和双冒号表示，是为了区分伪类和伪元素，还有就是为了兼容IE

这里实现一种伪元素的效果

关于CSS 伪类及伪元素

如果我要实现文字两边线条的效果，怎么实现最好????

.banner_title::before, .banner_title::after {
content: '';
width: 15px;
height: 1px;
background: #1e88e5;
display: inline-block;
vertical-align: middle;
}

 .banner_title::before {
margin-right: 10px;
}
.banner_title::after {
margin-left: 10px;
}

首先为伪元素设置共同的横线样式部分，然后在单独对其进行左右边距的调整。
display: inline-block;是为了保持两条线和文字保持在同一行上，
vertical-align: middle;是为了和横线保持垂直居中，至此，效果已实现~

结构伪类选择器

:nth-child父元素的子元素，但必须满足两个条件才可以。其一是子元素，其二是此子元素刚好处在那个位置。意思就是：下面的子元素必须是相同的标签才可以。不可以包含别的标签。
:nth-of-type选择的是某父元素的子元素，而且这个父元素是指定的类型。意思就是：不是一样的标签样式依然可以选中元素的内容。
下面举个例子说明一下：

div class="post"
    h1 我是标题
    p 我是文章中的第一个段落
    p 我是文章中的第二个段落

.post>p:nth-child(2){ color: red; }/第一个段落变成了红色，但不是我们想要的效果/

.post>p:nth-of-type(2){ color: red; } /第一个段落变成了红色，c是我们想要的效果/

虽然:nth-child很常见，但很脆弱，随时会被其他的子元素挤出选择的范围。

而:nth-of-type虽然不常见，但在选择某种类型的子元素的时候，更稳定，更可靠。

秒客网

关于CSS 伪类及伪元素

相关文章