属性、伪类选择器与元素显示模式

项目要求

项目展示

导航条样式如图13.1所示。

图13.1　导航条样式

教学内容

属性选择器

1. 属性选择器

可以通过标签的属性名和属性值来匹配对应的元素。

➢ 属性选择器可以根据元素的属性及属性值来选择元素。

➢ 属性选择器好处。如：可以通过标签的属性名和属性值来匹配对应的元素。

➢ attr是英文单词attribute的简写，中文意思就是属性或属性名。

➢ val是英文单词value的简写，中文意思就是值或属性值。

➢ 属性选择器必须使用[ ]中括号。

属性选择器的用法描述如图13.2所示，属性选择器案例分别如图13.3～13.7所示。

图13.2　属性选择器的用法描述

图13.3　属性选择器[attr]案例

图13.4　属性选择器[attr=val]案例

图13.5　属性选择器[attr^=val]案例

图13.6　属性选择器[attr$=val]案例

图13.7　属性选择器[attr*=val]案例

2. 伪类选择器

（1）结构伪类选择器，如表13.1所示。

表13.1　结构伪类选择器

结构伪类选择器

nth-child(n)

① n可以是数字，关键字和公式。

② n如果是数字，就是选择第n个。

③ 常见的关键词even：偶数，odd：奇数。

④ 常见的公式如表13.2所示，如果n是公式，则从0开始计算。

表13.2　结构伪类选择器n的用法

nth-child(n)和nth-of-type(n)的区别：前者是匹配父元素第n个子元素，与元素类型无关，后者匹配父元素特定类型的第n个元素。

例：

总结：

❖ 结构伪类选择器就是选择第n个。

❖ nth-child从所有子级开始算的，可能不是同一种类型。

❖ nth-of-type 指定同一种类型的子级，比如 ul li：nth-of-type（2）是选择第2个li。

❖ 关于nth-child（n），我们要知道n从0开始计算的，要记住常用的公式。

❖ 如果是无序列表，肯定用 nth-child 更多。

（2）链接伪类选择器。

：link /* 未访问的链接的状态 */

：visited /* 被访问后的链接状态 */

：hover /* 鼠标经过、悬停到链接上的状态 */

：active /* 鼠标按下时的链接状态（注意是鼠标按下弹起之前样式） */

注意写的时候，其顺序尽量不要颠倒，按照lvha的顺序，可用如下方式快速记忆：

love hate 爱恨记忆法 或者 lv hao 记忆法。

在实际开发中，一般常用：

伪类选择器（链接、目标）

3. 元素的显示模式

HTML标签一般分为块标签和行内标签两种类型，也称块元素和行内元素。

（1）块级元素（block-level）。

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有〈h1〉～〈h6〉、〈p〉、〈div〉、〈ul〉、〈ol〉、〈li〉等，其中〈div〉标签是最典型的块元素。

块级元素的特点：

① 总是从新行开始。

② 高度、行高、外边距以及内边距都可以控制。

③ 宽度默认是容器的100%。

④ 可以容纳内联元素和其他块元素。

提示：(www.xing528.com)

只有文字才能组成段落，因此〈p〉标签里面不能放块级元素，同理还有标签：〈h1〉、〈h2〉、〈h3〉、〈h4〉、〈h5〉、〈h6〉、〈dt〉，这些都是文字类块级标签，里面不能放其他块级元素。

（2）行内元素（inline-level）。

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有〈a〉、〈strong〉、〈b〉、〈em〉、〈i〉、〈del〉、〈s〉、〈ins〉、〈u〉、〈span〉等，其中〈span〉标签最典型的行内元素。

行内元素的特点：

① 与相邻行内元素在一行上。

② 不能设置宽、高，但水平方向的padding和margin可以设置，垂直方向的无效。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。但a标签特殊，链接里面不能再放链接，但可以存放其他行内或块级元素。

（3）块级元素和行内元素之间的区别。

块级元素和行内元素之间的区别如图13.8所示。

（4）行内块元素（inline-block）。

在行内元素中有几个特殊的标签—— 〈img/〉、〈input/〉、〈td〉，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

显示模式-块元素和行内元素

显示模式-行内块和模式转换

图13.8　块级元素和行内元素的区别

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。

② 默认宽度就是它本身内容的宽度。

③ 高度、行高、外边距以及内边距都可以控制。

行内块元素，既有行内块的特点（相同元素可以同在一行显示）；又同时拥有块元素的特征（可以设置宽高属性）。

（5）标签显示模式转换display。

块转行内：display：inline；

行内转块：display：block；

块、行内元素转换为行内块：display：inline-block；

（6）display：none（元素隐藏）。

css让元素不可见的方法有很多种，如裁剪、定位到屏幕外边，透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display：none或者visibility：hidden。

display：none，该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间会消失。

visibility：hidden，也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

display：none和visibility：hidden两者的区别，如图13.9所示。

display隐藏元素

displayblock的用法

图13.9　display：none和visibility：hidden两者的区别

① display：none隐藏后的元素不占据任何空间，而visibility：hidden隐藏后的元素空间依旧保留 。

② visibility具有继承性，对父元素设置visibility：hidden，子元素也会继承这个属性。但是如果重新给子元素设置visibility：visible，则子元素又会显示出来。这个和display： none有着质的区别。

③ visibility：hidden不会影响计数器的计数，虽然元素不见了，但是其计数器仍在运行。

④ CSS3的transition过渡，支持visibility属性，但是并不支持display。由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。

4. 单行文字垂直居中

让文字的height行高==盒子的高度 line-height，就可以让文字在盒子内垂直居中，示例如图13.10所示。

图13.10　盒子高度与行高

行高小于盒子高度，文字会偏上；行高大于盒子高度，文字会偏下。

5. 伪元素选择器

之所以被称为伪元素，是因为它们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。伪元素选择器如表13.3所示。

伪元素

表13.3　伪元素选择器

注意：

● before 和 after 必须有 content 属性。

● before 在内容的前面，after 在内容的后面。

● before 和 after 创建一个元素，但是属于行内元素。

● 因为在 demo里面看不见刚才创建的元素，所以我们称为伪元素。

● 伪元素和标签选择器一样，权重为1。

下面举一案例。

css代码部分：

结构：〈div〉是〈/div〉

显示效果：我是谁？

日常用法：

① 简化html结构。

② 使用before和after双伪元素清除浮动。

项目训练