CSS3学习记录一

这是一篇对于CSS3学习的记录，用于总结与复习。如果有错误的地方欢迎回复讨论。

新建项目

一直选择next直到下面画面。

接下来创建html文件与stylesheet文件。

创建完成后画面如下

四种导入方式

一、行内样式

二、内部样式

三、外部样式

链接

导入

补充

推荐使用链接样式，部分可使用行内样式，不推荐使用导入样式。四种样式对标签的影响具有覆盖性，离标签近的样式效果会覆盖离标签远的样式效果，即标签显现离其最近的样式效果，行内样式互不影响。

三种基本选择器

?

 

?

一、标签选择器

对所有的该标签进行选择， 标签{}。

二、class选择器

对具有相同类的标签进行选择， .类名{}。

三、id选择器

对id相对应的标签进行选择，id全局唯一， #id名{}。

补充

选择器的优先级为 id选择器>class选择器>标签选择器 。

层次选择器

一、后代选择器

格式为：标签一（标签/类名/id名）空格标签二（标签/类名/id名）{}

对标签一内所有的标签二进行选择。

二、子选择器

格式为：标签一（标签/类名/id名）> 标签二（标签/类名/id名）{}

对标签一内子一代的所有标签二进行选择。

三、相邻兄弟选择器

格式为：标签一（标签/类名/id名）+ 标签二（标签/类名/id名）{}

对与标签一向下相邻的同级的标签二进行选择，标签一自身不被选择，若向下相邻的不为标签二则不选择。

四、通用兄弟选择器

格式为：标签一（标签/类名/id名）~ 标签二（标签/类名/id名）{}

对与标签一所有向下的同级的标签二进行选择，标签一自身不被选择。

补充

层次选择器无优先级，效果会被下一个层次选择器覆盖。

结构伪类选择器

格式：在标签后接:在接伪类。

标签1:first-child{}

选中该标签所有的父标签下的第一个该标签，若第一个标签不为标签1则不选取。

标签1:last-child{}

选中该标签所有的父标签下的最后一个该标签，若最后一个标签不为标签1则不选取。

标签1:nth-child(n){}

选中该标签1所有的父标签下的子标签的第n个标签，若第n个标签不为标签1则不选取。

标签1:nth-of-type(n){}

选中该标签1所有的父标签下的子标签为标签1的第n个标签。

属性选择器

格式：在标签后接[],括号中填属性

选中某属性等于某某的标签1

列如：选中id为blueviolet的标签h1。

选中某属性包含某某的标签1

列如：选中class中包含yuan的标签h1。

选中某属性以某某开头的标签1

列如：选中href以http开头的标签a。

选中某属性以某某结尾的标签1

列如：选中href以png结尾的标签a。

以上内容学习自【狂神说Java】CSS3最新教程快速入门通俗易懂

2020-5-13

CSS3学习记录一

原文：https://www.cnblogs.com/ln-a-sh/p/12883441.html