本文详细介绍了CSS代码的三种书写方式：内联、内部和外部链接，并讲解了四个基本选择器——统配、标签、类和ID选择器。此外，还探讨了复合选择器，包括子代、后代、群组和属性选择器，以及伪类选择器的应用，如焦点、悬停、首个子元素等。最后，提到了CSS代码的优先级规则。
一、css代码书写方式：
1、头部：书写在style标签内。
<head>
<style>
css 代码段
</style>
</head>
2、外链：将css代码写在外部css文件内，再使用link标签链接这个css文件。
<link rel="stylesheet" href="css文件地址">
3、行内：在标签内添加style属性，将css写在style属性里。
<tagName style="css代码段"></tagName>
二、四个基本选择器
1、统配选择器：匹配页面所有元素。
*{
}
2、标签选择器：匹配页面所有标签元素，会匹配多个同名标签元素。
标签名{
}
3、类选择器(99%)：匹配页面具备相应class属性的元素，会匹配多个同名class属性名元素。
.类名{
}
4、id选择器：匹配页面具备id属性的元素，具有唯一性，只匹配第一个id名元素。
#id名{
}
三、复合选择器：基本选择器的进阶用法
1、子代选择器：匹配某个元素下的子元素，不会匹配孙子元素或者更低的元素。
选择器>选择器{
}
2、后代选择器：匹配某个元素的所有后代，包括子元素和孙元素及更后代的元素。
选择器 选择器{
}
3、群组选择器：匹配多个选择器，使用同一个样式。
选择器，选择器，...{
}
4、属性选择器：匹配某些属性，例如匹配有 name='名字' 属性的元素。
[属性="值"]{
}
值得注意的是，代码存在优先权，高优先权会覆盖低优先权样式
优先权：从小到大为
统配 < 标签 < 类选择器 < id选择器 < 行内样式 < important关键字
四、伪类选择器：搭配正常选择器使用，实现部分css特效。
1、捕获元素获取焦点时做某事，通常使用于输入标签
选择器:focus{
}
2、鼠标移入时做某事，通常使用于二级菜单与各种指向效果
选择器:hover{
}
3、选择第一个元素(指使用些伪类的选择器)
选择器:first-child{
}
4、选择最后 一个元素
选择器:last-child{
}
5、捕获批量元素中的某个元素,括号内可写数字，用以捕获第几个元素，也可写2n用来捕获2的倍数的元素，以此可以衍生出2n-1匹配奇数等用法。
选择器:nth-child(){
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
