相邻兄弟选择器、子选择器、兄弟选择器等用法

1、相邻兄弟选择器、子选择器、兄弟选择器等用法前言：我们在码代码的时候，常常会碰到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特别的是选取第几个元素添加或删除样式，下面记录css挑选器中频繁的挑选器：相邻兄弟挑选器（+）、子挑选器（>）、兄弟挑选器（——）、first-child、：last-child、：nth-child（）、：nth-last-child（）的使用。相邻兄弟挑选器（+）相邻兄弟挑选器可挑选紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。器。在学习上有什么疑问随时

2、可以找我我，与大家共享互联网web前端实战操作，无论你是否有基础，我都欢迎。点：前端技术共享相邻兄弟挑选器h1+pcolor:red;hello word!hello word!hello word!hello word!hello word!hello word!hello word!效果图如下：兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。注重这里的’+’的意义跟’and’意义不一样，兄弟挑选器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。固然这个也会

3、循环查找，即当两个兄弟元素相同时，会再一次循环查找：示例：li + li color:red;list item 1list item 2list item 3可以看出第一个li字体色彩没有变红，其次个和第三个元素字体变红，这就是由于第三个li是其次个li的兄弟元素，所以也会应用样式。兄弟挑选器（——）作用是查找某一个指定元素的后面的全部兄弟结点。示例代码：h1 —— pcolor:red;12345效果展示：后代挑选器（包含挑选器）可以挑选某元素后代的元素（子子孙孙元素）子挑选器（>）只能挑选作为某元素儿子

4、元素的元素，不包括孙元素、曾孙元素等等等。后代挑选器，子挑选器和相邻兄弟挑选器结合用法示例：请看下面这个挑选器：html > body table + ul margin-top:20px;这个挑选器说明为：挑选紧接在 table 元素后浮现的第一个相邻兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。：first-child 挑选器li:first-childbackground:yellow;咖啡茶可口可乐咖啡茶可口可乐效果图值得注重的是，假如其父元素的第一个元素（p）不是该指定类型元素（li），则第一个元素不会有样式l

5、i:first-childbackground:yellow;测试咖啡茶可口可乐效果图：last-child挑选器：last-child 挑选器匹配属于其父元素的最后一个子元素的每个元素。提醒：p:last-child 等同于 p:nth-last-child（1）。eg：指定属于其父元素的最后一个子元素的 p 元素的背景色：p:last-childbackground:ff0000;这是标题第一个段落。其次个段落。第三个段落。第四个段落。第五个段落。效果：解释：p标签的父元素是body，body标签中最后一个p元素是第五个段落：nth-child（）：nth-child（） 挑选器，该挑选器

6、选取父元素的第 n 个子元素，与类型无关。p:nth-child（2）background:ff0000;这是标题第一个段落。其次个段落。第三个段落。第四个段落。注释：internet explorer 不支持 :nth-child（） 挑选器。：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-chil

7、d（-n+3） 表示挑选列表中的标签从0到3，即小于3的标签（这是标题第一个段落。测试其次个段落。第三个段落。第四个段落。第五个段落。效果图：nth-last-child（） 挑选器：nth-last-child（n） 挑选器匹配属于其元素的第 n 个子元素的每个元素，不论元素的类型，从最后一个子元素开头计数。n 可以是数字、关键词或公式。提醒：请参阅 :nth-last-of-type（） 挑选器，该挑选器选取父元素的第 n 个指定类型的子元素，从最后一个子元素开头计数。css3 :not 挑选器：not（selector） 挑选器匹配非指定元素/挑选器的每个元素。扩展菜单栏右边框的实现办法有多种，结合上面介绍的挑选器，实现办法分离如下：一、常规办法：。nav liborder-right:1px solid fff;。nav li:last-childborder-right-width:0px;二：结合相邻兄弟挑选器（+）。nav li + liborder-left:1px solid fff;三、结合兄弟挑选器（——）。nav li:first-child &md