《Two Days DIV + CSS》读书笔记——CSS选择器

2022-11-19 23:04:25

1.1.2 CSS选择器

CSS 选择器最基本的有四种：标签选择器、ID 选择器、类选择器、通用选择器。

【标签选择器】

一个完整的 HTML 页面由很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的 CSS 样式，比如，在 style.css 文件中对 p 标签样式的声明如下：

<span style="font-family:Microsoft YaHei;font-size:14px;">p {</span>

	font-size: 12px;

	background: #900;

	color: 090;

}

这么做，会使页面中所有 p 标签的背景都是#900(红色)，文字大小均是 12px，颜色为#090(绿色)，返在后期维护中，如果想改发整个网站中 p 标签背景癿颜色，叧需要修改background 属性就可以了，就这么容易！当然你也可以设置整个页面中所有的 div 的属性、a 链接的属性、span 的属性，这么做方便是方便，但是不够灵活，如果页面中除了某个 p标签背景不是红色外，其他的都是红色，就不能用这种方法定义了。

【ID 选择器】

ID 选择器在某一个 HTML 页面中只能使用一次，就像只有一个身仹证 (ID)一样，不重复！在页面中使用 ID 选择器更具有针对性，如：

先给某个HTML页面中的某个p标签起个ID，代码如下：

<p id="one">W3CFuns.com:打造中国 Web 前端开发人员最专业的贴心社区！</p>

在 CSS 中定义 ID 为 one 癿 p 标签的属性，就需要用到“#” ，代码如下：

#one{

	font-size:12px;

	background:#900;

	color:090;

}

返样页面中癿某个 p 就会是 CSS 中定义的样式。针对“页面中除了某个 p 标签背景不是红色外，其他的都是红色的”情况，我们就可以用 ID 选择器单独定义那个背景不为红色的 p 标签，返样问题就解决了。

【类选择器】

这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆某个方阵中，肯定都是不同癿人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎样做呢~呵呵，和 ID 选择器的用法类似，只不过过把 id 换做 class，如下：

<p class="one">此处为 p 标签内的文字</p>

如果我还想让 div 标签也有相同的样式，怎么办呢？加上同样的 class 就可以了，如下：

<div class="one">此处为 DIV 标签内的文字</div>

返样页面中凡是加上 class="one"的标签，样式都是一样的了~
CSS 定义的时候和 ID 选择器差不多，只不过把#换成. ，如下：

.one{

	font-size:12px;

	background:#900;

	color:090;

}

补充：一个标签可以有多个类选择器的值，不同的值用空格分开，如：

<div class="one yellow left">一个标签可以有多个类选择器的值</div>

这样我们可以将多个样式用到同一个标签中，当然也可以 ID 和 class 一块用

<div id="my" class="one yellow left">ID 和 class 可同时应用到同一个标签</div>

【通用选择器】

到这里，前三种基本的选择器说完了，但是还需要给大家介终一个 CSS 选择器中功能最强大但是用的最少的一种选择器“通用选择器”，就是“*”星号。

*{此处为 CSS 代码}

强大之处是因为他对整个网页中所有 HTML 标签进行样式定义，这种功能类似“标签选择器” ，覆盖的对象更加广泛，是整个HTML 的所有标签，功能是强大，但是返样反而限制了它的灵活性。

对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对 HTML 内的所有的标签进行重置，会将下面癿代码加到 CSS 文件的最顶端：

*{margin:0; padding:0;}

为什么要这么用呢，因为每种浏览器都自带有 CSS 文件，如果一个页面在浏览器加载页面后，发现没有 CSS 文件，那么浏览器就会自动调用它本身自带的 CSS 文件，但是不同的浏觅器自带的 CSS 文件又都不一样，对不同标签定义的样式不一样，如果我们想要作出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对 HTML 标签重置，就是上面的代码了，但是这样也有不好的地方，因为 HTML4.01
中有 89 个标签，所以相当于在页面加载 CSS 的时候，先对这 89 个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为 89 个标签中需要重置的标签是很少数的，没有必要将所有的标签都重置，用到哪些标签就定义哪些标签，如下:

body,div,p,a,ul,li{margin:0; padding:0;}

如果还需要 dl、dt、dd 标签重置，那就在上面加上就可以了，如下:

body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

用到哪些就写哪些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面。

【选择器的集体声明】

在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

h1,h2,h3,h4,h5,h6{color:#900;}

再举个例子，无论什么样的选择器，”标签选择器”，”ID 选择器”，”类选择器” ，叧要是选择器，叧要有公共的 CSS 代码，就可以用“选择器的集体声明” ，起到精简代码的作用，有一段代码如下：

#header{font-size:14px; background:#ccc;}

div{font-size:14px; width:960px;}

.blue{font-size:14px; color:#009;}

.h1{font-size:14px; font-weight:normal;}

我们就可以将上面的代码迕行精简，把公共的 CSS 代码用选择器的集体声明提取出来，有点类似小学的“提取公因式”似的，如下：

#header ,div ,.blue,h1{font-size:14px;}

#header{background:#ccc;}

div{width:960px;}

.blue{color:#009;}

.h1{font-weight:normal;}

这是选择器的集体声明的经典应用，把共同的部分提取出来，这样做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化 CSS 代码癿一块，要记住！

【选择器的嵌套】

选择器也是可以嵌套的，如：

#div1 p a{color:#900;}/*意思是在 ID 为 div1 内的  p 标签内的链接 a 标签的文字颜色为红色*/

返样的好处就是不需要在单独癿为 ID 为 div1 的标签内的 p 标签内的 a 标签单独定义class 选择器或者 ID 选择器，CSS 代码不就少了嘛~同样也是 CSS 代码优化的一块。

码农公寓