大概大家都知道“id”,“class”以及“descendant”选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。下面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏览器中才能生效，你完全应该把这些都记在你聪明的脑袋里面。
1.*
*{
margin: 0;
padding: 0;}
在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空 margin 和 padding。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。* 也可以用来选择某元素的所有子元素。
#container * {
border: 1px solid black;}
它会选中 #container 下的所有元素。当然，我还是不建议你去使用它，如果可能的话。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
2. #X
#container {
width: 960px;
margin: auto;}
在选择器中使用#可以用 id 来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。需要问自己一下：我是不是必须要给这个元素来赋值个 id 来定位它呢？
id选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
3. .X
.error {
color: red;}
这是个 class 选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用 class。当你要对某个特定的元素进行修饰那就是用 id 来定位它。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
4. X Y
li a {
text-decoration: none;}
下一个常用的就是 descendant 选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的 a 元素，而只需要定位li标签下的 a 标签？这时候你就需要使用 descendant 选择器了。
专家提示：如果你的选择器像 X Y Z A B.error 这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
5. X
a { color: red; }
ul { margin-left: 0; }
如果你想定位页面上所有的某标签，不是通过id或者是‘class’，这简单，直接使用类型选择器。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
6. X:visited and X:link
a:link {color:red;}
a:visited {color: purple;}
我们使用:link这个伪类来定位所有还没有被访问过的链接。
另外，我们也使用:visited来定位所有已经被访问过的链接。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
7. X+Y
ul + p {
color: red;}
这个叫相邻选择器。它只会选中指定元素的直接后继元素。上面那个例子就是选中了所有ul标签后面的第一段，并将它们的颜色都设置为红色。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
8. X>Y
div#container > ul {
border: 1px solid black;}
X Y 和 X > Y的差别就是后面这个只会选择它的直接子元素。看下面的例子：
<div id="container">
<ul><li> List Item
<ul><li> Child </li>
</ul></li><li> List Item </li><li> List Item </li><li> List Item </li></ul>
</div>
#container > ul 只会选中id为‘container’的div下的所有直接ul元素。它不会定位到如第一个 li 下的 ul 元素。
由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在 javascript 中使用 css 选择器时候是强烈建议这么做的。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
9. X ~ Y
ul ~ p {
color: red;}
兄弟节点组合选择器跟 X+Y 很相似，然后它又不是那么的严格。ul + p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
10. X[title]
a[title] {
color: green;}
这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选？那…
兼容性
IE7+
Firefox
Chrome
Safari
Opera
11. X[href="foo"]
a[href="http://strongme.cn" rel="external nofollow" target="_blank" ] {
color: #1f6053; /* nettuts green */}
上面这片代码将会把 href 属性值为http://strongme.cn 的锚点标签设置为绿色，而其他标签则不受影响。
注意我们将值用双引号括起来了。那么在使用 Javascript 的时候也要使用双引号括起来。可以的话，尽量使用标准的 CSS3 选择器。
这样可以用了，但是还是有点死，如果不是这个链接，而是类似的链接，那么这时就得用正则表达式了。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
12. X[href="strongme"]
a[href="strongme"] {
color: #1f6053;}
Tada,正是我们需要的，这样，就指定了strongme这个值必须出现在锚点标签的href属性中，不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。
但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是strongme相关的站点，如果要更加具体的限制的话，那就使用^和$，分别表示字符串的开始和结束。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
13. X[href^="href"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px; }
大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。
用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性href中以http开头的标签，那我们就可以用与上面相似的代码。
注意我们没有搜索http://，那是没必要的，因为它都不包含https://。
那如果我们想找到所有指向一张图片的锚点标签呢？那我们来使用下&字符。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
14. X[href$=".jpg"]
a[href$=".jpg"] {
color: red; }
这次我们又使用了正则表达式$，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以.jpg结尾的。但是记住这种写法是不会对gifs和pngs起作用的。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
15. X[data-*="foo"]
a[data-filetype="image"] {
color: red;}
在回到第8条，我们如何把所有的图片类型都选中呢png,jpeg,’jpg’,'gif’？我们可以使用多选择器。看下面：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red; }
但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性data-filetype指定这个链接指向的图片类型。
[html]
Image Link 那有了这个钩子，我们就可以去用标准的办法只去选定文件类型为image的锚点了。
a[data-filetype="image"] {
color: red; }
兼容性
IE7+
Firefox
Chrome
Safari
Opera
16. X[foo~="bar"]
a[data-info~="external"] {
color: red; }
a[data-info~="image"] {
border: 1px solid black; }
这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个~符号可以定位那些某属性值是空格分隔多值的标签。
继续使用第15条那个例子，我们可以设置一个data-info属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。
Click Me, Fool
给这些元素设置了这个标志之后，我们就可以使用~来定位这些标签了。
/ Target data-info attr that contains the value "external" /
a[data-info~="external"] {
color: red;}
/ And which contain the value "image" /
a[data-info~="image"] {
border: 1px solid black;}
17. X:checked
input[type=radio]:checked {
border: 1px solid black; }
上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。
兼容性
IE9+
Firefox
Chrome
Safari
Opera
18. X:after
before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。
当使用.clear-fix技巧时许多属性都是第一次被使用到里面的。
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
display: inline-block;
_height: 1%;
}
上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当overflow:hidden方法不顶用的时候，这招就特别管用了。
根据 CSS3 标准规定，可以使用两个冒号::。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。
兼容性
IE8+
Firefox
Chrome
Safari
Opera |
发表于 2024-5-7 14:03
|