【WEB】CSS选择器总结_<style=h1>-CSDN博客

一、上下文选择器

1.标签选择器

<style>
  h1 {font-size: 16px;}
  p {color:red;}
</style>

代码中的h1和p就是选择器，他们是选择器里面最常用的一种，叫做标签选择器。我们可以直接通过标签元素来指定需要添加样式的位置。

如果我们需要为多个标签添加同一种样式时，我们可以把它们组合在一起，每个标签选择器用“,”隔开，如下：

<style>
  h1,h2,h3 {
    font-weight: bold;
    color: blue;
  }
</style>

这样的组合我们叫它分组选择器。

2.后代组合选择器

当我们想为下面的article和aside的段落文本分别设置不同的字号时，我们就可以用到后代选择器了，它们是在祖先元素和后代元素之间加了一个空格，如代码所示：

<style>
  article p {
    font-size: 12px;
  }
  aside p {
    font-size: 14px;
  }
</style>

后代选择器有一个问题就是，祖先元素选择的后代元素都会带有样式，但是我们有时候并不需要所有的标签都带有样式，这个时候我们就要用到其他的选择器了。

3.子选择器

我们可以用DOM中的父子元素关系来选择，也就是子选择器，两个元素中间用“>”来连接，如代码所示：

<style>
  article>p {
    font-size: 12px;
  }
</style>

同胞选择器

我们也可以通过同胞关系来选择，叫做同胞选择器或者是兄弟选择器，这就意味着选择器的标签元素需要具有同一个父元素，它们之间用“+”来连接，例子：

<style>
  h2+p {
    font-size: 12px;
  }
</style>

并且需要注意的是：p标签必须是紧跟在h2标签的后面。

4.一般同胞选择器

一般同胞选择器中间用“~”连接。

<style>
  h2~p {
    font-size: 12px;
  }
</style>

一般同胞选择器和同胞选择器的区别就是，p标签不一定是紧跟在h2标签的后面。

5.通用选择器

通用选择器是使用通配符“ * ”，它可以匹配任何元素。比如：

*｛
  color: green;
｝

它会导致所有文本和边框都变成绿色。这里有个小知识：

color属性设定的是前景色。前景色既影响文本也影响边框，但通常我们只用它设定文本颜色。

我们也可以这样使用通用选择器：

p* {
  color: green;
}

这样只会把p包含的所有元素的文本变成红色。
通用选择器还有一个有意思的用法，就是可以用它构成一个非子选择器，比如：

section*a {
  font-size: 1.3em;
}

代码所表示的是，所有section的孙子元素，而非子元素的a标签都会被选中。这个从逻辑上来说也好理解，左边的section代表通配符的父元素，右边的a代表通配符的子元素，而*就是所有中间元素的集合。

以上就是通过DOM的层次结构的“上下文”关系来表示的选择器。

二、id和类选择器

id和类选择器是我们在CSS中常用的选择器，它们可以更精确的定位到我们要添加样式的标签位置。只要在HTML标记中为元素添加id和class属性，就可以通过id和类选择器直接选择。

可以给id和class属性设定任何值，但不能以数字或特殊符号开头。

1.类选择器

类选择器前面要加一个“ . ” ，后面跟着类名，如下：

<style>
  p {
    font-family: helvetica,sans-serif;
  }
  .specialtext {
    font-style: italic;
  }
</style>

2、标签带类选择器

当然，需要更精确的也可以这样写：

<style>
  p {
    font-family: helvetica,sans-serif;
  }
  .specialtext {
    font-style: italic;
  }
  p.specialtext {
    color: red;
  }
  p.specialtext span{
    font-weight: bold;
  }
</style>

第三个样式只选择带.specialtext类的p，第四就更精确到p中的span元素了。
3、多类选择器

同个标签可以存在多个类属性，每个类都用空格分隔，要选择两个类名可以这样写：

<style>
  .specialtext.featured {
    font-size: 120%;
  }
</style>

注意：CSS类选择器的两个类名之间没有空格，如果加了空格就变成了“祖先/后代”关系的上下文选择器了。

4.ID选择器

ID与类的写法相似，只不过id选择器前面用“ # ”后面跟着id名，

<style>
  #specialtext {
    font-style: italic;
  }
</style>
***
***
***
<p id="specialtext">这是一个特殊段落</p>

id还可以用于页内导航

<a href="#bio">Biography</a>

这样的链接就可以直接在页面内跳转到具有id名为“bio”的标签的位置。如果没想好“href”中放什么链接，也可以用“#”来充当占位符。

什么时候用id，什么时候用类

1、什么时候用id

id的用途是在页面中唯一地标识一个元素，强调的是唯一性。每个id名称必须是不相同的，而且每个id名称在页面中只能用一次。尤其是于JavaScript关联时，相同的id可能会导致JS行为异常。
2、什么时候用类

类的目的是为了标识一组具有相同样式特征的元素，强调的是通用性。切不可乱用类，这样会增加需要编写和维护的CSS量。

ID具有唯一性，Class具有普遍性。
ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。
Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
ID的样式优先级高于Class。

三、属性选择器

1.属性名选择器

我们可能会遇到这样的HTML代码：

<img sec="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />

如果我们想要为带有title属性的图片添加样式，那么我们就可以用到属性名选择器了，如下：

img[title] {
  border: 2px solid blue;
}

这时，图片就会显示2像素宽的蓝色边框。一般来说title属性和alt属性都是设定相同的值，增加可阅读性。
2.属性值选择器

属性值选择器就更精确地定位我们所需要添加样式的位置了。如下：

img[title="red flower"] {
  border: 4px solid green;
}
***
***
***
<img src="images/red_flower.jpg" title="red flower" alt="red flower" />

只有在title属性值为“red flower”时，才会为图片加上边框样式。
3.属性和值选择器-多个值

[title~="hello"]{
  color: red;
}

该例子为包含指定值的title属性的所有元素设置样式,适用于由空格分隔的属性值。

[lang|=en] {
  color: red;
}

该例子为带有包含指定值的lang属性的所有元素设置样式。适用于由连字符分隔的属性值。
4.设置表单样式

input[type="text"]{
  width: 50px;
  display: block;
}

input[type="button"]{
  width:12opx;
  margin-left:35px;
}

选择器参考手册 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value]
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value]
匹配属性值中包含指定值的每个元素。

四、伪类

伪类与类相似，但它并没有附加到标记中的标签上，所以称之为伪类，伪类分两种：

UI伪类，会在html元素处于特定状态时，为该元素应用CSS样式。
结构化伪类，会在标记中存在某种结构上的关系时，为相应的元素引用CSS样式。

UI伪类

1、链接伪类

针对连接的伪类一共有四个，也是我们常用伪类，它们的顺序也始终是这样的：

a:Link {color: black;} /链接等待被点击/
a:visited {color: grey}
a:hover {text-decoration: none;} /鼠标悬停在这个链接上/
a:active {color:red;} /链接正在被点击（鼠标按下还没有释放）/

一个冒号（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素。

很多时候不一定要将四个元素都写出来。而且这些伪类也可以用于任何元素，如下：

p:hover {background-color: grey;}

这条代码就可以使鼠标悬停在p标签位置时，背景颜色变为灰色。
2、focus伪类

任何元素都可以运用focus伪类，但一般用于表单：

input：focus ｛background-color: yellow;｝

表单中的文本框在用户单击它时会获取焦点，同时为该文本框添加一个黄色背景。测试
3、:target伪类

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target选中它。

<style>
  #more_info:target {background:#eee;}
</style>

<a href="#more_info">More Information</a>

<h2 id="more_info">This is the information you are looking for.</h2>

用户单击链接跳转id为more_info的元素时，为该元素添加浅灰色背景。维基百科在其引证中就大量地使用了:target伪类。

结构化伪类

1、:first-child和:last-child

:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。如下：

<style>
  ol.results li:first-child {
    color: blue;
  }
  ol.results li:last-child {
    color: red;
  }
</style>

<ol class="results">
  <li>MY FAST PONY</li>
  <li>STEADY TROTTER</li>
  <li>SLOW OL'NAG</li>
</ol>