欢迎访问畅维网络官网,我们将为您提供专业的网站建设服务!
咨询电话:0531-88162305 QQ:点击这里给我发消息
当前位置:首页 > 网站学院 > 网站技术

重读css选择器

 

1. 子元素选择器

可以只选择某个元素的子元素。必须是连续对应的元素哦。~上例子。

css

p > b{color:red;}

html

<p>这是一句话<b>我变红色了</b></p>
<p>这是一句话<em><b>我没变颜色</b></em></p>

例子中是样式设置的是p元素里的b元素,但是跟后代选择器不同,并不是在p元素中的所有b元素都应用上样式。只有和p元素有连续关系的b元素才可以。因此第一句中的b颜色改变了。而第二句中元素出现顺序是p、em、b。中间有个em,所以这个b元素不会变色。

2. 相邻兄弟选择器

这个是选同级元素的,不光可以写一个“+”号哦,可以n个“+”,样式始终加载在最后一个元素上。上例子~

html

<h1>Title</h1>
<p>First line</p>
<p>Second line</p>
<p>Third line</p>

css

h1+p+p{color:red;}

例子中选择的是第二个p元素,即Second line会变红色。别的p不会收到影响。

3. 伪类first-child 首个子对象

这个需要注意的是样式加载的对象。哪个元素后面跟:first-child,哪个是应用样式的元素。

p:first-child 指第一个p元素;

p > b:first-child 指的是<P>元素内第一个<b>元素

4. 伪元素first-line、first-letter、before、after

:first-line是针对段落的第一行运用的样式,用的比较少;

:first-letter是针对第一个字运用的样式,常见于杂志,期刊,书籍里文章开篇第一个字,有时候会设计成大字号显示。

first-line、first-letter这俩个都需要注意都是针对块级元素的。

: before和 : after IE7不支持,现在还是不能用,遗憾。

(编辑:济南网站建设、济南网站建设公司:畅维网络)

鲁公网安备 37010502000788号

  • 扫一扫,关注微信公众号