大家好,今天小编来为大家解答以下的问题，关于css选择器选择第一个子元素，css选中第二个元素这个很多人还不知道，现在让我们一起来看看吧！
一、CSS如何选择不包含某个class的元素
增加样式时将li中有class的去掉。
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。
为了将类选择器的样式与元素关联，必须将 class指定为一个适当的值。
This heading is very important.
This paragraph is very important.
在上面的代码中，两个元素的 class都指定为 important：第一个标题（ h1元素），第二个段落（p元素）。
类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落显示为红色文本：
选择器现在会匹配 class属性包含 important的所有 p元素，但是其他任何类型的元素都不匹配，不论是否有此 class属性。
选择器 p.important解释为：“其 class属性值为 important的所有段落”。因为 h1元素不是段落，这个规则的选择器与之不匹配，因此 h1元素不会变成红色文本。
如果你确实希望为 h1元素指定不同的样式，可以使用选择器 h1.important：
在 HTML中，一个 class值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">
This paragraph is a very important warning.
这两个词的顺序无关紧要，写成 warning important也可以。
我们假设 class为 important的所有元素都是粗体，而 class为 warning的所有元素为斜体，class中同时包含 important和 warning的所有元素还有一个银色的背景。就可以写作：
.warning{font-style:italic;}.important.warning{background:silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：
.important.urgent{background:silver;}
不出所料，这个选择器将只匹配 class属性中包含词 important和 urgent的 p元素。因此，如果一个 p元素的 class属性中只有词 important和 warning，将不能匹配。不过，它能匹配以下元素：
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
二、css有哪些选择器
（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器
（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素
1.标签选择器：通过标签名获取元素权重：0001
（此种选择器影响范围大，建议尽量应用在层级选择器中。）
2.class选择器：通过.类名获取元素权重：0010
（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）
3.id选择器：通过# id名获取元素权重：0100
（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。）
4.*通配符选择器：获取到页面的所有元素
5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到
（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）
1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代
2.子代选择器：用>隔开基本选择器，表示后一个选择器是前面的子代
例：ul>li{ line-style: none;}
3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）
4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素
1. a:link锚链接被访问前添加样式
2. a:visited锚链接被访问后添加样式
3. e:hover鼠标悬停在元素上添加样式
4. e:active鼠标点击元素时添加样式
5.:focus表单元素被聚焦时，添加样式
语法：目标:target{属性：属性值}被选中的目标添加样式
目标:target E子元素{属性：属性值}被选中的目标里的E子元素添加样式
1.:enabled可用的表单元素添加样式
2.:disabled不可用的表单元素添加样式(disabled)
3.:checked+E被选中的表单元素添加样式
1. E:first-child获取到E元素，且要满足为其父元素的第一个孩子。
2. E:last-child获取到E元素，且要满足为其父元素的最后一个孩子
3. E:nth-child(n)获取到E元素，且要满足为其父元素的第n个孩子
(1)6n倍数(2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现“隔行换色”）
(4)p:nth-child(-n+3):nth-child(n+2) 2-3个
4. E:nth-last-child(n)获取到E元素，且要满足为其父元素的倒数第n个孩子
5. E:first-of-type获取到E元素，且要满足为其父元素的第一个该类型的孩子
6. E:last-of-type获取到E元素，且要满足为其父元素的最后一个该类型的孩子
7. E:nth-of-type(n)获取到E元素，且要满足为其父元素的第n个该类型的孩子
8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子
9. E:empty获取到空的E元素（注：连空格都不能有）
1. E[attr]拥0有attr属性的E元素添加样式如div[class];
2. E[attr="val"]拥有attr属性值为 val的E元素添加样式如p[class="ab"]
3. E[attr*="val"] attr属性值包含 val的E元素添加样式
如ul[class="c"]指class类名中包含有c字母的E元素
4. E[attr^="val"] attr属性值以val开头的E元素添加样式
5. E[attr$="val"] attr属性值以val结尾的E元素添加样式
1. E::before给E元素添加第一个子元素（前面）
2. E::after给E元素添加最后一个子元素（后面）
3. E::first-letter给E元素第一个字添加样式
4. E::first-line给E元素第一行添加样式
5. E::selection元素内容被选中时添加样式(火狐需要加前缀-moz-)
三、用css选择器 如何选择自己的父元素
1、双击打开HBuilderX工具，并新建一个HTML5静态页面，如下图所示：
2、在body标签元素内，插入多个div标签，并使用div嵌套，如下图所示：
3、在title标签下方添加一个style，设置全局的样式，使用*符号，如下图所示：
4、保存代码并打开浏览器查看页面效果，可以发现页面有背景色，如下图所示：
5、再利用body标签选择器，设置宽度、字体属性、字体大小等属性，如下图所示：
6、最后使用body标签内的div选择器设置div标签样式，添加边框、内外边距，如下图所示：
四、jquery如何获取第一个子元素
下面写个例子来获取id为demo的元素的第一个子元素。
<scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>
$(function(){//页面加载完成时进入
varfirstChild=$("#demo>:first");//用选择器的方式获取第一个子元素
firstChild.css('color','red');//将第一个子元素中的文字变为红色，可以看到只有“111”是红色的
<divid="demo"><span>111</span><span>222</span><span>333</span></div>
说明一下以上例子中用到选择器
#demo是id选择器获取id为demo的元素
:first是首项选择器获取第一个元素
三者结合起来就是获取id为demo的元素的所有子元素中的第一个元素。
其实jquery的选择器有很多，包括：
更多可以直接百度搜索“jquery选择器”来查看。
五、怎样用css的类选择器选择子标签
</ul>
举个例子：如上一个无需列表中含有5个列表项，使用结构伪类选择器来选择子元素。
举个例子：如上一个无需列表中含有5个列表项，使用结构伪类选择器来选择子元素。
}
2.选择最后一个子元素 last-child
2.选择最后一个子元素 last-child
}
3.选择某一个子元素 nth-child(子元素下标)
3.选择某一个子元素 nth-child(子元素下标)
}
4.选择奇数子元素（1，3，5，7....） nth-child(odd)
4.选择奇数子元素（1，3，5，7....） nth-child(odd)
}
5.选择偶数子元素（2，4，6，8.....） nth-child(even)
5.选择偶数子元素（2，4，6，8.....） nth-child(even)
六、css3有没有除第一个子元素以外的元素的选择器
有的，包括：“:not(:first-child)”、“:nth-child(n+2)”两种方式。
1、:not(:first-child)：其中，E:not(s)表示匹配所有不匹配简单选择符s的元素E，E:first-child匹配同级兄弟元素中的第一个E元素。
2、:nth-child(n+2)：其中nth-child表示第几个son，n+2表示从第二个开始(即所有的n都是取从0开始的自然数)。
1、E:root：匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
2、E:nth-child(n)：匹配父元素中的第n个子元素E
3、E:nth-last-child(n)：匹配父元素中的倒数第n个结构子元素E
4、E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E
5、E:nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E
6、E:last-child：匹配父元素中最后一个E元素
7、E:first-of-type：匹配同级兄弟元素中的第一个E元素
8、E:only-child：匹配属于父元素中唯一子元素的E
9、E:only-of-type：匹配属于同类型中唯一兄弟元素的E
文章到此结束，如果本次分享的css选择器选择第一个子元素和css选中第二个元素的问题解决了您的问题，那么我们由衷的感到高兴！
