前端入门基础知识回顾（三）—— CSS选择器

最新推荐文章于 2024-10-05 14:02:44 发布

腾辉00

最新推荐文章于 2024-10-05 14:02:44 发布

阅读量234

点赞数

分类专栏： CSS HTML 文章标签： html css

腾辉原创

本文链接：https://blog.csdn.net/m0_50074259/article/details/108002413

版权

HTML 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

终于到了CSS的复习了，本以为HTML只要两三个小时就能整理完，没想到花了半天时间才大致梳理好。CSS我要把内容做的更详细一些。这块的时间不能耽误太多，后面还要边学JavaScript，暑假留给我的时间不多了。

仔细想想，CSS复习还是要从各种选择器开始，我认为这是样式链接骨架的桥梁，搞懂各种选择器和选择关系，就能够面对各种嵌套div不头疼。

依然，欢迎指出错误，真心感谢

本篇博客着重回顾各种选择器和使用方法，下面开始介绍

CSS的概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

层叠次序

在CSS里，有好几种样式写法如 外部样式表、内部样式表、内联样式
如果修饰一个元素的样式有几个时，会产生一定的优先权。其中内联样式有最高的优先权，内部样式次之，最后是外部样式表，可以理解为 近水楼台先得月 ，考的最近就是最后修饰的效果。

选择器分类

7 种基础的选择器

ID 选择器： 如 #id{}, 为标有特定 id 的 HTML 元素指定特定的样式
类选择器： 如 .class{}, 为一组 HTML 元素指定特定的样式
属性选择器： 如 a[href="segmentfault.com"]{}
伪类选择器： 如 :hover{}
伪元素选择器： 如 ::before{}
标签选择器： 如 span{}，又叫元素选择器、类型选择器
通配选择器： 如 *{}

3 种组合的选择器

后代选择符： .father .child{}
子选择符：.father > .child{}
相邻选择符： .bro1 + .bro2{}

注意事项！！！

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
类名的第一个字符不能使用数字！它无法在 Mozilla/Firefox 中起作用。`

标签选择器

顾名思义，标签选择器就是直接引用HTML元素的名称进行装饰。

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

类选择器

在 CSS 中，类选择器以一个点号显示，用类选择器时，需要在HTML的标签内定义class属性。注意： 类名的第一个字符不能使用数字！

<!--CSS 需要写在 <style> 标签里面-->
.center {text-align: center}

<h1 class="center">内容</h1>

元素也可以基于它们的类而被选择

td.fancy {
	color: #f60;
	background: #666;
	}
	
<td class="fancy">
<!--使用td元素来选择fancy类-->

ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。

使用方式和类选择器差不多。
注意： id 属性只能在每个 HTML 文档中出现一次。

属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

属性选择器就是在标签里面设置一个属性，然后在<style>标签里面用[]的形式进行装饰

<html>
<head>
 	<style type="text/css">
		[title]{ color:red; }
	</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

<hr />

<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

<html>
<head>

	<style type="text/css">
	a:link {color: #FF0000} 
</style>

</head>

<body>

	<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p> 

</body>
</html>

上面的效果是链接加粗并且链接名字为绿色

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。

伪元素选择器

CSS 伪元素用于向某些选择器设置特殊效果。

在这里插入图片描述

伪类与伪元素的特性及其区别：

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

CSS3中伪类和伪元素的语法不同；伪类 :link :hover 伪元素 ::before ::after

可以同时使用多个伪类，而只能同时使用一个伪元素；

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 “伪无素” 。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中.

伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。

因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

W3C中对于二者应用的描述(描述太模糊, 不容易理解)：

伪类：用于向某些选择器添加特殊的效果

伪元素：用于将特殊的效果添加到某些选择器

通配选择器

通配选择器用一个星号（*）表示。单独使用时，这个选择器可以与文档中的任何元素匹配。
一般可以用来做初始化的选择器* { margin: 0; padding: 0; }

派生选择器

派生选择器是通过依据元素在其位置的上下文关系来定义样式，这可以使标记更加简洁。许多选择器（如id选择器、类选择器）都可以用作派生选择器。

<html>
<head>
    <style>
        li strong {
        font-style: italic;
        font-weight: normal;
    }
    </style>
</head>
<body>
    <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
    <ol>
        <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
        <li>我是正常的字体。</li>
    </ol>
</body>
</html>

看完上面的例子。估计你就可以肯容易明白派生选择器是个什么东西了，就像开心消消乐的连线，css会寻找对应的标签或者属性，从而将修饰效果赋给它。

派生选择器的应用非常常见，如果要将派生选择器细分，可以再分为三种类型：
后代选择器、子元素选择器、相邻兄弟选择器

后代选择器

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器（浏览器会先找到后面的标签，在往回走，与前一个标签匹配，看是否符合条件）

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。因此，ul em 将会选择以下标记中的所有 em 元素：

<html>
<head>
  <style type="text/css">
    ul em {color:red; font-weight:bold;}
  </style>
</head>

<body>
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

上面代码运行后。1-3-2会被加红加粗并且倾斜

子元素选择器

后代选择器会将所有能匹配的元素都加上样式，有时候你并不想要这样，你希望缩小范围，只选择某个元素的子元素，这个时候你就可以用用子元素选择器了。

<html>
<head>
    <style type="text/css">
        h1 > strong {color:red;}
    </style>
</head>

<body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

上面的这段代码运行结果是第一行中的very very 会变成红色，而下面的字体任然是黑色，这时，如果你注意到<style>标签的内容的话，你就会发现子选择器用了大于号（子结合符），你可以在空格左右加空格，这都不影响修饰效果。

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

- 结合后代选择器和子选择器

右边面这个选择器：table.company td > p
这个选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

与以上两个选择器不同，相邻兄弟选择器作用的不是上下级，而是同级。

<html>
<head>
  <style type="text/css">
    li + li {font-weight:bold;}
  </style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>

值得注意的是：上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

- 结合其他选择器

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

上面便是各个选择器的介绍了，像伪类伪元素这些，我本来就学的不是很扎实，在这硬着头皮写，不过也收获了很多。

选择器的优先级

内联样式（1000） > ID 选择器（1000）> 类选择器（10）= 属性选择器（10）= 伪类选择器（10）> 标签选择器（1）= 伪元素选择器（1）> 通配符选择器（0）
计算选择符中a、b、c种类型的个数来统一判断优先级（将每组选择器的权重相加进行比较，但要注意这是256进制的）
有!important 的属性拥有最高优先级