精通css(2)-选择器

2022-04-21 17:06:13

虽然这东西很简单，但是这是最基础的。能把最基础的东西运用自如，就已经是高手了。

选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所以就有了5种或6种选择器了。

1.标签选择器

直接用HTML标签，又叫类型选择器，元素选择器，简单选择器。

2.类选择器

之所以把这一条单独列出来完全是为了排版好看。

3.ID选择器

其实我不是为了凑字数，真的。

4.扩展用法

好吧，这里才是重点，融合以上三种选择器，可以召唤更强大的选择器：

4.1通用选择器

用法：*{property：value}

4.2伪类和伪元素

伪类用法：selector : pseudo-class {property: value}

伪元素用法：selector:pseudo-element{property:value}

另外，JQuery还有更强大的选择器，不过这里说的是css。

4.3后代选择器

选择元素的所有后代:selector1 selector2{...}

对于后代选择器，浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。这样做的好处是尽早过滤掉一些无关的样式规则和元素。

4.4子选择器

选择元素的直接后代：selector1 >selector2{...},IE6不支持支持子选择器。但我们可以模拟子选择器的效果。比如要实现以下效果：

#nav > li{backgroud:#abc;padding:10px;}

可以先用后代选择器选择所有后代：

#nav li{backgroud:#abc;padding:10px;}

然后用通用选择器覆盖：

#nav li *{backgroud:none;padding:0;}

4.5相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

<div>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
</div>

比如上面的h1和p有相同的父元素而且相邻，就可以用h1+p{color:red;}

4.6群组选择器

说它是选择器，不如说是选择器的一种用法：selector1，selector2，...{property: value}

4.7属性选择器

属性选择器根据某个属性是否存在或属性的值来寻找元素，非常强大。值得庆幸的是IE6不支持属性选择器。

举个例子吧：

input[type="text"]
{
  margin-bottom:10px;
}

input[type="button"]
{
  width:120px;
}

更多用法：

好了，说了这么多选择器大家可能有点晕了，其实大可不必在意这些细节，分类并不重要，会用就行。考虑到这节写了很多，有关优先级的问题就下节总结吧。

码农公寓