[前端笔记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修改样式的方式:
- 内联样式,行内样式,在标签内通过style属性设置元素样式, 编写、修改比较麻烦,开发时不使用,例子如下:
<p style="color:red; font-size:60px;">111</p>
- 内部样式表,将样式编写到head中的style标签中,缺点是不同文件无法复用,例子如下:
<style>
p{
color:green;
font-size:60px;
}
</style>
- 外部样式表,需要编写到外部的CSS文件中,文件中语法与第二种相同, 然后使用link标签引入外部的CSS文件。方便多网页复用,可以使用浏览器的缓存机制,加快网页加载速度,是最佳实践。href的值跟html笔记中a标签的值格式一样。
<link rel="stylesheet" href="./01-CSS简介.css">
常用的选择器
- 元素选择器:根据标签名选中指定的元素
- 语法:标签名{}
- 例子:p{} h1{} div{}p{color: rebeccapurple;}
- id选择器:根据元素的id属性值选中一个元素
- 说明:因为id不能重复,所以只能选中一个
- 语法:#id属性值{}
- 例子:#box{}#red{color: red;}
- 类选择器:根据元素的class属性值选中一个元素
- 说明: class为标签属性,可以使用class来为不同或相同元素分组
- 语法:.class属性值{}
- 例子:.blue{color: red;}
- 在标签中可以同时为一个与元素指定多个class属性,以空格隔开
<h1 class="blue big">类选择器</h1>
- 通配选择器:选中页面中的所有元素
- 语法:*{}
- 例子:*{color: red;}
复合选择器
- 交集选择器:选中同时符合多个条件的元素
- 语法:选择器1选择器2选择器n{}
- 例子:div.red.a.b{color: red;}
- 注意:元素选择器必须为开头,如果有的话 - 并集选择器:同时选择多个选择器对应的元素。
- 语法:选择器名,选择器名,交集选择器{},
- 例子:#b1,.p1,div.red{},div,p{color: red;}
关系选择器
- 前置关系知识:
- 父、子关系是指父元素直接包含子元素;
- 祖先、后代关系是指祖先元素直接间接的包含后代元素
- 兄弟关系是指,两个元素的父元素相同 - 子元素选择器
- 语法 父元素>子元素
- 例:div>span,div.red>span,div.red>span{color: red;}
- 后代选择器:选后代
- 语法:祖先 空格 后代
- 例:div.red span{color: red;}
- 下一个兄弟选择器:只选择和自己最近的下一个兄弟元素
- 语法:前一个+下一个
- 例:p+span{color: red;}
- 所有兄弟选择器:选择下面的所有兄弟
- 语法:前一个~下一个
- 例: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;
}
伪元素选择器
- 伪元素:内容中的特殊位置
- 语法 双冒号
::
开头 - 一些常用伪元素:
- ::first-letter 首字母
- ::first-line 第一行
- ::selection 选中的内容
- ::after 元素的最后加content的值
- ::before 元素的开始加content的值
- after与before必须与content属性联合使用
- 例子:
::first-letter{
font-size: 100px;
}
::after{
content: 'as';
}
选择器的权重
- 选择器的权重如下:
- 内联样式 1,0,0,0
- id选择器 0,1,0,0
- 类和伪类选择器 0,0,1,0
- 元素选择器 0,0,0,1
- 通配选择器 0,0,0,0
- 继承的样式 没有优先级,继承的知识看最后一节
- 比较优先级时,将选择器优先级相加计算,高的优先显示,并集选择器单独计算
- 优先级相同则先使用靠下的样式
- 优先级的累加不会超过其最大数量级,即不会超过逗号,多少个id选择器优先级相加都不会大于内联样式
- 在样式后面添加!important,则此时样式获取到最高优先级,一般不用
补充的一些基础知识
- 继承:元素样式会默认应用在它的后代元素上,-背景、布局相关等的样式不会被继承,具体继承属性可以查文档
- 单位:
- 像素:px,不同屏幕像素大小不一样
- 百分比:属性相对于父元素的百分比
- em相对于元素本身的字体大小计算,1em=1font-size,一般为16px
- rem相对于根元素(html)的字体大小计算
- 颜色rgb:RGB(R,G,B)范围0-255,或者0-100%,或#00-ff
- RGBA(R,G,B,A)A的范围0-1表示透明度,0表示完全透明,.5半透明
- 颜色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%);
}