CSS选择子,兄弟选择,+和~

首先我得承认,做了web这么多年,虽然javascript还可以,但是css和美工确实还是在水与不是很水之间徘徊,如我等做个项目从UI上一个icon到数据库里一个字段的长度都要自己搞定的码工,花在UI上面的时间相对其他部分较长,也是最头痛,总是眼巴巴的期望个美女美工哈(¯﹃¯),总也盼不来。后来了解到International Big Mouse这个公司做web的同事也是没有美工的,心想美工莫非神人也。

ok废话不多说。

兄弟选择器有+和~

看下面的代码:

/>

<div class="test">
<h3>这是一个标题</h3>
<p>这是一个文字段落1</p>
<p>这是一个文字段落2</p>

<p>这是一个文字段落2.1</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落3</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落4</p>
<p>这是一个文字段落5</p>
</div>

样式 p+p{color:red;} 的效果

这是一个标题

这是一个文字段落1

这是一个文字段落2

这是一个文字段落2.1

这是一个标题

这是一个文字段落3

这是一个标题

这是一个文字段落4

这是一个文字段落5

样式p~p{color:red;} 的效果

这是一个标题

这是一个文字段落1

这是一个文字段落2

这是一个文字段落2.1

这是一个标题

这是一个文字段落3

这是一个标题

这是一个文字段落4

这是一个文字段落5

看到区别没:

p+p效果是先找到p,然后找其后面紧接着的p,这里的意思是说,这是一个文字段落3 这个p与这是一个文字段落1 这个p 就不是紧接着的关系,因为中间被一个标题打断了,而段落5相对于段落4同理。

p~p则不管这些,凡是第一个p后面的p元素,不管中间隔了几个其他元素,都会被此选择器选中。


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1