摘要：类型选择器又名元素选择器类型选择器又名元素选择器在标准中，元素选择器又称为类型选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。
MDN 背景
W3School 背景
元素的背景是指，在元素内容、内边距和边界下层的区域。
| 属性 | 描述 |
|---|---|
| background-color | 为背景设置一个纯色。 |
| background-image | 把图像设置为背景。线性渐变是通过linear-gradient()函数传入的，它是一个background-image属性的值。 |
| background-position | 指定背景应该出现在元素背景中的位置。 |
| background-repeat | 指定背景是否应该被重复(平铺)。 |
| background-attachment | 当内容滚动时，指定元素背景的行为 |
| background | 在一行中指定以上五个属性的缩写。 简写属性，作用是将背景属性设置在一个声明中。 |
| background-size | 允许动态调整背景图像的大小。 |
W3School 边框
MDN 边框
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度（border-width）、样式（border-style），以及颜色（border-color）。
W3SChool 列表
MDN 列表
列表有三种：无序列表、有序列表、描述列表
可以在
W3School 链接
MDN 链接
链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- a:focus - 链接被选中。一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
MDN 选择器
W3C 选择器
通过元素类型、class 或 id 匹配一个或多个元素。
在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。
针对某个HTML元素设置样式
html {color:black;}
h1 {color:blue;}类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。
.类型名A{}，对类型名为A的元素设置样式，一个HTML文档中可以匹配多个元素
ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己选择的ID是什么。 这是选择单个元素的最有效的方式。
#ID名A{}，对ID名为A的元素设置样式，一个HTML文档中只能匹配一个元素
通过 属性 / 属性值 匹配一个或多个元素。
CSS 2 引入了属性选择器。
- [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
- [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
- [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}伪类和伪元素
概念：
匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
使用方法：
一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。
概念：
匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
使用方法：
伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。
这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
| Combinators | Select |
|---|---|
| A B | 匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点） |
| A > B | 匹配任意元素，满足条件：B是A的直接子节点 |
| A + B | 匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面） |
| A ~ B | 匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A） |
这些也不是多带带的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
| Combinators | Select |
|---|---|
| A,B | 匹配满足A（和/或）B的任意元素 |
选择器的优先级
CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：
在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：
!important。
相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：
用户样式表中的重要声明
个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。
如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2276.html
摘要：的一些规则新特性应该基于以及。将支持某些特性。作用声明帮助浏览器正确地显示网页。标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称值对。每个列表项始于标签。第二天：给自己做一个在线简历吧 最后的验证，提出了几个问题，尝试解答一下 HTML是什么，HTML5是什么 HTML的定义摘抄自w3school的HTML 简介 HTML 是用来描述网页的一种语言。 HTML 指...
摘要：本文章用于记录百度前端技术学院的任务难点。十进制转二进制。第二步将这个数字转换成字符串，分割成数组，每一项都是数字的某一位上的数，再用判断这个数组是否包含为的元素即可，是则打印。代码判断一个数组是否包含一个指定的值，如果存在返回，否则返回 本文章用于记录百度前端技术学院的任务难点。 十进制转二进制。核心思路：在while循环中，将十进制数字除以2，同时将除以2的余数一次次记录下来，而每...
摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...
摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...
摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...
阅读 728·2021-11-24 10:42
阅读 3367·2021-11-19 11:34
阅读 2411·2021-09-29 09:35
阅读 2309·2021-09-09 09:33
阅读 3165·2021-09-08 09:36
阅读 501·2021-07-26 23:38
阅读 2395·2019-08-30 10:48
阅读 1281·2019-08-28 18:07
