devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS基础和选择器

作者：羊村懒王 | 2024-02-22 06:40:47

赞

踩

CSS基础和选择器

【一】CSS基础

【1】什么是CSS

  • CSS（层叠样式表）是一种用于描述HTML（超文本标记语言）文档外观样式的语言。
  • 它通过定义样式规则来控制网页的布局、字体、颜色、背景等外观效果，使网页变得更加美观和可读。

【2】注释语法

  • 在CSS中，注释可以用来添加说明、注解或者暂时禁用一些代码。
  • 注释在CSS文件中不会被浏览器解析和显示。
  • 注释以/*开始，以*/结束，之间的内容将被视为注释。
/* 注释内容 */

  • 1

【3】语法结构

  • CSS的语法结构由选择符和声明块组成。
  • 选择符指定要应用样式的HTML元素或者元素组。例如，可以使用标签名、类名、ID等作为选择符。
  • 声明块由一对花括号{}包围，包含了一条或多条样式声明。每条样式声明由一个样式属性和对应的样式属性值组成，用冒号:分隔。多个样式属性之间用分号;分隔。
选择符 {
    样式属性: 样式属性值;
    样式属性: 样式属性值, 样式属性值, 样式属性值;
}

  • 1
  • 2
  • 3
  • 4
  • 在实际的CSS文件中，通常会有大量的样式规则，可以根据需要对不同的HTML元素进行样式定义，使网页达到所需的外观效果。
  • 当CSS样式规则较多时，可以使用注释来辅助辨别和查找，提高代码的可读性和维护性。

【4】css的三种引入方式

（1）行内式
  • 在HTML标签内部使用style属性直接编写CSS样式。这种方式将HTML和CSS混合在一起，增加了耦合度，一般不推荐使用。
<h1 style="color: blue">注册页面</h1>

  • 1
（2）style标签内部直接书写
  • 在HTML文件的<head>标签内部使用<style>标签，直接编写CSS代码。
  • 这种方式适合于简单的样式定义，方便查看和修改。
<head>
    <style>
        /*蓝色一级标题*/
        h1 {
            color: blue;
        }
    </style>
</head>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
（3）引入外部CSS文件
  • 在HTML文件的<head>标签内使用<link>标签引入外部CSS文件。
  • 这是最正规的方式，可以将CSS代码与HTML代码分离，提高代码的可维护性和复用性。
<!--html文件-->
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <link rel="stylesheet" href="test.css">
</head>
<body>
<h1>注册页面</h1>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
/*test.css文件*/
h1 {
    color: blue;
}

  • 1
  • 2
  • 3
  • 4

【二】选择器

【1】基本选择器

  • 在CSS中，选择器用于选取HTML文档中的元素，并将样式应用于这些元素。
  • 选择器根据其类型和语法的不同，可以选择不同的元素。
（1）元素/标签选择器（Element/Tag Selector）
  • 通过HTML元素的标签名选择元素。
  • 例：h1选择器选取所有<h1>标签元素。
/* 元素/标签选择器 */
h1 {
    /*一级标签为蓝色*/
    color: blue;
}

  • 1
  • 2
  • 3
  • 4
  • 5
（2）类选择器（Class Selector）
  • 通过HTML元素的class属性选择元素。
  • 类选择器以.开头，后面跟随类名。
  • 例：.highlight选择器选取所有具有class="highlight"的元素。
/* 类选择器 */
.highlight {
    /*类为hightlight的背景设为黄色*/
    background-color: yellow;
}

  • 1
  • 2
  • 3
  • 4
  • 5
（3）ID选择器（ID Selector）
  • 通过HTML元素的id属性选择元素。
  • ID选择器以#开头，后面跟随ID名。
  • 例：#header选择器选取具有id="header"的元素。
/* ID选择器 */
#header {
    /*ID为header的字体为24像素*/
    font-size: 24px;
}

  • 1
  • 2
  • 3
  • 4
  • 5
（4）通用选择器（Universal Selector）
  • 选择所有的HTML元素。
  • 通用选择器使用*表示。
  • 例：*选择器选取所有元素。
/* 通用选择器 */
* {
    /*所有元素的内外边距都设为0*/
    margin: 0;
    padding: 0;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

【2】组合选择器

  • 组合选择器是CSS中用于选择特定元素关系的选择器。常见的组合选择器包括后代选择器、儿子选择器、毗邻选择器和弟弟选择器。
（1）后代选择器（Descendant Selector）
  • 使用空格表示，选择某个元素的后代元素。
  • 例：div p选择器选取所有在<div>标签内部的<p>标签元素。
（2）儿子选择器（Child Selector）
  • 使用>符号表示，选择某个元素的直接子元素。
  • 例：div > span选择器选取所有直接作为<div>标签子元素的<span>标签元素。
（3）毗邻选择器（Adjacent Sibling Selector）
  • 使用+符号表示，选择某个元素的下一个紧邻的兄弟元素。
  • 例：div + a选择器选取紧跟在<div>标签后面的第一个<a>标签元素。
（4）弟弟选择器（General Sibling Selector）
  • 使用~符号表示，选择某个元素之后的所有兄弟元素。
  • 例如，div ~ a选择器选取所有在<div>标签后面的<a>标签元素。
（5）示例说明
<div id="d1">div1
	<div id="d2">div2
		<p>p1</p>
	</div>
	<p>p2
		<span>span1</span>
	</p>
	<span>span2</span>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 对于div1来说，div2、p2、span2都是儿子。
  • 对于div2、p2、span2来说，div1是父亲。
  • 对于p1来说，div2是父亲，div1是爷爷（可以将div1和div2统称为祖先）。
  • 对于span2来说，div2、p2是哥哥，span2是弟弟。
  • div1内部所有的标签，无论层级如何，都可以称之为div1的后代。
/* 1.儿子选择器（关键符号是大于号） */
#d1 > span {
    /* 选择id为d1的标签内部所有的儿子span */
    color: red;
}

/* 2.后代选择器（关键符号是空格） */
#d1 span {
    /* 选择id为d1的标签内部所有的后代span */
    color: blue;
}

/* 3.毗邻选择器（关键符号是加号） */
#d2 + p {
    /* 选择id为d1的标签同级别下面紧挨着第一个p标签 */
    color: green;
}

/* 4.弟弟选择器（关键符号是小波浪号） */
#d2 ~ p {
    /* 选择id为d1的标签同级别下面所有p标签 */
    color: brown;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

【3】属性选择器

  • 属性选择器是CSS中用于选择具有特定属性的元素的选择器。
  • 属性选择器可以根据属性的存在、属性值的匹配等条件来选择元素。
（1）含有某个属性
  • 选择具有指定属性的元素。
  • 例：[type]选择器选取所有具有type属性的元素。
（2）含有某个属性并且有某个值
  • 选择具有指定属性且属性值与指定值匹配的元素。
  • 例：[type='text']选择器选取所有type属性值为text的元素。
（3）含有某个属性并且有某个值的某个标签
  • 选择某个标签内具有指定属性且属性值与指定值匹配的元素。
  • 例：div[type='text']选择器选取所有<div>标签内具有type属性值为text的元素。

【4】选择器分组和嵌套

（1）分组
  • 分组选择器允许同时选择多个不同类型的元素，并为它们应用相同的样式。
  • 分组选择器使用逗号 , 将不同的选择器进行分隔。
div, p, span {
    color: red;
}

  • 1
  • 2
  • 3
（2）嵌套
  • 嵌套选择器允许选择某个元素内部的特定元素。
.container {
    background-color: green;
  /* 选择 .container 元素内部的 .box 元素 */
  .box {
    background-color: yellow;
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

【5】伪类选择器

  • 伪类选择器是 CSS 中用于选择元素的特殊选择器

  • 根据元素的状态或位置选择元素，而不仅仅是根据元素本身的标记名、类名或其他属性来选择。

（1）:hover
  • 选择鼠标悬停在元素上的状态。可以用来添加鼠标悬停时的样式效果。
/*鼠标悬停在链接上时将链接的文本颜色设置为红色*/
a:hover {
  color: red;
}

  • 1
  • 2
  • 3
  • 4
（2）:active
  • 选择元素被激活（被点击）的状态。
  • 通常用于给按钮或链接添加点击效果。
/*按钮被点击时将按钮的背景颜色设置为蓝色*/
button:active {
  background-color: blue;
}

  • 1
  • 2
  • 3
  • 4
（3）:focus
  • 选择当前获得焦点的元素。
  • 适用于表单元素，当用户点击或使用 Tab 键导航时，元素会获得焦点。
/*输入框获得焦点时将边框颜色设置为绿色*/
input:focus {
  border-color: green;
}

  • 1
  • 2
  • 3
  • 4
（4）:first-child
  • 选择作为其父元素的第一个子元素的元素。
  • 可以用来选择列表中的第一个元素或某个容器中的第一个子元素。
/*将选择无序列表中的第一个列表项，并将其文本设置为粗体*/
ul li:first-child {
  font-weight: bold;
}

  • 1
  • 2
  • 3
  • 4
（5）:last-child
  • 选择作为其父元素的最后一个子元素的元素。类似于 :first-child，但选择的是最后一个子元素。
/*将选择无序列表中的最后一个列表项，并将其文本颜色设置为紫色*/
ul li:last-child {
  color: purple;
}

  • 1
  • 2
  • 3
  • 4
（6）:nth-child(n)
  • 选择作为其父元素的第 n 个子元素的元素。
  • 可以使用具体的数字、关键字（如 even 表示偶数，odd 表示奇数），或者公式来选择特定的子元素。
/*将选择无序列表中的奇数位置的列表项，并将它们的背景颜色设置为浅灰色*/
ul li:nth-child(odd) {
  background-color: lightgray;
}

  • 1
  • 2
  • 3
  • 4

【6】伪元素选择器

  • 伪元素选择器允许在元素的特定部分之前或之后插入内容，并对其进行样式化。
  • 它们以双冒号 :: 开头，并用于选择元素的虚拟部分，而不是实际存在于 DOM 中的元素。
  • befor 和 after 通常都是用来清除浮动带来的影响，即父标签塌陷的问题
（1）::before
  • 在选定元素的内容之前插入生成的内容。可以用于添加装饰性的内容，如图标或装饰符号。
/*在每个p元素的内容之前插入>>，并将其颜色设置为红色*/
p::before {
  content: ">>";
  color: red;
}

  • 1
  • 2
  • 3
  • 4
  • 5
（2）::after
  • 在选定元素的内容之后插入生成的内容。可以用于添加额外的内容或装饰性元素。
/*在每个链接的内容之后插入 " (外部链接)"，并将其样式设置为斜体*/
a::after {
  content: " (外部链接)";
  font-style: italic;
}

  • 1
  • 2
  • 3
  • 4
  • 5
（3）::first-line
  • 选择元素的第一行文本。可以用于对段落的第一行或标题的第一行应用特殊样式。
/*将标题元素的第一行文本设置为 24 像素大小和粗体*/
h1::first-line {
  font-size: 24px;
  font-weight: bold;
}

  • 1
  • 2
  • 3
  • 4
  • 5
（4）::selection
  • 选择用户选择的文本部分。可以用于自定义用户选择文本的样式。
/*将用户选择的文本的背景颜色设置为黄色，文本颜色设置为黑色*/
::selection {
  background-color: yellow;
  color: black;
}

  • 1
  • 2
  • 3
  • 4
  • 5
（5）::first-letter
  • 选择元素的第一个字母或第一个字符，并对其应用样式。
  • 这个选择器可以用于段落、标题、列表项等元素。
/*每个段落的第一个字母，字体大小设置为 24 像素，颜色设置为红色，并使其向左浮动*/
p::first-letter {
  font-size: 24px;
  color: red;
  float: left;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

【7】选择器优先级

  • 选择器优先级是用于确定在多个选择器应用于同一个元素时，哪个选择器的样式将具有更高的优先级。
  • 优先级是根据选择器的特定组合和权重来计算的，一般情况下，优先级越高的选择器的样式将被应用。
（1）选择器不同
  1. 内联样式：具有最高优先级的是直接应用在元素上的内联样式。内联样式是通过元素的 style 属性来定义的。
  2. ID 选择器：ID 选择器具有比大多数其他选择器更高的优先级。ID 选择器以 # 符号开头，后面跟着元素的唯一标识符。
  3. 类选择器、属性选择器和伪类选择器：这些选择器具有相同的优先级，它们以 .、[] 或 : 开头。
  4. 元素选择器和伪元素选择器：这些选择器具有最低的优先级。元素选择器是指对元素类型进行选择，而伪元素选择器以 :: 开头。
（2）选择器相同
  • 就近原则

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/128926
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号