[前端笔记002]CSS的基础知识及选择器 -- selector

资源

• 推荐zeal:离线文档查看器 https://zealdocs.org/
• 推荐w3c:线上文档 https://www.w3school.com.cn/
• 本笔记参考视频，尚硅谷:BV1XJ411X7Ud
• 我的笔记：https://gitee.com/plusmile/stackedit-app-data.git
• 我的CSS文件：https://gitee.com/plusmile/front-code.git
• CSS餐厅练习：https://flukeout.github.io/，可以练习下面提到的选择器，检查自己的学习情况。

简介

• 网页分为三个部分，结构(html)现(CSS)行为(Javascript)，这章讲表现，看到的都是表现。
• CSS全称层叠样式表，通俗的讲就是按样式表规定标签样式长啥样。
• 注释的格式为/* 注释内容*/,可以写在style里也可以写在CSS文件中
• CSS的基本语法为：选择器{声明块}，选择器可以选中页面中的指定元素，声明块中可以定义要为元素设置的样式，声明式结构: 样式名:值;
• CSS修改样式的方式：

1. 内联样式，行内样式，在标签内通过style属性设置元素样式， 编写、修改比较麻烦，开发时不使用，例子如下：
   

   111

2. 内部样式表，将样式编写到head中的style标签中，缺点是不同文件无法复用，例子如下：

<style>
	p{
		color:green;
		font-size:60px;
	}
style>

3. 外部样式表，需要编写到外部的CSS文件中，文件中语法与第二种相同， 然后使用link标签引入外部的CSS文件。方便多网页复用，可以使用浏览器的缓存机制，加快网页加载速度，是最佳实践。href的值跟html笔记中a标签的值格式一样。
   

常用的选择器

1. 元素选择器：根据标签名选中指定的元素
   - 语法：标签名{}
   - 例子：p{} h1{} div{} p{color: rebeccapurple;}
2. id选择器：根据元素的id属性值选中一个元素
   - 说明：因为id不能重复，所以只能选中一个
   - 语法：#id属性值{}
   - 例子：#box{} #red{color: red;}
3. 类选择器：根据元素的class属性值选中一个元素
   - 说明: class为标签属性，可以使用class来为不同或相同元素分组
   - 语法：.class属性值{}
   - 例子：.blue{color: red;}
   - 在标签中可以同时为一个与元素指定多个class属性，以空格隔开
   

   类选择器

4. 通配选择器：选中页面中的所有元素
   - 语法：*{}
   - 例子：*{color: red;}

复合选择器

1. 交集选择器：选中同时符合多个条件的元素
   - 语法：选择器1选择器2选择器n{}
   - 例子：div.red.a.b{color: red;}
   - 注意：元素选择器必须为开头，如果有的话
2. 并集选择器：同时选择多个选择器对应的元素。
   - 语法：选择器名，选择器名，交集选择器{},
   - 例子：#b1,.p1,div.red{}，div,p{color: red;}

关系选择器

1. 前置关系知识：
   - 父、子关系是指父元素直接包含子元素；
   - 祖先、后代关系是指祖先元素直接间接的包含后代元素
   - 兄弟关系是指，两个元素的父元素相同
2. 子元素选择器
   - 语法 父元素>子元素
   - 例：div>span,div.red>span,div.red>span{color: red;}
3. 后代选择器：选后代
   - 语法：祖先 空格 后代
   - 例：div.red span{color: red;}
4. 下一个兄弟选择器：只选择和自己最近的下一个兄弟元素
   - 语法：前一个+下一个
   - 例：p+span{color: red;}
5. 所有兄弟选择器：选择下面的所有兄弟
   - 语法：前一个~下一个
   - 例：p~span{color: red;}

属性选择器

语法：

• 元素名[属性名]{}，选择有指定属性的元素
• 元素名[属性名=属性值]{}，选择有指定属性且等于指定值的元素
• [属性名]{}，所有有指定属性的元素
• [属性名^=属性值]，以指定值开头的元素，这里应该是正则表达式，之后再学吧
• [属性名$=属性值]，以指定值结尾的元素
• [属性名*=属性值]，属性值中包含指定值的元素
• 例子：

p[title]{
	color: green;
}
p[title=abc]{
	color: red;
}
p[title^=abc]{
	color: blue;
}

伪类选择器

• 伪类来描述一个元素的特殊状态，包括第一个/被点击灯
• 语法： 使用冒号开头 :伪类名
• 以所有子元素次序就行排序的伪类
  1. :first-child 第一个子元素
  2. :last-child 最后一个子元素
  3. :only-child 仅在别的元素内部有一个元素的元素，plate :only-child表示 plate上 只有一个元素的元素
  4. :nth-child(n) 第N个子元素，n的一些取值的含义
  - n=n,第n个元素
  - n=2n/even,偶数位元素
  - n=2n+1/odd,奇数位元素
  - n=6n+2,表示从2开始每隔6个的元素
• 以同类型子元素次序排序
  1. :first-of-type 同类型中第一个子元素
  2. :last-of-type 同类型中最后一个子元素
  3. :nth-of-type() 同类型中第N个子元素
  4. …
  5. 类比child即可
• 其他伪类
  1. :empty 没有子元素的元素
  2. :not() 否定伪类，将符合条件的元素从选择器中去除
  - 例子ul>li:not(:nth-of-type(3)){}不选中li的第三个元素
  3. 超链接a的伪类
  - :link 没访问过的，即正常的链接。
  - :visited 访问过的链接，由于隐私的原因，此伪类只能改链接颜色
  - :hover 表示鼠标移入，其他元素也可以
  - :active 表示鼠标点击，其他元素也可以
  - 四个的优先级正确顺序为LVHA，HA放后面才会生效
  - 例子：

a:link{
	color: blue;
}
a:visited{
	color: gold;
}
a:hover{
	color: purple;
}
a:active{
	color: chocolate;
}

伪元素选择器

• 伪元素：内容中的特殊位置
• 语法 双冒号::开头
• 一些常用伪元素：
  1. ::first-letter 首字母
  2. ::first-line 第一行
  3. ::selection 选中的内容
  4. ::after 元素的最后加content的值
  5. ::before 元素的开始加content的值
  6. after与before必须与content属性联合使用
• 例子：

::first-letter{
	font-size: 100px;
}
::after{
	content: 'as';
}

选择器的权重

• 选择器的权重如下：
  1. 内联样式 1,0,0,0
  2. id选择器 0,1,0,0
  3. 类和伪类选择器 0,0,1,0
  4. 元素选择器 0,0,0,1
  5. 通配选择器 0,0,0,0
  6. 继承的样式 没有优先级，继承的知识看最后一节
• 比较优先级时，将选择器优先级相加计算，高的优先显示，并集选择器单独计算
• 优先级相同则先使用靠下的样式
• 优先级的累加不会超过其最大数量级，即不会超过逗号，多少个id选择器优先级相加都不会大于内联样式
• 在样式后面添加!important，则此时样式获取到最高优先级，一般不用

补充的一些基础知识

• 继承：元素样式会默认应用在它的后代元素上，-背景、布局相关等的样式不会被继承，具体继承属性可以查文档
• 单位：
  1. 像素：px，不同屏幕像素大小不一样
  2. 百分比：属性相对于父元素的百分比
  3. em相对于元素本身的字体大小计算，1em=1font-size,一般为16px
  4. rem相对于根元素（html）的字体大小计算
  5. 颜色rgb:RGB(R,G,B)范围0-255，或者0-100%，或#00-ff
  6. RGBA(R,G,B,A)A的范围0-1表示透明度，0表示完全透明，.5半透明
  7. 颜色HSL，不常用，H色相(0-360),S饱和度(0-100%),L亮度(0-100%)

.box{
	font-size: 30px;
	width: 100px;
	height: 10em;
	background-color: aqua;
	background-color: rgba(255, 0, 0, .5);
	background-color: #ff0000;
	background-color: hsl(20, 100%, 50%);
}