四时宝库

程序员的知识宝库

2024年09月25日

CSS:CSS基础语法与选择器（css的基础选择器有哪些）

1 CSS基础概念

1.1 CSS的作用与优势

CSS，全称为Cascading Style Sheets（层叠样式表），是一种用于描述HTML或XML文档中元素的外观和布局的语言。它独立于HTML，使得内容与样式分离，极大地提高了网页设计的灵活性和可维护性。


1.1.1 作用

  • 控制布局：CSS允许你精确控制网页元素的位置和大小，实现复杂的布局设计。
  • 美化页面：通过CSS，可以改变字体、颜色、背景等，使网页更加美观。
  • 提高效率：CSS可以被多个网页引用，减少代码重复，提高开发效率。
  • 响应式设计：CSS3引入了媒体查询，使得网页能够根据不同的设备屏幕大小自动调整布局。

1.1.2 优势

  • 可维护性：样式与内容分离，修改样式不会影响内容结构，便于维护。
  • 兼容性：CSS被所有现代浏览器支持，确保了跨平台的兼容性。
  • 性能：CSS文件可以被缓存，减少网络传输，提高页面加载速度。

1.2 CSS的工作原理

CSS的工作原理基于选择器和声明。选择器用于指定要应用样式的HTML元素，而声明则定义了元素的样式属性和值。

1.2.1 选择器

  • 元素选择器：直接选择HTML标签，如p选择所有<p>元素。
  • 类选择器：选择具有特定类名的元素，如.myClass。
  • ID选择器：选择具有特定ID的元素，如#myID。
  • 属性选择器：选择具有特定属性的元素，如[type="text"]。

1.2.2 声明

声明由属性和值组成，如color: red;。多个声明可以组合在一个大括号{}中，形成一个规则集。

1.2.3 层叠和继承

  • 层叠：当多个规则应用于同一个元素时，CSS会根据优先级决定应用哪个规则。
  • 继承：某些样式属性可以被子元素继承，如字体大小和颜色。

1.3 CSS的编写位置

CSS可以以三种方式编写：

1.3.1 内联样式

直接在HTML元素中使用style属性添加样式，如：

<p style="color: red;">这是一个红色的段落。</p>

1.3.2 内部样式表

在HTML文档的<head>部分使用<style>标签定义样式，如：

<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>

1.3.3 外部样式表

将样式定义在一个独立的.css文件中，然后在HTML文档中引用，如：

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>这是一个红色的段落。</p>
</body>

在styles.css文件中：

/* styles.css */
p {
color: red;
}

外部样式表是最常用的方式，因为它可以被多个HTML文件共享，提高了代码的复用性和维护性。

以上内容详细介绍了CSS的基础概念，包括其作用、优势、工作原理以及编写位置的不同方式。通过这些基础知识，你可以开始探索更复杂的CSS语法和选择器，进一步提升网页设计的技能。

2 CSS基础语法

2.1 声明的结构

在CSS中，样式规则由选择器和声明块组成。选择器确定了哪些HTML元素将应用样式，而声明块包含了具体的样式属性和值。声明块由一对大括号{}包围，其中包含一个或多个声明。每个声明由属性和值组成，属性和值之间用冒号:分隔，声明之间用分号;分隔。

2.1.1 示例

/* 为所有段落元素设置字体大小和颜色 */
p {
font-size: 16px; /* 设置字体大小为16像素 */
color: #333; /* 设置字体颜色为深灰色 */
}

在这个例子中，p是选择器，它选择了所有的<p>元素。声明块包含了两个声明：font-size和color。font-size属性被设置为16px，color属性被设置为#333，这是一个十六进制颜色代码，代表深灰色。

2.2 属性与值

CSS属性定义了样式规则的类型，如颜色、字体大小、边距等。每个属性都有一个或多个可能的值，这些值决定了属性的具体表现。属性和值的组合构成了一个声明，用于改变HTML元素的外观。

2.2.1 示例

/* 设置标题的字体和背景颜色 */
h1 {
font-family: Arial, sans-serif; /* 设置字体为Arial，如果没有则使用无衬线字体 */
background-color: lightblue; /* 设置背景颜色为浅蓝色 */
}

在这个例子中，h1选择器选择了所有的<h1>元素。font-family属性被设置为Arial, sans-serif，这意味着如果系统中没有Arial字体，将使用无衬线字体作为替代。background-color属性被设置为lightblue，这是一个预定义的颜色名称，代表浅蓝色。

2.3 注释的使用

在CSS中，注释用于解释代码或暂时禁用某些样式规则。注释以/*开始，以*/结束。在编写复杂的样式表时，注释可以帮助其他开发者理解代码的意图，也可以在调试时方便地关闭某些规则。

2.3.1 示例

/* 设置所有列表项的样式 */
ul li {
list-style-type: none; /* 移除列表项前的符号 */
padding: 10px; /* 设置列表项的内边距 */
}
/* 以下规则为按钮添加阴影效果 */
button {
box-shadow: 3px 3px 5px #888888; /* 添加阴影，水平偏移3px，垂直偏移3px，模糊半径5px，颜色为灰色 */
}

在这个例子中，我们使用注释来解释每个规则的作用。ul li选择器选择了所有<ul>元素内的<li>元素，list-style-type属性被设置为none，移除了列表项前的符号。padding属性被设置为10px，为列表项添加了内边距。对于button元素，我们使用box-shadow属性添加了阴影效果，注释详细解释了阴影的参数含义。

通过这些示例，我们可以看到CSS基础语法的结构，如何使用属性和值来定义样式，以及如何使用注释来增强代码的可读性和可维护性。掌握这些基本概念是学习CSS的关键，它们将帮助你创建美观且功能强大的网页布局。

3 CSS选择器详解

3.1 元素选择器

3.1.1 原理

元素选择器是最基本的CSS选择器类型，它允许你根据HTML文档中的元素类型来选择元素。例如，如果你想选择所有的<p>元素，你可以使用p作为选择器。

3.1.2 内容

元素选择器直接使用HTML元素的标签名称。当CSS规则应用到这些元素时，所有具有该标签的元素都会受到影响。

3.1.2.1 示例

假设我们有以下HTML结构：

<!-- HTML结构 -->
<div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<h1>这是一个标题。</h1>
</div>

我们可以使用元素选择器来选择所有的`<p>`元素，并设置它们的样式。

/* CSS代码 */
p {
color: blue;
font-size: 16px;
}

在上述CSS代码中，`p`选择器将选择所有的`<p>`元素，并将它们的颜色设置为蓝色，字体大小设置为16像素。

3.2 类选择器

3.2.1 原理

类选择器允许你根据HTML元素的类属性来选择元素。类选择器以.开头，后跟类名。一个类可以被多个元素共享，这意味着你可以使用相同的类选择器来选择多个元素。

3.2.2 内容

类选择器提供了一种更灵活的方式来应用样式，因为你可以将相同的类名应用到文档中的多个元素上。

3.2.2.1 示例

假设我们有以下HTML结构：

<!-- HTML结构 -->
<div>
<p class="highlight">这是一个高亮的段落。</p>
<p>这是一个普通的段落。</p>
<h1 class="highlight">这是一个高亮的标题。</h1>
</div>

我们可以使用类选择器来选择所有具有`highlight`类的元素，并设置它们的样式。

/* CSS代码 */
.highlight {
background-color: yellow;
font-weight: bold;
}

在上述CSS代码中，`.highlight`选择器将选择所有具有`highlight`类的元素，并将它们的背景颜色设置为黄色，字体加粗。

3.3 ID选择器

3.3.1 原理

ID选择器允许你根据HTML元素的ID属性来选择元素。ID选择器以#开头，后跟ID名。与类选择器不同，ID在一个文档中应该是唯一的，这意味着每个ID选择器只能选择一个元素。

3.3.2 内容

ID选择器提供了高度特异性，可以用于选择文档中特定的元素，通常用于页面布局或特定功能的元素。

3.3.2.1 示例

假设我们有以下HTML结构：

<!-- HTML结构 -->
<div>
<p>这是一个段落。</p>
<p id="special">这是一个特殊的段落。</p>
<h1>这是一个标题。</h1>
</div>

我们可以使用ID选择器来选择具有`special`ID的元素，并设置它的样式。

/* CSS代码 */
#special {
color: red;
font-size: 20px;
}

在上述CSS代码中，`#special`选择器将选择具有`special`ID的元素，并将它的颜色设置为红色，字体大小设置为20像素。

3.4 总结

通过使用元素选择器、类选择器和ID选择器，你可以精确地控制HTML文档中元素的样式。元素选择器适用于所有相同类型的元素，类选择器适用于具有相同类的多个元素，而ID选择器适用于具有特定ID的单个元素。理解这些选择器的使用是CSS样式设计的基础。

4 CSS复合选择器详解

4.1 后代选择器

4.1.1 原理

后代选择器用于选择某个元素的子元素、孙元素等所有后代元素。它由两个或多个选择器组成，中间用空格分隔。第一个选择器表示祖先元素，后面的每个选择器表示一个后代元素。例如，div p 选择器会选中所有位于 div 元素内部的 p 元素。

4.1.2 示例

假设我们有以下HTML结构：

<div class="container">
<p>这是一个段落。</p>
<div class="inner">
<p>这是另一个段落。</p>
</div>
</div>

我们可以使用后代选择器来为所有位于 .container 内的 p 元素添加样式：

/* 选择所有位于 .container 内的 p 元素 */
.container p {
color: blue;
font-size: 16px;
}

在上述CSS中，.container p 选择器将选中所有位于 .container 元素内部的 p 元素，并将它们的颜色设置为蓝色，字体大小设置为16px。

4.2 相邻兄弟选择器

4.2.1 原理

相邻兄弟选择器用于选择紧接在另一个元素后的元素，且两个元素有相同的父元素。它由两个选择器组成，第一个选择器表示前一个元素，第二个选择器表示紧接在前一个元素后的元素。相邻兄弟选择器使用 + 符号连接两个选择器。例如，h1 + p 选择器会选中所有紧接在 h1 元素后的 p 元素。

4.2.2 示例

假设我们有以下HTML结构：

<h1>标题</h1>
<p>这是一个段落。</p>
<h1>另一个标题</h1>
<p>这是另一个段落。</p>

我们可以使用相邻兄弟选择器来为紧接在 h1 元素后的 p 元素添加样式：

/* 选择紧接在 h1 元素后的 p 元素 */
h1 + p {
color: red;
font-size: 18px;
}

在上述CSS中，h1 + p 选择器将选中所有紧接在 h1 元素后的 p 元素，并将它们的颜色设置为红色，字体大小设置为18px。

4.3 通用兄弟选择器

4.3.1 原理

通用兄弟选择器用于选择与另一个元素有相同父元素的元素，但不一定是紧接在另一个元素后的。它由两个选择器组成，第一个选择器表示前一个元素，第二个选择器表示与前一个元素有相同父元素的元素。通用兄弟选择器使用 ~ 符号连接两个选择器。例如，h1 ~ p 选择器会选中所有与 h1 元素有相同父元素的 p 元素。

4.3.2 示例

假设我们有以下HTML结构：

<h1>标题</h1>
<p>这是一个段落。</p>
<div>这是一个div。</div>
<p>这是另一个段落。</p>

我们可以使用通用兄弟选择器来为与 h1 元素有相同父元素的 p 元素添加样式：

/* 选择与 h1 元素有相同父元素的 p 元素 */
h1 ~ p {
color: green;
font-size: 20px;
}

在上述CSS中，h1 ~ p 选择器将选中所有与 h1 元素有相同父元素的 p 元素，并将它们的颜色设置为绿色，字体大小设置为20px。

通过这些示例，我们可以看到复合选择器如何帮助我们更精确地控制页面中元素的样式，而不需要为每个元素单独添加类或ID。

5 CSS：属性选择器与伪类

5.1 属性选择器

属性选择器允许你根据元素的属性和属性值来选择元素。这在处理具有特定属性的HTML元素时非常有用，例如选择所有带有class属性的元素，或者选择所有带有特定data-*属性的元素。

5.1.1 基本语法

属性选择器的基本语法如下：

/* 选择所有具有属性name的元素 */
[name] {
/* CSS样式 */
}
/* 选择所有属性name的值为value的元素 */
[name="value"] {
/* CSS样式 */
}
/* 选择所有属性name的值包含value的元素 */
[name^="value"] {
/* CSS样式 */
}
/* 选择所有属性name的值以value结尾的元素 */
[name$="value"] {
/* CSS样式 */
}
/* 选择所有属性name的值包含value的元素 */
[name*="value"] {
/* CSS样式 */
}
/* 选择所有属性name的值不等于value的元素 */
[name!="value"] {
/* CSS样式 */
}
/* 选择所有属性name的值不是以value开头的元素 */
[name^!="value"] {
/* CSS样式 */
}
/* 选择所有属性name的值不是以value结尾的元素 */
[name$!="value"] {
/* CSS样式 */
}
/* 选择所有属性name的值不包含value的元素 */
[name*!="value"] {
/* CSS样式 */
}

5.1.2 示例

假设我们有以下HTML结构：

<div class="box" data-type="primary">主要盒子</div>
<div class="box" data-type="secondary">次要盒子</div>
<div class="box">无数据类型的盒子</div>

我们可以使用属性选择器来选择data-type属性值为primary的div元素：

/* 选择data-type属性值为primary的div元素 */
div[data-type="primary"] {
background-color: blue;
}

这将使第一个div元素的背景颜色变为蓝色。

5.2 伪类选择器

伪类选择器用于选择具有特定状态的元素，例如当鼠标悬停在元素上时，或者元素是其父元素的第一个子元素时。

5.2.1 基本语法

伪类选择器的基本语法如下：

/* 选择处于特定状态的元素 */
selector:pseudo-class {
/* CSS样式 */
}

5.2.2 示例

假设我们有以下HTML结构：

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

我们可以使用伪类选择器来选择列表中的第一个子元素：

/* 选择列表中的第一个子元素 */
li:first-child {
color: red;
}

这将使列表项1的文字颜色变为红色。

5.3 伪元素选择器

伪元素选择器用于选择元素的特定部分，例如元素的第一个字母或元素的第一个行。

5.3.1 基本语法

伪元素选择器的基本语法如下：

/* 选择元素的特定部分 */
selector::pseudo-element {
/* CSS样式 */
}

5.3.2 示例

假设我们有以下HTML结构：

<p>这是一个段落。</p>

我们可以使用伪元素选择器来选择段落的第一个字母：

/* 选择段落的第一个字母 */
p::first-letter {
font-size: 2em;
font-weight: bold;
}

这将使段落的第一个字母的字体大小变为2em，字体加粗。

以上就是关于CSS中的属性选择器、伪类选择器和伪元素选择器的详细介绍和示例。通过这些选择器，你可以更精确地控制页面的样式，使你的网页设计更加灵活和强大。

6 CSS：选择器的优先级

6.1 优先级概念

在CSS中，选择器的优先级决定了当多个规则应用于同一个元素时，哪个规则将被浏览器采用。优先级的计算基于选择器的类型和复杂度，确保了样式的一致性和可预测性。理解优先级的概念对于解决样式冲突和控制页面布局至关重要。

6.2 计算选择器的优先级

CSS选择器的优先级计算遵循以下规则：

  • 内联样式：具有最高的优先级，每个内联样式计为1000。
  • ID选择器：每个ID选择器计为100。
  • 类选择器、属性选择器和伪类：每个计为10。
  • 标签选择器和伪元素：每个计为1。
  • 通配符、子元素选择器、相邻兄弟选择器、一般兄弟选择器和空选择器：不计分，优先级为0。

优先级的总和由选择器中这些元素的数量决定。例如，一个选择器包含一个ID选择器和一个类选择器，其优先级为110（100 + 10）。

6.2.1 示例

假设我们有以下HTML结构：

<div id="main" class="container">
<p>这是一个段落。</p>
</div>

和以下CSS规则：

/* 选择器优先级为10 */
.container {
color: blue;
}
/* 选择器优先级为100 */
#main {
color: red;
}
/* 选择器优先级为1010 */
#main.container {
color: green;
}
/* 内联样式优先级为1000 */
<div id="main" class="container" style="color: yellow;">
<p>这是一个段落。</p>
</div>

在这个例子中，即使.container和#main都应用于<div>，但#main.container具有更高的优先级（1010），因此如果没有内联样式，文本将显示为绿色。然而，内联样式（1000）优先级最高，所以文本最终将显示为黄色。

6.3 优先级冲突解决

当两个或多个CSS规则具有相同优先级时，浏览器将遵循以下原则来决定应用哪个规则：

  1. 源顺序：在CSS文件中，后定义的规则将覆盖先定义的规则。
  2. 具体性：更具体的选择器将覆盖更通用的选择器。
  3. 重要性：带有!important声明的规则将覆盖没有该声明的规则，但这种做法应谨慎使用，因为它可能使样式表难以维护。

6.3.1 示例

考虑以下CSS规则：

/* 选择器优先级为10 */
.container {
color: blue;
}
/* 选择器优先级为10，但带有!important */
.container {
color: red !important;
}
/* 选择器优先级为10 */
.container {
color: green;
}

尽管.container被定义了三次，但由于!important的存在，文本颜色将最终显示为红色，即使它是中间定义的规则。

6.3.2 代码示例

/* 选择器优先级为10 */
.container {
color: blue;
}
/* 选择器优先级为100 */
#main {
color: red;
}
/* 选择器优先级为110 */
#main .container {
color: green;
}
/* 内联样式优先级为1000 */
<div id="main" class="container" style="color: yellow;">
<p>这是一个段落。</p>
</div>

在这个示例中，<div>元素的文本颜色将显示为黄色，因为内联样式的优先级最高。如果没有内联样式，颜色将显示为绿色，因为#main .container的选择器优先级最高（110）。

通过理解CSS选择器的优先级和冲突解决原则，你可以更有效地控制网页的样式，避免不必要的覆盖和冲突，从而创建更加健壯和可维护的CSS代码。

标签：css鼠标样式 

作者:sishi88 , 分类:技术教程 , 浏览:14 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接