百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

CSS选择器详解

作者刘中流课程任务二:零基础HTML及CSS编码(一)3040次浏览52017-03-25 18:33

选择器的种类有很多,可以到 w3cschool 去看看了解一下。也可以在 慕课网 中实践一下。

一、上下文选择器

标签选择器

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

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

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

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

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

后代组合选择器

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

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

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

子选择器

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

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

同胞选择器

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

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

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

一般同胞选择器

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

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

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

通用选择器

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

*{
  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属性设定任何值,但不能以数字或特殊符号开头。

类选择器

body标签包含的任何HTML元素都可以添加class属性,如:

<h1 class="specialtext">这是一个H1标签</h1>
<p>这是一个段落。</p>
<p class="specialtext featured">这是另一个段落</p>

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类选择器的两个类名之间没有空格,如果加了空格就变成了“祖先/后代”关系的上下文选择器了。

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量。

总结(来自知乎:Milo)

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

三、属性选择器

属性名选择器

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

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

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

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

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

属性值选择器

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

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

只有在title属性值为“red flower”时,才会为图片加上边框样式。

属性和值选择器-多个值

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

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

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

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

设置表单样式

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>

2、nth-child(n)

n可以是表示一个数值(也可以使用odd或者even表示奇数和偶数,也可用2n+1或者2n来表示),例如:

li:nth-child(3) {color: grey;}

:nth-child伪类最常用于提高表格的可读性,交替使用不同的颜色。

还有伪元素,内容有点多,就不一一介绍了。

参考资料:《CSS设计指南》、[w3cschool]http://www.w3school.com.cn/)
我的博客:http://liuxiaoyu.cc 欢迎骚扰~

502条评论