web入门

web入门

HTML

html介绍

HTML作用：用于描述网页

  • HTML是指超文本标记语言：Hyper Text Markup Language
  • HTML不是编程语言，是一种标记语言

html文档结构

我们已学习了一些HTML元素的基础知识。单独使用这些元素并没有意义。它们需要结合起来，才能形成完整的网页界面。

  • <!DOCTYPE html >: 它是文档声明。
  • **<html></html>: **<html>元素是整个完整页面的根元素。
  • <head></head>：<head>元素是一个容器。它包含了所有HTML页面的头部信息。这些信息用户不一定全都看见。这些信息包括搜索关键字，页面描述，CSS样式等。
  • <title></title>:<title>元素用来设置页面标题。它出现在浏览器标签上，当你的浏览器标记或收藏页面时，它可用来描述页面。
  • <body></body>:<body>元素包含了访问页面时所有显示在页面上的内容：文本，图片，音频，视频、动画等等。之前的课程，我们介绍过的<h>元素、<p>元素、<img>元素均可嵌套在<body>元素之中形成网页的主体内容。

综上：HTML的文档结构包括网页的<head>头部和<body>主体两个部分。

<!DOCTYPE html>
<html>
  <head>
    <title>My Puppy</title>
  </head>
  <body>
    <p>这是我的宠物成长日记页面</p>
  </body>
</html>

元素

  • 完整元素

一个元素 = 开始标签 + 内容 + 结束标签

  • 空元素

一些元素只有一个标签，元素的标签内附有一些额外信息。这样的元素叫做“空元素”。

例如：<img>就是一个空元素。它通常用来插入一张指定的图片。

<img src="https://7n.w3cschool.cn/attachments/image/20190719/1563518038368123.jpg">

块级元素与内联元素

块级元素：

块级元素：其代码如块状显示。块级元素通常用于展示页面上结构化的内容。如：段落、列表、导航菜单、页脚等。一个块级元素不可被嵌套进内联元素中，但可嵌套在其它块级元素中。

内联元素：

内联元素：它常出现在块级元素中并包裹着一小部分文档内容。内联元素在形式上通常如行状显示。它通常出现在一堆文字之间。如，超链接元素<a>，强调元素<em>元素和<strong>元素都是内联元素。

常用标签

标题<h1>~<h6>

标题（heading）：<h1>定义最大的标题。<h6> 定义最小的标题。

浏览器会自动的在标题前后添加空行

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

水平线标签

标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

html注释

​ 可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

​ HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

​ 注释写法如下:

<!-- 注释内容 -->
<p>段落标签

​ HTML 可以将文档分割为若干段落。

​ 段落是通过p标签定义的

注意：浏览器会自动地在段落的前后添加空行。（</p>是块级元素）


换行标签

​ 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br />标签。

​ 在 HTML 语言中， <br />标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段：

​ <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML文本格式化标签

​ HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。

<strong>与<b>(bold)加粗标签
<em>与<i>(italic)斜体标签
  • 区别：<b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。
与标签
  • sup上标字
  • sub下标字
<img>标签
  • 必需属性
    • src属性：图像文件路径的地址包裹其中, 可在网页内容中嵌入图像。
    • 替换文字属性alt：该属性是图像的描述内容。当图像不能正常显示时，它负责说明
<a>标签

超链接标签：对文本植入超链接

  • 空链接：HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。临时加的空链接，主要为了能更好的看到最终的效果。

    基本语法：

    <a href="#">链接文字</a>
其中“ # ”表示空链接。
  • 属性

    • href属性：超链接地址

    • target 属性：使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。

      • 属性值：_blank：打开新窗口

      提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。

    • id 属性：id 属性可用于在一个 HTML 文档中创建书签标记。

HTML 头部

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

HTML css

​ CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使 用CSS实现页面的内容与表现形式分离，极大提高了工作效率 。样式存储在样式表中，通常放在<head>部分或存储在 外部CSS文件中。作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

使用css
  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS文件

最好的方式是通过外部引用CSS文件.

HTML 表格<table>
HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗） 

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

//实例

<table border="1"> //　使用边框属性border来显示一个带有边框的表格：
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
表格空间

有以下两个属性，用于调整HTML表格中单元格的空间：

  • cellspacing属性-定义表格单元格之间的空间
  • cellpadding属性-表示单元格边框与单元格内容之间的距离
表格合并单元格
  • 如果要将两个或多个列合并为一个列，将使用colspan属性
  • 如果要合并两行或更多行，则将使用rowspan属性。
<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>
列表
  • 有序列表<ol>
  • 无序列表<ul>
  • 定义列表<dl>

列表中的每个项目都要用一个<li>元素包围

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定义列表的描述
HTML 区块
  • <div> 标签
  • <span> 标签
HTML 布局

基本：div+css布局方式

HTML 表单
表单介绍

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>
    ...
    标签
    ... 
</form>
表单输入标签<input>

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下

<form action="demo_form.php" method="post/get">

    <input type="text" name="email" size="40" maxlength="50"> 
    <input type="password"> 
    <input type="checkbox" checked="checked"> 
    <input type="radio" checked="checked"> 
    <input type="submit" value="Send"> 
    <input type="reset"> 
    <input type="hidden"> 

    <select> 
        <option>苹果</option> 
        <option selected="selected">香蕉</option> 
        <option>樱桃</option> 
    </select>

    <textarea name="comment" rows="60" cols="20">
    </textarea> 
</form>

HTML 5

HTML 5 新元素

css

css介绍

与HTML 一样，CSS 也不是真正的编程语言，甚至连标记语言都不是。

css：CSS是层叠样式列表。 单纯采用HTML制作的网页就像毛坯房一样，不美观；而使用CSS能使网页变得更加美观。CSS不止有美观的作用，它还能与HTML分离开来，保存为独立的文件。CSS的“闹独立”可使代码保持一致性，也使编程人员能更好的控制代码量。

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

css重点

选择器

CSS的选择器就像化妆盒。它告诉浏览器选择哪个标签美化。

样式

CSS的样式就像化妆盒中的眼影、腮红、口红等。它告诉浏览器要把网页美化成什么样子。好比女孩儿化妆的效果，烟熏妆、桃花妆、OL妆等等。

css 规则集
    p    :     {color    :    red;}
 选择器         属性          属性值

以上元素是CSS的规则集。它由以下几个部分构成：

  • 选择器：HTML 元素的名称位于规则集开始（本例是标签选择器 ）。HTML 元素可选择一个或多个样式添加。给不同元素添加样式只需更改选择器即可。
  • 声明：表示一个单独的规则。由属性和属性值组成。
  • 属性：表示改变 HTML 元素样式的途径。本例中color就是改变<P>元素字体颜色的途径。
  • 属性的值：它从指定属性的众多外观中选择了一个值。本例中，red就是color的值。颜色种类成千上万，除了red外，color的值还可以有yellow, pink, black等等。

注意 ：

  • 除了选择器的部分，每个规则集都应该包含在一对的大括号里：{ }。
  • 在每个声明里要用冒号将属性与属性值分隔开。
  • 在每个规则集里要用分号将多个声明分隔开：
css 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 "/" 开始, 以 "/" 结束, 实例如下:

/*这是个注释*/        
p       
{        
text-align:center;       
/*这是另一个注释*/        
color:black;        
font-family:arial;       
}

css 选择器

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

  1. 通用选择器（*）
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

id与class选择器

  • id 选择器：

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

    以下的样式规则应用于元素属性 id="para1":

    #para1
{
text-align:center;
color:red;
}

    注意： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

    ​ ID属性只能在每个 HTML 文档中出现一次

  • class 选择器：

    class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

    class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

    在以下的例子中，所有拥有 center 类的 HTML 元素均为居中

    .center {text-align:center;}

    注意： 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

css 文本

  • 文本颜色：color

  • 文本对齐方式：text-align 值（value）：center、right、left、justify等

    • 文本可居中或对齐到左或右,两端对齐.

      当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

  • 文本修饰：text-decoration 值（value）：none、overline、line-through、underline

    • text-decoration 属性用来设置或删除文本的装饰。

      从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

  • 文本转换：text-transform 值（value）：uppercase、lowercase、capitalize

    • 文本转换属性是用来指定在一个文本中的大写和小写字母。

      可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

  • 文本缩进：text-indent

    • 文本缩进属性是用来指定文本的第一行的缩进。

      CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

      通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。

  • 文本间隔：word-spacing

    • word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

  • 文本方向：direction 值（value）：ltr默认 rtl：文本方向从右到左。

  • 行高：line-height：30px；

  • 字符间距：letter-spacing：像素值；

  • 文本阴影：text-shadow: h-shadow v-shadow blur color; 水平阴影 垂直阴影 模糊距离 阴影颜色

  • 元素垂直（居中）对齐：vertical-align：（middle）；

字体 fonts

  • font-family：属性设置文本的字体系列。注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

    多个字体系列是用一个逗号分隔指明：

  • font-style：主要是用于指定斜体文字的字体样式属性。

    这个属性有三个值：

    • 正常 - 正常显示文本
    • 斜体 - 以斜体字显示的文字
    • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

    italic 和 oblique 的区别

    • 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
    • 倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

    通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样

  • font-size:属性设置文本的大小。

  • font-weight：

css 链接（link）

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
a:link {color:#FF0000;}      /* 未访问链接*/ 
a:visited {color:#00FF00;}  /* visited link */ 
a:hover {color:#FF00FF;}  /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

css 列表样式

列表项标记
  • list-style-type：属性指定列表项标记的类型是
  • list-style-image：要指定列表项标记的图像，使用列表样式图像属性

一些值是无序列表，以及有些是有序列表。

下列是对list-style-type属性的常见属性值的描述：

  • none：不使用项目符号
  • disc：实心圆
  • circle：空心圆
  • square：实心方块
  • decimal：阿拉伯数字
  • lower-alpha：小写英文字母
  • upper-alpha：大写英文字母
  • lower-roman：小写罗马数字
  • upper-roman：大写罗马数字

css盒模型

块级元素才有盒子

CSS 布局主要就是基于盒模型。每个占据页面空间的块都能有这样的属性：

  • padding: 内边距。它围绕着内容的空间。
  • border: 边框。它紧接着内边距的线。
  • margin: 外边距。它围绕元素外部的空间。
  • content：内容。 盒子的内容，显示文本和图像

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

外边距（margin）

值：auto 自动 /length（像素值）/%（百分比）

CSS Margin(外边距)属性定义元素周围的空间。

CSS Margin属性接受任何长度单位、百分数值甚至负值。

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的

margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性

Margin可以使用负值，重叠的内容。

内边距（padding）

CSS Padding（填充）属性定义元素边框与元素内容之间的空间

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

CSS Display(显示) 与 Visibility（可见性）

CSS display 属性和 visibility属性都可以用来隐藏某个元素，但是这两个属性有不同的定义，请详细阅读以下内容。

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

  • visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

css 定位（position）

  • static 定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

  • fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动

    Fixed定位使元素的位置与文档流无关，因此不占据空间。

    Fixed定位的元素和其他元素重叠。

  • relative 定位：相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

  • absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

    Absolutely定位使元素的位置与文档流无关，因此不占据空间。

    Absolutely定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

​ 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

img 
{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    z-index:-1; 
}

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

css 浮动（float）

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

浮动介绍

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
</body>
</html>
清除浮动-clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

.text_line 
{ 
    clear:both; 
}
clear:both/right/left

css 水平对齐（Horizontal Align）

块元素对齐

块元素是一个元素，占用了全宽，前后都是换行符。

  • p标签、标题标签、div标签等
  • 水平居中：文本居中 text-align：center；
<style>
    h1{
      text-align: center;
    }
 </style>
 <body>
     <!-- 块元素水平对齐 -->
     <h1>dinghuixiang</h1>
     <p>dinghuixiang</p>
     <div>dinghuixiang</div>
</body>
中心对齐：使用margin属性

块元素可以把左，右页边距设置为"自动"对齐。

  <style>
    h1{
      text-align: center;
    }
    div{
      margin: auto;
      width: 60%;//需要设置宽度
      background-color: #eee;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- 块元素水平对齐 -->
  <h1>dinghuixiang</h1>
  <p>dinghuixiang</p>
  <div>dinghuixiang</div>
</body>

注意：如果宽度是100％，对齐是没有效果的。

使用position属性设置左，右对齐

元素对齐的方法之一是使用绝对定位：

    p{
      position: absolute;
      right: 50%;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <!-- 块元素水平对齐 -->
  <h1>dinghuixiang01</h1>
  <p>dinghuixiang02</p>
  <div>dinghuixiang03</div>
</body>

注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素

使用float属性设置左，右对齐
.right 
{ 
float:right; 
width:300px; 
background-color:#b0e0e6; 
}
使用Padding设置垂直居中对齐

CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

css 组合选择符

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

  • 后代选取器(以空格分隔)
  • 子元素选择器(以大于号分隔）
  • 相邻兄弟选择器（以加号分隔）
  • 普通兄弟选择器（以波浪号分隔）
后代选取器

后代选取器匹配所有指定元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p 
{ 
background-color:yellow; 
}
/*选取所有div里面的p元素*/
子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p 
{ 
background-color:yellow; 
}
/*选取div所有直接子元素p*/
相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

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

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p 
{ 
background-color:yellow; 
}
普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p 
{ 
background-color:yellow; 
}

css 伪类

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

语法

伪类语法

selector:pseudo-class {property:value;}

css类使用伪类

selector.class:pseudo-class {property:value;}

anchor（链接）伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */
CSS - :first - child伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素

所有CSS伪类/元素
选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容