css兄弟选择器(+ 和 ~)的使用和区别

时间: 2018-04-09阅读: 14023标签: 选择器

这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?


+ 选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 比如:

<style type="text/css">
    h1 + p {
        margin-top:50px;
        color:red;
    }
</style>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

效果图如下:


兄弟选择器只会影响下面的p标签的样式,不影响上面兄弟的样式。 

注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。 当然这个也会循环查找,即当两个兄弟元素相同时,会一次循环查找:  

<style type="text/css">
    li + li {
        color:red;
    }
</style>

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

效果如下:

  • List item 1
  • List item 2
  • List item 3

可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。  


 ~ 选择器 

作用是查找某一个指定元素的后面的所有兄弟结点。 示例代码:   

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>

<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>

运行结果如下:


1

2

3

4

5



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/603

CSS3 target 选择器_:target伪类的使用

arget作为目标伪类选择器,是css3中的新特性之一。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

CSS 选择器nth-child的几种用法

在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。

css选择器中:first-child与:first-of-type

css选择器中:first-child与:first-of-type是比较容易混淆的概念,这里用案例介绍它们具体的区别。:first-child 选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。

巧用CSS属性值正则匹配选择器

这3种属性选择器是字符匹配,而非单词匹配。其中,尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符,分别表示前匹配、后匹配和任意匹配。利用这些选择器,纯CSS就可以做出很炫酷的功能。

CSS 伪选择器 focus-within 介绍

CSS中的 :focus-within 伪选择器可有点“不寻常”,尽管它的名称看上去很简单,而且相当直观。但它的解释是:选择一个包含具有:focus 的任何子元素的元素。有点绕是不是,但仔细读应该也能理解,下面通过具体的例子你就更能理解了

Sass 选择器函数

本节我们来看一下 Sass 中的选择器函数,选择器函数用于查看与处理选择器。selector-append() 函数用于将一个或多个选择器添加到第一个选择器的后面。selector-parse() 函数将字符串的选择符 selector 转换成选择器队列。

vue中能穿透组件的css选择器

如果父组件style设置了scoped,除了全局样式与子组件内部修改样式以外不受外部样式的影响,但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢?

jQuery选择器

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。不仅能简化代码,而且可以达到事半功倍的效果.jQuery的优点:1.简洁的语法,2.完善的事件处理机制

css怎么选择父元素下的某个元素?

css可以通过一些选择器来实现选择父元素下某个元素的效果。:first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)

vue 选择器_实现scoped深度作用选择器

vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深,例如影响子组件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!