原文链接: https://blog.csdn.net/qq_36699230/article/details/121041697

前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。

相邻兄弟选择器(+)

相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
器。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>
 
<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

效果图如下:

在这里插入图片描述

相邻兄弟只会影响下面的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>

![图片描述][1]

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

兄弟选择器(~)

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

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>

效果展示:
![图片描述][2]

后代选择器(包含选择器)

可以选择某元素后代的元素(子子孙孙元素)

子选择器(>)

只能选择作为某元素儿子元素的元素,不包括孙元素、曾孙元素等等等。

后代选择器,子选择器和相邻兄弟选择器结合使用示例:

请看下面这个选择器:

html > body table + ul {margin-top:20px;}

这个选择器解释为:选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

:first-child 选择器

li:first-child
{
background:yellow;
}
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可乐</li>
</ul>

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>

效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LraweVjq-1597820882615)(/img/bVbhEOE)]

值得注意的是,如果其父元素的第一个元素(p)不是该指定类型元素(li),则第一个元素不会有样式

li:first-child
{
background:yellow;
}
<ol>
  <p>测试</p>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>

效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i0WfhykI-1597820882618)(/img/bVbhESX)]

:last-child选择器

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示:p:last-child 等同于 p:nth-last-child(1)。

eg:指定属于其父元素的最后一个子元素的 p 元素的背景色:

p:last-child
{ 
background:#ff0000;
}
<body>
	<h1>这是标题</h1>
	<p>第一个段落。</p>
	<p>第二个段落。</p>
	<p>第三个段落。</p>
	<p>第四个段落。</p>
	<p>第五个段落。</p>
</body>

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I1Nly7iw-1597820882628)(/img/bVbhEUp)]

说明:p标签的父元素是body,body标签中最后一个p元素是第五个段落

:nth-child()

:nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关

p:nth-child(2)
{
background:#ff0000;
}
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>

:nth-child()的详细用法

nth-child(3) 表示选择列表中的第三个元素。

nth-child(2n)表示列表中的偶数标签,即选择第2、第4、第6……标签

nth-child(2n-1) 表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签

nth-child(n+3) 表示选择列表中的标签从第3个开始到最后(>=3)

nth-child(-n+3) 表示选择列表中的标签从0到3,即小于3的标签(<=3)

nth-last-child(3) 表示选择列表中的倒数第3个标签

:nth-of-type(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

p:nth-of-type(2)
{
background:#ff0000;
}
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<div>测试</div>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>

效果图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCl1bOki-1597820882636)(/img/bVbhEYD)]

:nth-last-child() 选择器

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。

n 可以是数字、关键词或公式。

提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。

CSS3 :not 选择器

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

更多css选择器请参考:CSS 选择器参考手册
http://www.w3school.com.cn/cssref/css_selectors.asp

csss属性选择器

选择器 示例 示例说明
[attribute] [target] 选择所有带有target属性元素
[attribute=value] [target=-blank] 选择所有使用target=”-blank”的元素
[attribute~=value] [title~=flower] 选择标题属性包含独立单词”flower”的所有元素
[attribute ^= language] [lang ^= en] [lang ^= en] 选择一个lang属性的起始值=”EN”的所有元素
[attribute $= language] [lang $= en] 选择一个lang属性的结尾值=”EN”的所有元素
[attribute *= language] [lang *= en] 选择一个lang属性的包含“EN”的所有元素

关于CSS属性选择器中“~=”和“*=”的区别

“value是完整单词” 类型的比较符号: ~= , |=

“value是拼接字符串” 类型的比较符号: *= , ^= , $=

[attribute~=value] 属性中包含独立的单词为value

[title~=flower]  
<img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分,只要能拆出来value这个词就行

[title~=flower]  
<img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

伪类选择器

在这里插入图片描述

伪元素选择器

在这里插入图片描述

伪类和伪元素的区别

  • 伪元素和伪类都是为了给一些特殊需求加样式,定义上基本一致。
  • 伪类像类选择器一样给已存在某个元素添加额外的样式;伪元素则是给自己虚拟的元素添加样式。

参考:https://segmentfault.com/a/1190000013737796

扩展:导航列多种实现方式

![图片描述][3]

菜单栏右边框的实现方法有多种,结合上面介绍的选择器,实现方法分别如下:

一、常规方法:

.nav li{
    border-right:1px solid #fff;
}
.nav li:last-child{
    border-right-width:0px;
}

二:结合相邻兄弟选择器(+)

.nav li + li{
    border-left:1px solid #fff;
}

三、结合兄弟选择器(~)

.nav li:first-child ~ li{
    border-left:1px solid #fff;
}

四、结合:not()选择器

.nav li:not(:last-child){
    border-right:1px solid #fff;
}

权重

总结排序:!important > 行内样式(style)>ID选择器 > 类选择器=伪类 > 元素=伪元素 > 通配符 > 继承 > 浏览器默认属性

原文地址:http://www.cnblogs.com/zx529/p/16862573.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性