004_CSS元素选择器

1. CSS选择器用于"查找"(或选取)要设置样式的html元素。

2. CSS元素选择器/类型选择器

2.1. 元素选择器匹配文档元素的名称。元素选择器匹配文档树中该元素名称的每一个实例。

2.2. 最常见的CSS选择器是元素选择器。换句话说, 文档的元素就是最基本的选择器。

2.3. 在W3C标准中, 元素选择器又称为类型选择器(type selector)。

2.4. 元素选择器通常是某个html元素, 比如: p、h1、em、a, 甚至可以是html本身。

3. 使用元素选择器设置html的样式

3.1. 代码

<!DOCTYPE html>
<html><head><title>CSS元素选择器</title><meta charset="utf-8" /><style type="text/css">html {color: red;}h1 {color: blue;}h2 {color: silver;}</style></head><body><h1>这是 heading 1</h1><h2>这是 heading 2</h2><p>这是一段普通的段落。</p></body>
</html>

3.2. 效果图

4. 声明分组

4.1. 我们既可以对选择器进行分组, 也可以对声明分组。

4.2. 假设您希望所有h1元素都有红色背景, 并使用28像素高的Verdana字体显示为蓝色文本, 可以写以下样式:

h1 {font: 28px Verdana;
}
h1 {color: blue;
}
h1 {background: red;
}

4.3. 但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反, 我们可以将声明分组在一起:

h1 {font: 28px Verdana;color: blue;background: red;
}

004_CSS元素选择器相关推荐

CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
css元素捕捉,css元素选择器
CSS 元素选择器最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p.h1.em.a,甚至可以是 ...
通用兄弟元素选择器 E ~ F
版本:CSS3 继承性:无语法: E ~ F : {attribute} 说明: 匹配E元素之后的F元素兼容性: 类型 Internet Explorer Firefox Chrome Opera ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
015_CSS伪元素选择器
1. 伪元素选择器是通过双冒号(::)加上特定的具有某种含义的单词来确定所选元素. 2. 伪元素/伪对象: 不存在在DOM文档中, 是虚拟的元素, 是创建的新元素.这个新元素(伪元素)是某个元素的子元 ...
011_CSS子元素选择器
1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素. 2. 选择子元素 2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的 ...
CSS基本选择器（元素选择器、类选择器、id选择器）
一.元素选择器 <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS_03_04_CSS伪元素选择器
第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器:状态效果顺序:L V H A */a:link.lin_01{/*超链接,未访问 ...

004_CSS元素选择器

004_CSS元素选择器相关推荐

最新文章

热门文章