老徐WEB：深入学习CSS选择器

什么是CSS选择器，什么时候需要CSS选择器，这是网页制作及开端开发者们经常碰到 的问题。

在网页制作过程中，HTML用来制作网页框架，然后就需要给网页添加样式，类似房屋装修一样，装饰整个页面，此时就得需要用到CSS选择器了。

CSS选择器就是对HTML页面中的元素进行控制操作的表示方法。也就是HTML页面中的元素是通过CSS选择器控制的。

CSS选择器的基本用法是：CSS选择器{CSS属性:属性值}。

CSS选择器有多种类型，下面就按类型一一说明。

1.1 类别选择器，就是通过类名来选择HTML页面中的元素，以“.”来标志。比如：

.class_name {
	color:red;
	background-color:blue;
}

这就是一个基本的类别选择器样式，通过类名选择HTML中的元素。在HTML页面中，给某个元素定义一个class属性，class的值便是class_name，如下。

<div class="class_name">这个区域字体为红色，背景为蓝色</div>
<p class="class_name">这个区域字体为红色，背景为蓝色</p>
<p>这个区域字体使用默认颜色</p>

在浏览器中打开，就能发现所有class为class_name的元素都使用的样式。

 

1.2 标签选择器，一个HTML页面中有多个不同的标签构成。那么某个标签选择器就代表选中了某个HTML标签。例子如下：

p {
	color:red;
	background-color:blue;
}

上面的CSS样式作用于HTML中所有的p标签，也就是HTML中所有的p标签都会用到这个样式。

 

1.3 ID选择器，跟类别选择器类似，通过ID名来选择HTML页面中的元素，需要注意的是ID在HTML页面中是唯一的，以“#”来标志。比如：

#id_name {
	color:red;
	background-color:blue;
}

这就是一个基本的ID选择器样式。那么相应的在HTML页面中，给某个元素定义一个id属性，id的值是id_name，如下。
<div id="id_name">这个区域字体为红色，背景为蓝色</div>
因为ID在HTML页面中是唯一的，所以此处只能用一个id是id_name的元素来举例。

1.4 后代选择器，选择特定元素的后代，父元素放前面，子元素放后面，中间有空格分开（特别注意空格），后代不一定是直接下一代，也可能是隔代的。后代选择器不仅仅只能两个，可以有多个，中间要用空格隔开，如下。

.nav .user{
	color:red;
	background-color:blue;
}

这就是后代选择器样式的基本结构。那么相应的在HTML页面中，至少要有两层结构，外层是class为nav的，内层是class为user的。比如：

<div class="nav">
	<span class="user">user name</span>
	<span>xxx</span>
</div>

此时CSS样式只作用于user name，而xxx保持默认样式。

 

1.5 子选择器，跟后代选择器很像，一定要注意两者的区别。子选择器是直接下一代，而后代选择器是可以隔代的；子选择器用“>”隔开，后代选择器用“ ”隔开。看一个两者对比的事例。

.nav a{
	color:blue;
}
.nav > a{ // 注意此处产品一个样式覆盖。
	color:red;
}

HTML如下：
<div class="nav">
	<a>所有产品</a>
	<span><a>所有服务商</a></span>
	<span><a>购买</a></span>
</div>

用浏览器打开，我们看到“所有产品”是红色的，其他是蓝色的。因为子选择器一定是直接下一代，后代选择器可以是直接下一代，也可以是隔代的，注意此处子选择器对后代选择产生样式覆盖。

1.6 伪类选择器，也是作用于HTML页面中的标签，只是有些特殊，比如鼠标悬停。下面是链接应用的伪类样式。

a:link {
	color:#999;
}
a:visited {
	color:#ff0;
}
a:hover {
	color:#060;
}

 

1.7 通用选择器，用“*”来表示，比如：

* {
	font-size:12px;
}
表示所有元素的字体大小都是12px。
p * {
	font-size:12px;
}
表示所有p元素的后代的字体大小都是12px。

1.8 群组选择器，当多个元素的样式一样时，可以同时定义CSS样式，中间用逗号“,”隔开。比如：

div, p, span {
	color:#999999;
	line-height:18px;
}
.main p, .nav span {
	color:#666666;
}

使用群组选择器，将大大简化CSS代码，提高编码效率，减少CSS文件体积。

1.9 相邻同胞选择器，上面我们提到了后代和子选择器，而相邻同胞选择器是选择兄弟中的一个。用“+”和“~”表示，“+”代表兄弟间按顺序的，不跳过任何人，“~”代表兄弟间按顺序的，可以跳过任何人。

h1 ~ p {
	color:red;
}
h1 + p {
	color:blue;
} 
h1 ~ p 表示h1的所有p兄弟，h1 + p表示紧跟h1的兄弟。
<div>
	<h1>CSS学习</h1>
	<p>CSS属性</p>
	<p>CSS选择器</p>
	<p>CSS伪类</p>
</div>

用浏览器打开，可以看到第一个p元素是蓝色，其他两个p元素是红色。

1.10 属性选择器，利用HTML页面中元素的属性来定义CSS样式。表示如下：

[name] - input[name] {color:red} 表示选择所有具有name属性的p元素。
[name='test'] - input[name='test'] {color:red} 表示选择所有属性是name='test'的input元素。
[name^='test'] - input[name^='test'] {color:red} 表示选择所有属性是name的值以test开头的input元素。
[name$='test'] - input[name$='test'] {color:red} 表示选择所有属性是name的值以test结尾的input元素。
[name*='test'] - input[name*='test'] {color:red} 表示选择所有属性是name的值包含test的input元素。
[name~='test'] - input[name*='test'] {color:red} 表示选择所有属性是name的值包含一个空格分隔的词为test的input元素，即name的值里必须要有test这个单词，且test与其他单词有空格分隔。
[name|='test'] - input[name*='test'] {color:red} 表示选择所有属性是name的值等于test，或以test-开头的input元素。

 

1.11 伪元素选择器，作用于HTML页面中标签内部的部分行为。比如：
:first-letter，设置块元素首字母样式。
:first-line，设置第一行文本样式。
:before，设置标签前面的样式，可以插入生成的内容。
:after，设置标签后面的样式，可以插入生成的内容。

1.12 结构性伪类选择器，结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定；
带括号的选择器，里面一定要有参数；匹配子元素，同时也会匹配孙子元素，因为子元素是孙子元素的父元素；
:first-of-type，同代里同类元素中的第一个。
/*代表此元素（class="ft"）同代里同类元素中的第一个。*/
.ft:first-of-type {color: #f00}
/*代表此元素（class="box"）同代里同类元素中的第一个。*/
/*.box:first-of-type {color: #f00}*/
/*代表此元素（class="box"）后代里同类元素中的第一个，又是此元素（class="ft"）同代中第一个元素。*/
/*.box .ft:first-of-type {color:#f00;}*/
:last-of-type，同代里同类元素中的最后一个。
HTML页面如下：

<div class="box">
	<h1>First H1</h1>
	<h2>First H2</h2>
	<span>First span</span>
	<p class="ft">First p<span>First span</span><span>Second span<i>First i</i></span><i>First i</i></p>
	<p class="ft">Second p<span>First span</span></p>
	<div>First div<strong class="ft">First strong</strong><strong>Second strong</strong></div>
	<div class="ft">Second div<span>First span</span><span>Second span</span></div>
</div>
<div>
	<h1>First H1</h1>
</div>

CSS选择器还是挺多的，需要多练习才能理解并记住，有时候就算记住了，过段时间不用还是会忘记的。CSS的练习还是很简单的，直接创建一张HTML文件就可以编写了，调试也很方便。