所谓选择器,举个例子,如果你想改变段落标签p的样式,那么就应该指明告诉浏览器,你要改变的是p标签。

p {
    color: red;
}

上面这段代码,将p标签里面的文字颜色改为红色,这里的p就是选择器了。
其实说白了,选择器就是指出你想要改变的那个网页元素。

CSS 的选择器有以下几种,下面且听我一一道来。

  1. 标签选择器
  2. id 选择器
  3. class 选择器
  4. 属性选择器
  5. 后代选择器
  6. 子类选择器
  7. 通用选择器
  8. 分组选择器
  9. 伪类选择器

1. 标签选择器

标签选择器很简单,想改变那个标签,就直接写那个标签好了。

<!-- 例如想改变'div'那么就 -->
div {

}
<!-- 想改变'h1'那么就 -->
h1 {
    color:yellow;
}

当然这样做会有一个缺点,就是网页中所有被你指定的标签都会生效,当你选择 h1 后,网页中所有的 h1 都会变成黄色,那么有没有单独就制定某一个网页元素的方法呢?当然有~

2. id 选择器

id选择器,就是给网页上的元素,加上一个id,这个id就相当于网页元素的名字,通过这个名字,你就能单独给某一个网页元素添加样式了。
举个栗子:
下面有三个h1标签,如果我想给星期二变成红色,但是其他的不变色,应该怎么办呢?

<h1>星期一</h1>
<h1 id="tue">星期二</h1>
<h1>星期三</h1>

这个时候,如果你通过h1选择器,那么所有的h1都会变色。
为了达到需求,我们可以通过id的方式,来指明只需要改变星期二的颜色

#tue {
    color: red;
}

或者可以指明是h1标签并且idtue

h1#tue {
    color: red;
}

注意:

  1. id选择器在使用的时候,必须在前面加上#号。
  2. 每个页面中,不能存在同名的 id!也就说,你让一个元素的idtue了,这个页面中,就不能再让别的id也叫tue

3. class 选择器

class选择器id选择器类似,不同的是:

  1. class选择器在使用时,必须在前面加上.号。
  2. 每个页面上,可以有多个同名的class

下面直接举例子:
例如想让星期二星期三星期四同时变成红色,而星期一不变

<h1>星期一</h1>
<h1 class="red">星期二</h1>
<h1 class="red">星期三</h1>
<p class="red">星期四</p>

注意前面的.

.red {
    color:red;
}

好的,现在情况变了一下,如果我们只想让星期二星期三变色,而其他的都不变色

h1.red {
    color:red;
}

这样就可以指定,必须是h1标签,并且 class 是red
现在星期四就不会变色了。

4. 属性选择器

属性选择器,一般用的比较少,下面还是介绍一下。

属性选择器基础语法

one clear   one-clear    oneclear
[attribute] 用于选取带有指定属性的元素
[attribute=value]   用于选取带有指定属性和值的元素。(带空格的不能选中)。
[attribute~=value]  用于选取指定属性值 并且 带空格的带空格的专用)。
[attribute|=value]  用于选取指定属性值 并且  '-' 其余两个不能选中'-'的专用)。
[attribute^=value]  以指定属性值为开头的每个元素
[attribute$=value]  以指定属性值为结尾的每个元素
[attribute*=value]  只要包含指定属性值就行

举个例子

/* 为带有 title 属性的所有元素设置样式 */
[title]{
    color:red;
}

/* 为带有 title="whphp" 的所有元素设置样式 */
[title=whphp]{
    border:5px solid blue;
}

/* 为 title 中包含 "hello" 的所有元素设置样式 */
[title~=hello]{
    color:red;
}

5. 后代选择器

后代选择器是非常重要非常常用的,请务必掌握!

所谓后代选择器,就是这个元素的后代。。。
所谓后代,就是儿子、孙子、重孙等等。。。

怎么好像说的都是废话,我们还是来看实例吧,有如下 html:

<div><a href="#">你好</a></div>
<div><p>今天的天气很好</p></div>
<div><b>中午吃什么呢?</b></div>

如果我们想要给中午吃什么呢?改变一下样式。
这个时候,你当让可以给包裹他的b标签来设置一个class或者id,当然还有更简单的方法。

div b {
    color: blue;
}

注意divb之前有一个空格。
因为b标签是div标签的后代,是div标签的儿子,当然是div的后代了。
通过这种层级关系的选择器,浏览器就会先找到所有的div, 然后在找到里面含有b标签的。
这样就只有中午吃什么呢?符合条件咯。

由此引发一个问题,假如有如下 html:

<div class="yellow">
    <span>天空之城</span>
    <p>
        <span>龙猫</span>
    </p>
</div>

当我们想给天空之城龙猫改变颜色的时候,可以写如下选择器

.yellow span {
    color: yellow;
}

因为天空之城yellow儿子,而龙猫yellow孙子,他们都是yellow的后代,所以都可以被改变。
可是,如果我只想给天空之城改变颜色,那有没有办法解决呢?

6. 子类选择器

还是上面的那段html,我们将css选择器改一下,就可以实现上面的需要求了。

.yellow > span {
    color: yellow;
}

通过>来表示子类选择器
所谓子类选择器,就是这个元素的儿子,除了儿子外,孙子重孙等等在下一级的不会被选中。
注意:此选择器,低版本IE浏览器不兼容。IE浏览器,互联网工程师们永远的痛!

7. 通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配 html 中任意标签元素,如下使用下面代码使用 html 中任意标签元素字体颜色全部设置为红色:

* {color:red;}

8. 分组选择器

当你想为 html 中多个标签元素设置同一个样式时,可以用分组选择器

h1,span{color:red;}

它相当于下面两行代码:

h1{color:red;}
span{color:red;}

9. 伪类选择器

用于当已有元素处于的某个状态时,为其添加对应的样式
比如说我们给标签的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

10. CSS 的继承

CSS 的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代。

11. 根据权值来判断使用哪个 css 样式(权重、重叠、重要性)

浏览器是根据权值来判断使用哪种 css 样式的,权值高的就使用哪种 css 样式。
下面是权值的规则:

标签的权值为 1,类选择符的权值为 10,ID 选择符的权值最高为 100。例如下面的代码:

p {color:red;} /*权值为1*/
p span {color:green;} /*权值为1+1=2*/
.warning {color:white;} /*权值为10*/
p span.warning {color:purple;} /*权值为1+1+10=12*/
#footer .note p {color:yellow;} /*权值为100+10+1=111*/

重叠:
当有相同权重的样式存在时,会根据这些 css 样式的前后顺序来决定,理解为后面的样式会覆盖前面的样式.
如下面代码:

p {color:red;}
p {color:green;}

重要性:
有些特殊的情况需要为某些样式设置具有最高权值,这时候我们可以使用! important 来解决。
如下代码:

p {color:red!important;}
p {color:green;}

已添加到喜欢了