文章目录

• CSS基础知识
• css是什么？
• CSS的格式
•  css可以出现的位置

• 一：元素选择器
• 二：id选择器
• 三：类选择器
• 四：并集选择器（选择器分组）
• 五：交集选择器（复合选择器）
• 六：通配选择器
• 七：后代元素选择器
• 八：子元素选择器
• 九：伪类选择器
• 十：伪元素选择器
• 十一：属性选择器
• 十二：兄弟元素选择器
• 十三：否定伪类选择器

CSS基础知识

css是什么？

一：百度解释
（1）层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
（2）CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
我感觉上述呢，有点长篇大论了。

二：我的理解：css可以用来为网页创建样式表，通过样式表可以对网页进行修饰。

  对于我们所看到的网页，它就是一个页面，但是事实并不是这样，其实整个网页是一层一层的结构，层次高的覆盖层次低的，最后形成我们所看到的这个样子。

CSS的格式

 css可以出现的位置

（1） 内联样式：将css样式编写到元素的style属性中，
例如：

< p style=\"color : red\">设置字体是红色< /p>

  说明：内联样式将样式直接编写到了style属性中，只对当前元素中的内容起作用，属于结构与表现耦合，不方便复用。一般不使用

（2）内部样式表：将css样式编写到head的style标签中
例如：

< style type=\"text/css\">< /style>

  说明：将内部样式表编写到style标签中，通过css选择器选中元素，使得网页的结构与表现进一步分离，也可复用，对于较少的css代码推荐使用。

（3）外部的css文件：可以将样式表写到外部的css文件中，通过link标签进行外部引用。
例如：

< link rel=\"stylesheet\" type=\"text/css\">

  说明：将css样式编写到外部的css文件中，使得网页的结构与表现完全分离，最大限度的使样式复用。

CSS的语法

选择器 声明块
  选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。
  声明块：声明块紧跟在选择器的后边，使用{ }括起来，声明块中实际上就是一组一组的名值对结构，而这一组组名值对称之为声明。
例如：

div{ color:red;}

△CSS常用选择器

一：元素选择器

作用：通过元素选择器可以选择页面中的所有指定元素。
语法：标签名 { }

二：id选择器

作用：通过元素的id属性值选中唯一的元素。
语法：#id属性值 { }

三：类选择器

作用：通过元素的class属性值选中一组元素。
语法：.class属性值 { }

四：并集选择器（选择器分组）

作用：通过并集选择器可以同时选中多个选择器对应的元素。
语法：选择器1,选择器2,……选择器N { }

五：交集选择器（复合选择器）

作用：通过交集选择器可以选中同时满足多个选择器的元素。
语法：选择器1选择器2……选择器N { }
注意：中间无“,”或者空格。

六：通配选择器

作用：通过通配选择器可以选中页面中的所有元素。
语法：* { }

接下来涉及到元素之间的关系：
父元素。子元素。祖先元素。后代元素。兄弟元素。概念不说了——–啰嗦，用例子好理解（如图）：

<div><p>段落<a>超链接</a></p><scan>span</scan></div>

< div>是< p>的父元素，是< a>的祖先元素，父元素也可以叫做祖先元素。相反< p>是< div>的子元素。< a>是< div>的后代元素。子元素也属于后代元素。< p>与< scan>互为兄弟元素。

七：后代元素选择器

作用：选中指定元素的指定后代元素。
语法：#祖先元素 空格 后代元素{ }
拓展：#祖先元素 空格 后代元素 空格 后代元素{ } //选择祖先元素之后的之后的元素。

八：子元素选择器

作用：选中指定父元素的指定子元素。
语法：#父元素 > 子元素{ }
拓展：#父元素 > 子元素 > 子元素{ } //选择父元素之后的之后的元素。

九：伪类选择器

作用：伪类专门用来表示元素的一种特殊状态。
比如：访问过的超链接，未访问过的超链接，获取焦点的文本框…………
  当我们需要为处在这些特殊状态的元素设置样式时，就可以用伪类。
（1）➊ :link ——-表示普通的连接，没有访问过的链接
例如：

a:link{ color: red;}

➋➌➍➎➏
   ➋ :visited ——-表示访问过的链接
例如：

a:visited { color: red;}

浏览器是通过历史记录来判断一个链接是否访问过
   ➌ :hover——-表示鼠标移入的状态
例如：

a:hover { color: blue;}

   ➍ :active——-表示超链接（其他标签）被点击的状态
例如：

a:active { color: blue;}

   ➎ :focus——-表示获取焦点的状态
例如：

a:focus { color: blue;}

   ➏ ::selection——-为标签中选中的内容设置样式
例如：

a::selection { color: blue;}

十：伪元素选择器

作用：使用伪元素选择器来表示元素中的一些特殊位置。
（1）➊ :first-letter ——-为第一个字符设置特殊的样式
例如：

p:first-letter{ color: red;}

   ➋ :first-line ——-为第一行设置特殊的样式
例如：

p:first-line { color: red;}

   ➌ :before——-表示元素最前边的部分
例如：

a:before { color: red;}

   ➍ :after——-表示元素最后边的部分

十一：属性选择器

作用：可以根据元素的属性或属性值来选取指定的元素。
语法：➊[属性名]：选取含有指定属性的元素。
    ➋ [属性名=“属性值”]：选取含有指定属性的元素。
    ➌ [属性名=“属性值”]：选取含有指定属性的元素。
    ➍ [属性名^=“属性值”]：选取属性值以指定内容开头的元素。
    ➎ [属性名$=“属性值”]：选取属性值以指定内容结尾的元素。
    ➏ [属性名*=“属性值”]：选取属性值包含指定内容的元素。

十二：兄弟元素选择器

（1）(后一个)兄弟选择器 （+）
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个
（2）(后所有)兄弟选择器 （~）
作用：可以选中一个元素后边的所有兄弟元素
语法：前一个~后一个

十三：否定伪类选择器

作用：可以从已选定的元素中剔除出某些元素。
语法： :not(选择器){ }

<p>标签1</p><p>p标签2</p><p class=\"hello\">标签3</p><p>p标签4</p>

例如： p:not(.class) { background-color : red } //处理class值为hello的元素外，其余都是背景色为红色。

楠哥——-一心想为IT行业添砖加瓦，却总是面向cv编程的程序员。
  谢谢阅读，无误点赞，有误还望评论区指正。