(+)相邻兄弟选择器
+选择器定义
+，相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
+选择器代码示例1
html示例
<p>这里是第一个p标签</p>
<p>这里是第二个p标签</p>
<h2>标题H2</h2>
<p>这里是第三个p标签</p>
<p>这里是第四个p标签</p>
<p>这里是第五个p标签</p>css样式
h2+p {color: red; }运行效果
+选择器代码示例2
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>li + li {color:red;}运行效果：
分析： 一开始特别纳闷为啥“List item 2”和“List item 3”都被选中了~~~
首先分析选择器样式：li+li{}，字面意思是选取所有位于li标签后的第一个li元素
- 很显然第一个li不会被选中，因为它前面不是li
- 第二个li会被选中，因为它是第一个li标签紧邻的li标签
- 第三个li也会被选中，因为第三个li标签的上一个标签也是li标签，也满足li+li{}的条件：li标签后的第一个li标签
正因为css选择器的样式为li+li{}，所以代码中的li标签就可以一直套用这个“公式”。
注：前端面包屑导航中经常用到该选择器。
（~）兄弟选择器/又称匹配选择器
~选择器定义
作用是查找某一个指定元素的后面的所有兄弟结点
代码示例1
<style>
h2 ~ p {color: red; }
</style>
<body>
<p>这里是第一个p标签</p>
<p>这里是第二个p标签</p>
<h2>标题H2</h2>
<p>这里是第三个p标签</p>
<p>这里是第四个p标签</p>
<p>这里是第五个p标签</p>
</body>运行结果
通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的（特殊情况：循环多个）。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
(>)子选择器
>子选择器定义
只能选择作为某元素儿子元素的元素（直接子元素），不包括孙元素、曾孙元素等等等。
代码示例1
<style>
/*设置默认颜色黑色*/
.item{color: #000}
/*子选择器修改颜色*/
.demo > div.item {color: red; }
</style>
<body>
<div class="demo">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3
<div class="item">3-1</div>
</div>
<div class="item">item 4</div>
</div>
</body>运行结果
:first-child
:first-child定义
用于选取属于其父元素的首个子元素的指定选择器
嗯，乍一看好像说的不是很明白，因此这个选择器很容易让人误解，通常会有两种误解：
- 误解一：认为E:first-child选中E元素的第一个子元素。
- 误解二：认为E:first-child选中E元素的父元素的第一个E元素。
正确的理解应该是：只要E元素是它的父级的第一个子元素，就选中。它需要同时满足两个条件，一个是“第一个子元素”，另一个是“这个子元素刚好是E”。
代码示例1
<style>
span:first-child{color: red;}
p:first-child{color: blue;} /*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/
i:first-child{color: orange;}
</style>
<body>
<div class="demo">
<div>.demo的第一个子元素是div</div>
<!--第一个span元素是它的父级P元素的第一个span，颜色变红色-->
<p>第一个段落P<span>第一个段落P#第一个span</span><span>第一个段落P#第二个span</span></p>
<!--第一个i元素是它的父级a元素的第一个i，颜色变橙色-->
<a>一个链接<i>第一个i元素</i></a>
<br/>
<!--第二个i元素是它的父级a元素的第一个i，颜色变橙色-->
<a>另一个链接<i>另一个链接#第二个i元素</i></a>
<br/>
<a>一个链接</a>
</div>运行结果
:nth-child(n)
:nth-child(n)定义
该选择器选取父元素的第 N 个子元素，与类型无关
:nth-child(n)的详细用法：
- 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个标签
代码示例1
<style>
p:nth-child(2)
{
background:#ff0000;
}
</style>
<body>
<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.</p>
</body>运行结果
:nth-of-type(n)
:nth-of-type(n)定义
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，与元素类型有关
代码示例
<style>
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>运行结果
属性选择器
属性选择器定义
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
代码示例1
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<h1 title="student hello">Hello W3School students!</h1>
</body>运行结果：
表单属性选择示例
input[type="text"] {
width:150px;
display:block;
}
input[type="buttom"]
{
width:120px
}
更多属性选择器使用参考：CSS 属性选择器 | 菜鸟教程
https://blog.xqlee.com/article/2506111407431178.html
评论
相关文章
依赖说明tabler icons 3.11.0 （基于webfont模式实现）fontIconPicker 3.1.1jquery 3.6.0 实现效果打开选择
JavaScript/jquery选择同级兄弟节点选择上下级节点方法<script>l;function js_selector() {var s= documen
在css中有有一下几种换行策略:1. word-break:break-all;只对英文起作用，以字母作为换行依据（既，如果一个单词在换行时比较长会自动拆分单词
在直接进入MongoDB 的基础知识之前，我们应该尝试了解对No-SQL 数据库本身的需求
StandardAnalyzer自带的标准分词器源码示例 public static void main(String[] args) throws IOExc