|
本节咱们来学习 CSS 中的选取器，选取器是 CSS 里面一个很要紧的概念，HTML 中的所有标签样式，都是经过区别的 CSS 选取器进行掌控的。咱们只必须经过选取器，就能够对区别的 HTML 标签进行选取，并指定各样样式声明。
在 CSS 中三三种最基本的选取器，分别是标签选取器、类选取器（class）、ID选取器。
咱们晓得在 HTML 页面中引入 CSS 样式最好的办法是引入外边样式，亦便是将 CSS 代码单独安置到一个 .css 文件内，而后再引入这个 CSS 文件。
标签选取器
咱们晓得一个 HTML 页面是经过非常多标签构成的，CSS 标签选取器便是用来声明这些标签的，由于每一个 HTML 标签的名叫作都能够做为相应的标签选取器的名叫作。
示例：
例如咱们来看一个例子，下面是一段 HTML 代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>侠课岛</h3>
<p>你好，侠课岛！</p>
</body>
</html>
倘若咱们要为这两个标签定义 CSS 样式，就能够直接在 .css 文件内经过标签选取器来声明样式：
h3{
color: red ;
}
p{
color: green;
}
记得在 HTML 中经过 <link> 标签来引入 CSS 文件，此时在浏览器中的演示效果如下所示：
从以上代码中，咱们看到，CSS 语法便是由选取器和声明块 {} 构成，每一个声明块中能够包括一个或多个样式声明，并且每条声明后面以分号 ; 结尾。
当然除了以上例子中的 p 、h3 标签能够做为标签选取器，其他的例如 html、body、a、img 等所有标签都是能够做为标签选取器的。
然则咱们在运用标签选取器的时候会有一个问题，举个例子，咱们先来看下面这段代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>动物园里有什么？</h3>
<p>小白兔</p>
<p>小狮子</p>
<p>小老虎</p>
<p>小猴子</p>
</body>
</html>
在浏览器中的演示效果：
倘若咱们想要将以上代码中 “小兔
| 
发表于 2024-6-30 06:32:40
