css 规则的三种导入方式以及几类基础的选择器 - css

首页 > 博客列表 > css 规则的三种导入方式以及几类基础的选择器

博主信息

博文 29

粉丝 1

访问量 44490

专题推荐

更多>

一、css 规则的三种导入方式

1. 内部样式

内部样式是通过 style 标签引入的，这种样式导入仅在当前页面适用，一旦跳转到其他页面，想要引入当前页面的样式还得重新用 style 标签导入重新写一遍，这样会形成代码冗余。
页面样式示例：

<h1>这是一个测试标题</h1>

<style>
h1 {
color: lightblue;
border: 1px solid;
}
</style>

浏览器效果如下：

2. 外部样式

外部样式是使用 link 标签引入的已经写好的 css 样式表。它适用于所有引入了这个 css 样式表的 html 文档。

使用同一个页面样式示例，仅是将 style 标签中的 css 样式代码重写到一个 css 文件中，然后使用 link 标签导入就好。
示例：

<link rel="stylesheet" href="style/style.css" />

3. 行内样式

行内样式的话，它有点类似私人定制的意思。它的使用范围是仅限于当前页面的特定元素，使用 style 属性去定义。

样式示例：

<h1 style="border: 1px solid #000">这是一个测试标题</h1>

二、css 的几类基础选择器

1. 简单选择器

标签选择器

样式案例：

p {
background-color: lightblue;
}

类选择器

样式案例：(此处的 class 是 class 属性的值)

.calss {
color: lightblue;
}

id 选择器

样式案例：(此处的 id 是 id 属性的值)

#id{
border: 1px solid #000;
}

2. 上下文选择器

后代选择器（关键字：空格符）

选择范围是：所定位的标签下的所有后代标签

样式案例：

ul li {
background-color: lightgoldenrodyellow;
}

子元素选择器（关键字：“>”）

选择范围是:所定位标签的子标签

样式案例：

ul > li {
color: red;
}

同级之后紧邻选择器（关键字：“+”）

选择范围是：与所定位标签紧邻的之后的第一个兄弟元素

样式案例：

.a + li {
background-color: lightgreen;
}

同级之后所有选择器（关键字：“~”）

选择范围是：与所定位标签紧邻的之后的所有兄弟元素

样式案例：

.a ~ li {
background-color: yellow;
}

3.伪类选择器

使用 “:nth-of-type(an+b)” 以及其衍生物可以匹配到页面内任意一个位置的元素（an: 起始点； b：偏移量）

以以下 html 代码为示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>伪类选择器</title>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
    <ul>
      <li>这是唯一的</li>
    </ul>
  </body>
</html>