web前端三大主流框架 css偶数选择器以及用法

文章插图
前言css选择器非常之多，常见的如class选择器，id选择器，标签选择器等等。每个的用法都有所区别，虽然很多都能到达同样的效果，但还是有一些更优的选择。
class、id、标签选择器这个几个就不细说了，class和标签选择器主要用来设置样式上面，id选择器推荐不要用在css样式上，更多是用在js操作dom时，选择元素。
如：
div{ background: #fff;}.list { color: red;}$('#li').html('<span>web秀</span>')element elementdiv p 选择 <div> 元素内部的所有 <p> 元素。
CSS选择器如此之多，你了解多少？
element>elementdiv>p 选择父元素为 <div> 元素的所有 <p> 元素。
CSS选择器如此之多，你了解多少？
element+elementdiv+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
CSS选择器如此之多，你了解多少？
[attribute][target] 选择带有 target 属性所有元素。
CSS选择器如此之多，你了解多少？
[attribute=value][target=_blank] 选择 target=”_blank” 的所有元素。
CSS选择器如此之多，你了解多少？
[attribute~=value][title~=title] 选择 title 属性包含单词 “title” 的所有元素。
CSS选择器如此之多，你了解多少？
[attribute|=value]/[attribute^=value][lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。
CSS选择器如此之多，你了解多少？
[attribute$=value]p[src$=”e”] 选择其 src 属性以 “e” 结尾的所有 <p> 元素。
CSS选择器如此之多，你了解多少？
[attribute*=value]p[title*=”abc”] 选择其 title 属性中包含 “abc” 子串的每个 <p> 元素。
CSS选择器如此之多，你了解多少？
element1~element2p~div 选择前面有 <p> 元素的每个 <div> 元素。
CSS选择器如此之多，你了解多少？
A标签伪类选择器:link a:link 所有未被访问的链接(a标签的默认样式) 。
:visited a:visited 所有已被访问的链接。
:active a:active 点击后没有松开鼠标的链接。
:hover a:hover 鼠标指针位于其上的链接。
:before / :after在元素的内容之前插入内容。
div:before{ content: ''; display: block; background: red; width: 30px; height: 10px;}div:after{ content: ''; display: block; background: green; width: 30px; height: 10px;}CSS选择器如此之多，你了解多少？
:first-childp:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。(注意和:first-of-type做区分)
CSS选择器如此之多，你了解多少？
:first-of-typep:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。(注意和:first-child做区分)
CSS选择器如此之多，你了解多少？
:last-childp:last-child 表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效(注意和:last-of-type做区分)
CSS选择器如此之多，你了解多少？
:last-of-typep:last-of-type 代表在一群兄弟元素中的最后一个指定类型的元素。(注意和:last-child做区分)
CSS选择器如此之多，你了解多少？
:only-childp:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素
CSS选择器如此之多，你了解多少？

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：