css选择器是前端CSS的基础内容。当你灵活使用选择器，写出绚丽炫酷的页面也不成问题。选择器是按照书上的中文或网页分类中有泛型选择器、标签选择器、类选择器、ID选择器、伪类、伪元素、组合器等。那么本文将结合应用直接介绍30个css选择器。1、*通配符选择器也是一种万能选择器，可以选择页面上的所有元素并对其应用样式，用*表示。基本上，您会看到通用选择器在许多页面上都是最先定义的。*{margin:0px;padding:0px;}这行代码可以删除浏览器中每个元素的margin和padding的默认值。不同的浏览器可能对元素有不同的默认边距和填充。使用通用选择器将所有元素的外边距和内边距设置为0可以让我们精确控制元素的外边距和内边距。也可以将通用选择器写成子选择器，让子选择器满足通用样式。如上图所示，所有元素都会符合这种风格。如果你不需要元素来满足一种风格，尽量不要这样使用。通用选择的兼容性与所有浏览器兼容。2.#id(#X)id选择器在浏览器中的优先级最高。id选择器是唯一的，不能重复使用。很多人会疑惑为什么不能重复使用。我写了两个id是一样的？这个问题可以这样理解，css渲染id和class不关心页面有多少，都是通过浏览器渲染的，而且id和tags都是来自html，xhtml已经给出了明确的规范。当然，同一个id不使用js锚链接等，也不会影响页面的显示，但是以后添加js和锚链接会带来很大的不便。兼容性也兼容所有浏览器。3..class(.X)类选择器不同于id选择器。同名类可以多次重用。一般最外层的框架用div，里面的小框架一样的样式可以用class。所有浏览器也兼容。四、html标签(X)标签选择器，html中有很多标签，如a、img、p、h1、h2等，这些标签可以直接定义css样式。body{background:pink;}div{width:200px;height:300px;}p{color:#fff;}5.后代选择器(XY)后代选择器也叫包含选择器，一般写法是选择器on左一端由两个或多个由空格分隔的选择器组成。ulp{color:red}六：伪类选择器link/:visited/:hover/:active（下篇文章专门介绍伪类）这四种比较常见，离不开一个链接，先说明一下，它们都属于伪类。:link选择器用于选择未访问的链接。:visited选择器为访问页面的链接设置样式。:hover选择器在鼠标指针悬停在链接上时设置链接样式。:active选择器在单击时设置链接样式。当然hover也可以作用于其他元素，只是ie6老版本不支持如：div:hover{border:1pxsolid#ccc}七、关系选择器，X+Y，X>Y，X~Yx+y是relative后者只有在需要相邻关系时才会生效，也可以称为相邻选择器，所以下图中只有8显示为红色，其他不变。x>y是子选择器，但是对深层次没有影响，所以下图中只有123是红色的，其他没有颜色变化。x~y和x+y是类似的相邻关系，但是x~y之后多少个ys都会生效，x+y只会对一个相邻的y生效。所以把ul+p改成ul~p中只显示891112振铃的p标签。8、属性选择器(X[title][href][data][foo])X[title]会渲染带有title的标签样式。只要有title属性，就会有style，不管title内容是什么。X[href="url"]，会渲染指定链接的样式：X[href*="url"]，会渲染url中包含url链接的样式：X[href^="http"]，会渲染以http开头的链接，也可以理解为what开头的链接，如图，头条开头的链接是黄色的，http开头的链接是红色的。x[href$=".png"]会渲染以图片png结尾的链接，也可以理解为以what结尾的链接。如图，jpg为红色，zip为黄色，zips不生效。x[data-*="url"]，data可以添加属性，规则中的url在渲染的时候也会被渲染。和所有图片一样，a[data-filetype="image"]等价于：a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"]但需要注意的是，需要在a链接中找到添加data-filetype的属性，否则不会生效。x[customdataattribute~="customattributecontent"],会匹配自定义属性中自定义内容相同的样式。如图：a[data-user~="toutiao"]{color:green;}a[data-user~="hello"]{border:1pxsolidred;}
