CSS Basics & Selectors

CSS( Cascading Style Sheet )

CSS 中文译为“层叠样式表”，它是一种将网页表现样式与网页结构分离的一种声明式设计语言，可以使用CSS控制HTML页面中的文本内容、图片外形以及版面布局等外观的显示样式。

CSS其设计目标是让浏览器以指定的特性去绘制页面元素。

发展

CSS1.0

1991年2月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关 font 的相关属性、颜色与背景的相关属性、文字的相关属性、 box 的相关属性等。

CSS2.0

1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。在布局上增加了浮动、定位等概念。

CSS2.1

2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。

CSS3

早在2001年，W3C 就着手开始准备开发CSS第三版规范。在今天还在不断的迭代完善，一些处于实验阶段，有争议未完全纳入标准的功能，不同厂商的浏览器的支持略有差别。目前比较流行的 Flex布局、em / rem 单位都是 CSS3 的新标准，除此之外 CSS3 增加了滤镜、动画效果等一些高级特效，针对移动端多屏的兼容也做了不少优化如 媒体查询、Columns …

规则( 选择器+声明块 )

CSS 规则由两个主要的部分构成：选择器，一条或多条声明

css规则

选择器是用来选择页面多个元素的条件
声明块用大括号({})括起来
每条声明由一个属性和一个值组成
- 属性（property）是我们想要设置的样式属性（style attribute）
- 每个属性都至少有一个值
- 属性和值用冒号(:)分开
- 每条声明都是以分号(;)结束

PS：CSS 引擎会计算页面上每个元素都有哪些声明，并且会根据计算结果来绘制页面元素，排布样式。

使用

1.行内样式(Inline Style)

可以将CSS声明编写到元素的 style 属性中，style中可以写多个声明。如下：

<p style="color:red; font-size:20px">Hello, World!</p>

<html>
<head>
	<title>内联样式</title>
</head>
<body>
	<p style="color:red; font-size:20px">Hello, World!</p>	<!-- style属性只对当前元素有效 -->
	<p>Hello, World!</p>
</body>
</html>

内联样式简单、直接，但不能实现网页结构与样式的有效分离。
内联样式不包含css规则中的选择器，所以在为不同元素设置相同css样式时，会导致冗余重复代码过多。

2.内部样式表(Internal Style Sheet)

内部样式表是写在HTML的 <style></style> 标签中，通过选择器选择指定元素进行样式设置。如下：

<html>
<head>
<!-- style标签对整个文档都有效 -->
<style>
/* h1的样式 */
h1.layout {
	border: solid;
	text-align: center;
	color: red;
}
</style>
</head>
<body>
	<h1 class="layout"> 这个标题使用了Style </h1>
	<h1>这个标题没有使用Style。</h1>
</body>
</html>

/* 这里写CSS注释代码，注释代码不会被CSS解析或显示 */

3.外部样式表(External Style Sheet)

将CSS写在一个以.css为后缀的文件里，然后通过 <link> 标签引入到需要的html文档中。如下：

<link href="./css/home.css" rel="stylesheet" type="text/css">

<!-- index.html -->
<html>
<head>
<link href="./css/home.css" rel="stylesheet" type="text/css">
</head>
<body>
	<h1 class="layout"> 这个标题设置Style </h1>
	<h1> 这个标题没有设置Style </h1>
</body>
</html>

/*
	./css/home.css
 */
.layout{
  color: red
}

外部样式表更有利于开发

使样式完全与HTML分离
一个css文件可应用与多个html页面
相同的代码只需要写一次
易于后期维护

选择器

选择器可以定位 HTML DOM 中的一个或多个元素，并为对应的元素设定样式。

基本选择器

元素选择器

描述：通过元素的名称，来选择对应的元素。

语法：元素名{ 样式声明 }

例：

<style>
    p{
        color: red;  /* 字体颜色为红色 */
    }
    h1{
        color: blue;
    }
</style>
<p>我是段落</p>
<h1>我是标题</h1>

id选择器

描述：通过元素的id属性值，来选择对应的元素。

语法：#id名{ 样式声明 }

例：

<style>
    #only{
        color: red;
    }
</style>
<p id="only">Hello,Wolrd!</p>

class选择器( 类选择器 )

描述：通过元素的class属性值，来选择对应的元素。

语法：.类名{ 样式声明 }

例：

<style>
    .para1{
        font-size: 100px;  /* 字体太小100px */
    }
    .para2{
        font-style: italic;  /* 斜体字 */
    }
</style>
<p class="para1 para2">我是段落</p>

说明：

元素中的class的属性值是可以重复。
在HTML中每个元素可以同时绑定多个类名。

通配符选择器( `*` )

描述：* 选择匹配的所有元素。

语法：*{ 样式声明 }

*{
    margin: 0;   /* 外边距为0 */
    padding: 0;   /* 内边距为0 */
}

属性选择器

描述：根据指定的元素属性名和属性值选择对应的元素。

语法：

选择器[attribute]：选择指定属性名的元素
选择器[attribute=value]：选择指定属性名和属性值的元素
选择器[attribute*=value]：选择指定属性名同时包含指定属性值的元素
选择器[attribute|=value]：选择指定属性名和 属性值 / 属性值- 的元素
选择器[attribute^=value]：选择指定属性名同时属性值必须以指定值为开头的元素
选择器[attribute$=value]：选择指定属性名同时属性值必须以指定值为结尾的元素

例：

<style>
    img[alt^=abc]{
        color: red;
    }
</style>
<img src="" alt="abcwwwmmm"> <!--选中-->
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="qq">

复合型选择器

复合型选择器是建立在基本选择器之上，对基本选择器进行组合形成的。

交集选择器

描述：从多个选择器选中的元素中，选择相交的那部分元素

语法：选择器1选择器2...选择器N{ 样式声明 }

例：

<style>
p.part{
	color: yellow;  /* 字体颜色为黄色 */
}
</style>    
<div class="part">这是一个空盒子</div>
<p class="part">我是段落1</p>  <!-- 选中 -->
<p class="part2">我是段落2</p>

说明：

选择器与选择器之间不能有任何符号，包括空格。
多个选择器中，元素选择器必须写在交集选择器最前面。

并集选择器（ `,` ）

描述：从多个选择器选中的元素中，选择所有选中的元素。

语法：选择器1, 选择器2, ... 选择器N{ 样式声明 }

例：

<style>
    h1, .para{
        color: red;
    }
</style>
<h1>我是标题</h1> <!--选中-->
<p class="para">我是段落</p> <!--选中-->

说明：

选择器与选择器之间必须用 , 连接。
如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为他们定义相同的css样式。

关系型选择器

关系型选择器是复合型选择器的另一种类型。

元素之间的关系：HTML中标签是相互嵌套而成的，我们把HTML之间的层级关系用子孙后代的方式表示。

元素关系

如图所示，body 分别与 main、article、footer 互为父子元素。main、article、footer 之间又互为兄弟元素，其中除body以外其它所有元素都是body的后代元素。

子元素选择器（ `>` ）

描述：从某个元素中选择出指定的子元素。

语法：选择器1 > 选择器2 > ... 选择器N{ 样式声明 }

例：

<style>
    #identity > p{
        color: blue;
    }
</style>	
<div id="identity">
    <p>我是段落</p> <!--选中-->
    <p>我是段落</p> <!--选中-->
    <ul>
        <li><p>我是段落</p></li>
    </ul>
</div>

说明：

子元素选择器之间需要用>符号连接。
子元素选择器只会查找亲儿子, 不会查找孙子或重孙子。

后代元素选择器

描述：从某个元素中选择出指定的后代元素。

语法：选择器1 选择器2 ... 选择器N{ 样式声明 }

例：

<style>
    p em{
        color: red;
    }
</style>
<p>
<em>后代选择器</em>可以选择某个元素的<span><em>后代</em></span>元素。
</p>

说明：

后代选择器必须用空格隔开。
后代不仅仅是儿子, 也包括孙子/重孙子。

相邻兄弟元素选择器（ `+` ）

描述：选择某个元素相邻的一个兄弟元素。

语法：选择器1 + 选择器2 + ... 选择器N{ 样式声明 }

例：

<style>
    h1 + p{
        color: red;
    }
</style>  
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p> <!--选中-->
<p>我是段落</p>

说明：

相邻兄弟选择器必须通过+连接。
相邻兄弟选择器只能选择紧跟其后的那个元素。

通用兄弟元素选择器（ `~` ）

描述：选择某个元素后面的所有兄弟元素。

语法：选择器1 ~ 选择器2 ~ ... 选择器N{ 样式声明 }

例：

<style>
    h1 ~ p{
        color: green;
    }
</style>  
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p> <!--选中-->
<h1>我是标题</h1>
<p>我是段落</p> <!--选中-->
<p>我是段落</p> <!--选中-->

说明：

通用兄弟选择器必须用~连接。

伪类选择器

伪类定义了元素的状态，如点击按下，点击完成等，通过伪类选择器可以根据元素的状态来动态修改样式。

动态伪类选择器

描述：根据用户的操作实现动态的交互方式。

语法：

选择器:link（链接伪类选择器）：选择未访问过的超链接元素。常用于链接描点上
选择器:visited（链接伪类选择器）：选择已被访问过的超链接元素。常用于链接描点上
选择器:active（用户行为选择器）：选择被激活的元素。常用于链接描点和按钮上
选择器:hover（用户行为选择器）：选择用户鼠标悬停时的元素
选择器:focus（用户行为选择器）：选择获取焦点的元素

说明：

链接伪类选择器仅用于超链接，而用户行为选择器既可用在超链接中又可用在其它元素中。
激活是指用户鼠标点击或手指触摸元素且不松开时的状态。
获取焦点的元素是指用户当前正在操作的元素，例如：超链接、表单元素等…

例：

<style>
/*让超链接点击之前是红色*/
a:link{color: red}

/*让超链接点击之后是橙色*/
a:visited{color: orange}

/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{color: green}

/*鼠标点击链接，但是不松手的时候为黑色*/
a:active{color: black}
</style>
<a href="https://www.baidu.com">百度首页</a>

说明：

a标签的这四种伪类选择器存在着一定的顺序，各个样式之间的顺序很有讲究，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示。在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的（a:link，a:visited，a:hover，a:active）
:visited选择器只有color、background-color、border-color这三个属性有效

目标伪类选择器

描述：选择锚点目标元素

格式：选择器:target{}

例：

<style>
:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}
</style>
<a href="#news1">跳转至内容 1</a>
<a href="#news2">跳转至内容 2</a>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

结构伪类选择器

描述：根据元素在文档中所处的位置，来动态选择元素

语法：

选择器:fisrt-child：选择同级别的第一个元素。与E:nth-child(1)等同
选择器:last-child：选择同级别的最后一个元素。与E:nth-last-child(1)等同
选择器:nth-child(n)：选择同级别的第n个元素。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
选择器:nth-last-child(n)：选择同级别的倒数第n个元素。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同

同级别：HTML元素的层级。

例：

<style>
    p:first-child{
        color: red;
    }
/* 选中同级别中的第一个元素，且这个元素必须是p元素，否则无效 */
</style>	
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
    <p>我是段落5</p> <!--选中-->
    <p>我是段落6</p>
</div>

选择器:first-of-type：选择同级别中同类型的第一个元素，与E:nth-of-type(1)等同
选择器:last-of-tye：选择同级别中同类型的最后一个元素，与E:nth-last-of-type(1)等同
选择器:nth-of-type(n)：选择同级别中同类型的第n个E元素
选择器:nth-last-of-type(n)：选择同级别中同类型的倒数第n个E元素

同类型：选择指定的元素，即限定类型。

例：

<style>
    p:first-of-type{
        color: blue;
    }
</style>	
<h1>我是标题</h1>
<p>我是段落1</p> <!--选中-->
<p>我是段落2</p>
<div>
    <p>我是段落5</p> <!--选中-->
    <p>我是段落6</p>
</div>

选择器:only-child：选择同级别中唯一的子元素
选择器:only-of-type：选择同级别中唯一的同类型子元素
选择器:empty：选择没有子元素的元素，而且该元素也不包含任何文本节点

否定伪类选择器

描述：选择除指定元素以外的其它元素。

格式：选择器:not(选择器){ 样式声明 }

例：

<style>
p:not(.hello){
	color: red;
}
</style>
<p class="hello">Hello Wolrd!</p>
<p>段落1</p> <!--选中-->
<p>段落2</p> <!--选中-->
<p>段落3</p> <!--选中-->

说明：

:not() 括号内为不选择的元素

伪元素选择器

描述：选择某个元素中假想出的子元素

格式：

选择器::first-letter{}（将某个元素中的第一个字符作为伪元素选择）
选择器::first-line{}（将某个元素中的第一行文字作为伪元素选择）
选择器::selection{}（将鼠标选中的内容作为伪元素选择）
选择器::before{}（将某个元素中的开头位置作为伪元素选择）
选择器::after{}（将某个元素中的结尾位置作为伪元素选择）

说明：选择器 ::before 和 ::after 需要结合content属性来插入内容，否则无任何效果

例1：

<style>
p::first-letter{
	font-size: 20px;
}
</style>
<p>first-letter 示例</p>

例2：

<style>
p::before{
	content: '# ';
}
</style>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

说明：只有一小部分的CSS属性可以用于::selection伪元素
color、background-color、cursor、caret-color、outline、text-decoration、text-emphation-color、text-shdow

优先级（Specificity）

在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则

例：

<style>
.red{
    color: red; /* 生效 */
}
p{
    color: blue;
}
</style>
<p class="red">优先级 / Specificity</p>

样式冲突：

当出现多个相同的CSS属性都为相同的元素设置时，就会产生样式冲突

当发生样式冲突时，被选中的元素会应用那个样式由CSS优先级决定

选择器类型	优先级
1. id选择器	( 1, 0, 0 )
2. class选择器 / 属性选择器 / 伪类选择器	( 0, 1, 0 )
3. 元素选择器 / 伪元素选择器	( 0, 0, 1 )
4. 通配符选择器( * )	( 0, 0, 0 )

优先级的计算

选择器类型是根据选择器的重要程度进行的归类，而优先级就是分配给指定的 CSS 声明的一个权重，但权重只有在发生样式冲突时才有意义

例：

<style>
#content .text{
	color: red;
}
#box div.text{
	color: blue; /* 生效 */
}
</style>
<div id="box">
	<div id="content" class="text">
		声明权重
	</div>
</div>

选择器	优先级	权重
`#content .text`	( 1, 1, 0 )	0
`#box div.text`	( 1, 1, 1 )	1

在计算时，是将匹配的每一种选择器类型单独进行相加，最后在比较声明的权重( 根据选择器类型顺序逐个比较 )，当权重比值相等时，则靠后的CSS声明为正在使用的样式（即靠后的覆盖靠前的）

层叠（Cascade）

层叠是 CSS 中的一个基本特征，它定义了如何合并来自多个源的属性值的规则。层叠规则只在发生样式冲突时进行

行内样式
自定义样式表
浏览器默认样式
继承的样式

!important

如果在CSS属性值后面加上!important声明，那么该属性的样式即可强制生效

例：

<style>
p{
    color: red !important; /* 生效 */
}
</style>
<p style="color: blue">
  !important声明
</p>