总结30个CSS3选择器
发布在CSS学徒2017年1月10日view:611Philly
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

大家平时总是在用的选择器都是:#id .class 以及标签选择器。可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助。 1 *:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。 *选择器也可以应用到子选择器中,例如下面的代码:

container * { border:1px solid black; }

这样ID为container 的所有子标签元素都被选中了,并且设置了border。 2 #id:id选择器

container { width: 960px; margin: auto;

} id 选择器是很严格的并且你没办法去复用它。使用的时候大家还是得相当小心的。需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢? 3 .class:类选择器 .error { color: red; } 这是个 class 选择器。它跟 id 选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用 class 。当你要对某个特定的元素进行修饰那就是用 id 来定位它。 4 selector1 selector2:后代选择器 li a { text-decoration: none; } 后代选择器是 比较常用的 选择器。如果你想更加具体的去定位元素,你可以使用它。例如,假如,你不需要定位所有的 a 元素,而只需要定位 li 标签下的 a 标签?这时候你就需要使用 后代 选择器了。 提示:如果你的选择器像 X Y Z A B.error 这样,那你就错了。时刻都提醒自己,是否真的需要对那么多元素修饰。 5 tagName:标签选择器 a { color: red; }ul { margin-left: 0; } 如果你想定位页面上所有的某标签,不是通过 id 或者是’class’,这简单,直接使用类型选择器。 6 selector: link selector:visited selector:hover selector:active 伪类选择器 一般情况下selector都为a标签,以上四种伪类选择器代表的意思如下: link:连接平常的状态。 visited:连接被访问过之后。 hover:鼠标放到连接上的时候。 active:连接被按下的时候。 未移入a标签链接时:link 移入a标签链接时:link、hover 点击a标签链接时:link、hover、active 点击后未移入a标签连接时:link、visited 点击后移入a标签连接时:link、visited、hover 点击后再次点击a标签连接时:link、visited、hover、active 这个就是所有组合的样式了。 如果有多个同样的样式,后面的样式会覆盖前面的样式,所以这四个伪类的定义就有顺序的要求了,而大家所说的‘lvha’也是因为这个原因。 7 selector1 + selector2 :相邻选择器 ul + p { color: red; } 它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有 ul 标签后面的第一段,并将它们的颜色都设置为红色。 8 selector1 > selector2 : 子选择器 div#container > ul { border: 1px solid black; } 它与差别就是后面这个指挥选择它的直接子元素。看下面的例子:

  • List Item
    • Child
  • List Item
  • List Item
  • List Item

container > ul 只会选中 id 为’container’的 div 下的所有直接 ul 元素。它不会定位到如第一个 li 下的 ul 元素。

由于某些原因,使用子节点组合选择器会在性能上有许多的优势。事实上,当在javascript中使用 css 选择器时候是强烈建议这么做的。 9 selector1 ~ selector2 : 兄弟选择器 ul ~ p { color: red; } 兄弟节点组合选择器跟 相邻选择器 很相似,然后它又不是那么的严格。 ul + p 选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。 10 selector[title] : 属性选择器 a[title] { color: green; } 上面的这个例子中,只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。

更多免费前端学习资源,加群434623999,免费送了

评论
发表评论
10个月前
添加了一枚【评注】:。。
WRITTEN BY
PUBLISHED IN
CSS学徒

<link rel="stylesheet" type="text/css" href="xxx.css">

我的收藏