CSS笔记-语法CSS（Cascading Style Sheets）层叠样式表，可以给每一个元素设置样式。 CSS引入

CSS（Cascading Style Sheets）层叠样式表，可以给每一个元素设置样式。

CSS引入方式

内联样式（ inline style）<h1 style=“font-size: 50px; color: red;”>网页的标题</h1>
文档样式表（document style sheet）: 结构和样式分离 <style>h1 { font-size: 50px; color: red; } </style>
外部样式表（external style sheet）: 创建CSS文件，引入html
- link 引入： <link rel=“stylesheet” href=“css_外部样式表.css”>
- import引入： <style>@import url(css_外部样式表.css);</style>

CSS语法

选择器：按照一定的规则选择出符合条件的元素，为之添加CSS样式
每条声明由一个属性和一个值组成。
属性是您希望设置的样式属性。每个属性有一个值，属性和值被冒号分开。
属性的值可为：关键字或值、函数形式、速记属性

CSS基础选择器

通用选择器 universal selectors

{color: green;}

元素选择器 type selectors

具有相同样式的元素的选择器

h1{color: green;}

类选择器 class selectors

用于描述一组类元素的样式，设置属性class
使用.class名称设置样式
对于一个元素可以有多个类（空格分隔

.center {text-align:center;}

id选择器 identifier selectors

标有特定 id指定特定的样式，设置属性id
使用#id名称设置样式
在一个页面里id名称不要重复

#para1 { text-align:center;}

属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。

/*title属性选择器*/
<style>[title] { color: red;}</style>
/*title属性选择器等于*/
<style>[title=“div元素”] { color: red;}</style>
/*title属性选择器包含(正则)*/
<style>[title*=“div元素”] { color: red;}</style>
/*title属性选择器-以one开头(正则)*/
<style>[title^=“one”] { color: red;}</style>
/*title属性选择器-以one结尾(正则)*/
<style>[title$=“one”] { color: red;}</style>
/*title属性选择器等于one 或 以one 开头后面紧跟连字符-的元素(正则)*/
<style>[title|=“div元素”] { color: red;}</style>
/*title属性选择器包含one的元素（单词one与其他单词必须用空格隔开）(正则)*/
<style>[title～=“div元素”] { color: red;}</style>

CSS关系选择器

后代选择器 descendant combinator

适用于选择器内部的选择器的样式（包括直接，间接子元素）

div span {color: red;}    // div元素中的span子元素（包括直接，间接子元素）
.box span {color: red;}   //  不止适用于元素，标签或其他也可以

子选择器 child combinator

适用于选择器内部的选择器的样式（不包括间接子元素）

div>span {color: red;}  // div元素中的直接span子元素（不包括间接子元素）
.box > span {color: red;}  //  不止适用于元素，标签或其他也可以

相邻兄弟选择器adjacent sibling combinator

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p{color:red;} // div元素后面紧挨着的p元素（且div和p元素必须是兄弟关系）

全兄弟选择器adjacent sibling combinator

全兄弟选择器选取所有指定元素之后的相邻兄弟元素。

 div~p{color:red;} // div元素后面的p元素（且div和p元素必须是兄弟关系）

选择器组

交集

同时符合2个条件的元素: div元素，class只有one div.one {color: red;}

并集

所有的div元素+所有的class只有one的元素 div，.one {color: red;}

伪类

CSS伪类是用来添加一些选择器的特殊效果。

动态伪类

定义在用户行为的伪类

/* 未访问链接*/
a:link {color:#000000;} 
 /* 已访问链接 */    
a:visited {color:#00FF00;} 
/* 鼠标移动到链接上 */
a:hover {color:#FF00FF;} 
/* 鼠标点击时 */ 
a:active {color:#0000FF;} 
/*用来定义一个元素本身具备焦点（接受键盘、鼠标、form的输入等）之后，显示的样式*/ 
a: focus {color:#FF00FF;}
/*直接给a元素设置样式，相当与给a元素的所有动态伪类都设置了此样式*/
a.red:active{color: #FF00FF;} 
/*
1. hover必须放在link和visited后面才能完全生效
2. active必须放在hover后面才能完全生效
3. active和hover可以使用别的元素
4. tabindex 可以调整tab选中元素的顺序，设置为-1则不可被tab选中
 link -> visited -> hover -> focus -> active
*/

目标伪类（不常用）

最常用的场景：锚点的使用 :target

语言伪类（不常用）

:lang()伪类使你有能力为不同的语言定义特殊的规则

元素状态伪类

元素状态伪类 :disabled (:状态)

结构伪类

:nth-child( ):

* 选中第n（数字）个子元素
* 当为n所有自然数
* 当为2n/even所有偶数
* 当为2n+1/odd所有基数
* 当为-n+5选中前5个

:nth-last-child（）:

同 :nth-child( )，逆序搜索

:nth-of-type（）：

与:nth-child(1) 用法类似，只是值只计算同类型元素

:nth-last-of-type（3）：

同 :nth-of-type（），逆序搜寻

:first-child:

等同 nth-child(1)

:last-child:

等同 nth-last-child(1)

:first-of-type:

等同 nth-of-type(1)

:last-of-type:

等同 nth-last-of-type(1)

:only-child:

父元素中的唯一子元素

:only-of-type:

父元素中的唯一这种类型的子元素

:root:

根元素，就是html元素

:epmty:

空元素,元素内容为空

否定伪类

:not() -> 格式是 not（x） -》 x是一个简单选择器可以为元素选择器_通用选择器_属性选择器_类选择器_id选择器/伪类（除否定伪类）

伪元素 pseudo-elements

伪元素是用来添加一些选择器的特殊效果。建议使用两个冒号，区分于伪类。伪元素可以看成是行内元素。

:first-line/::first-line

用于向文本的首行设置特殊样式。

p::first-line  {  color:#ff0000;}

:first-letter/::first-letter

用于向文本的首字母设置特殊样式。

p::first-letter  { color:#ff0000;}

:before/::before

用来在一个元素内容之前插入别的内容

h1::before {  content: “1”; /* (不能省略，可为空内容)*/  color: red; /*设置别的属性*/}

:after/::after

用来在一个元素内容之后插入别的内容

h1::after {  content: “1”; /* (不能省略，可为空内容)*/  color: red; /*设置别的属性*/}

层叠

CSS允许多个相同名字的CSS属性层叠同一个元素上。

层叠规则

基本层叠：使用相同的选择器，后面一定把前面的层叠掉
当选择器不同的时候需要知道选择器的权重
层叠后的结果只有一个CSS属性会生效
浏览器的开发工具清晰显示那个属性生效

优先级

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处环境定义一个权重如下：
- !important: 10000
- 内联样式: 1000
- id选择器: 100
- 类选择器，属性选择器，伪类: 10
- 元素选择器，伪元素: 1
- 通配选择器: 0
比较优先级的严谨方法：
- 从权重最大的开始比较每一种权重的数量，数量多的优先级高
- 如果数量相同的情况下比较下一个较小的权重，以此类推
- 如果所有权重比较完后发现数量相同，采取”就近原则“
多重样式优先级（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

继承

一个元素如果没有设置某属性的值，就会跟随父元素的值。如果设置，就是有自己的值。属性继承的计算值，而不是当初属性的指定值（字面值）

控制继承

inherit ：该属性会使子元素属性和父元素相同。实际上，就是“开启继承”
initial：将应用于选定元素的属性值设置为该属性的初始值
unset: 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit ，否则和 initial一样

重设所有属性值一种撤销对样式所做更改的简便方法，以便回到之前已知的起点

.fix-this { 
	 all: unset;  
}

CSS笔记-语法