CSS（一）-- CSS的基本语法，选择器，伪元素，伪类
时间：2021-01-18 10:41:00
收藏：0
阅读：0
目录
1.CSS
- 层叠样式表
- 网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式，而最终我们能看到的只是网页的最上边的一层
- 总之一句话，css用来设置网页中元素的样式
内联样式，行内样式
在标签内部通过style属性来设置元素的样式
<p style="color:red;font-size:60px;">hello world!</p>
- 内联样式不能实现css样式的复用，因此开发时绝对不要使用内联样式
内部样式表
- 将样式编写到head中的style标签中
- 然后通过CSS选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
<style>
p{
color: green;
font-size: 50px;
}
</style>
缺点：不能多个HTML页面使用
外部样式表（最佳样式）
- 可以将CSS样式表编写到一个外部的CSS文件中
- 通过link标签引入css文件
<link rel="stylesheet" href="./style.css">
- 外部样式需要通过link标签进行引入，所有网页都可以对其进行引入
- 使用外部样式表，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
2.CSS的基本语法
<style>
p{
color: green;
font-size: 50px;
}
</style>
2.1注释
/* */
2.2CSS的选择器
通过选择器可以选中页面中的指定元素
- 比如p的作用就是选中页面中所有的指定元素
2.2.1常用选择器
元素选择器
- 作用：根据标签名来选中指定的元素
- 语法：标签名
例子：p{},h1{},div{}
id选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值
- id不能重复
#red{
color: red;
}
类选择器
- 作用：class是一个标签的属性，他和id类似，但是可以多个元素用同一个class
- 语法：.class{}
.blue{
color:blue;
}
- 可以同时为一个元素指定多个class属性
<h1 class="blue abc">hello world</h1>
通配选择器
- 作用：选中页面中的所有元素
- 语法：*
*{
color:red;
}
2.2.2复合选择器
交集选择器
- 作用：选中同时符合多个条件的元素
- 语法：选择器1选择器2选择器3{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
div.red{
font-size:30px;
}
并集选择器（选择器分组）
- 作用: 同时选择多个选择器对应的元素
- 语法： 选择器1，选择器2，选择器3{}
让元素h1和span都受到color:green；渲染
h1,span{
color:green;
}
2.2.3关系选择器
html中的元素关系
父元素，子元素，祖先元素，后代元素，兄弟元素
子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法：父元素 > 子元素
- 范围： 直接子元素（只包括儿子辈）
为div直接包含的span设置一个字体颜色
而其子元素p下的span因为没有直接被div包含而不受到影响
<head>
<style>
div > span{
color:orange;
}
</style>
</head>
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>**被选中**
</div>
<div>
<span>
我是div外的span
</span>**被选中**
</div>
</body>
- 如果只想选中第一个div下的span,只需要给其加一个class并识别食客
<head>
<style>
div.box > span{
color:orange;
}
</style>
</head>
<body>
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>**被选中**
</div>
<div>
<span>
我是div外的span
</span>**被选中**
</div>
</body>
后代元素选择器
- 作用：选中指定元素内的指定后代元素
- 语法：祖先 后代
- 范围：选中所有满足条件的后代，（不是子元素选择器的只有直接后代才行）
div span{
color:skyblue;
}
兄弟元素选择器
- 作用：选择下一个兄弟（并行关系）
- 语法：前一个，下一个
选择p后面的span（后面的，离得最近的）
p + span{
color:red;
}
选择下边所有的兄弟
p ~ span{
color:red;
}
2.2.4属性选择器
根据元素的属性选择
- 语法：元素[属性名]{}，元素[属性名=属性值]{}
元素[属性]{}
[属性]{} <==> *[属性]{}//前面不写则默认为*，搜索所有元素的属性
[属性名 ^= 属性值]{} //选择属性值以指定值开头的元素
[属性名 $= 属性值]{} //选择属性值以指定值结尾的元素
[属性名 *= 属性值]{} //选择属性值中含有某值的元素
<head>
<style>
p[title]{
color:orange;
}
p[title=2]{
color:red;
}
</style>
</head>
<body>
<p title="1">a</p>
<p title="2">b</p>
<p title="3">c</p>
</body>
2.2.5伪类、伪元素选择器
伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素 - 伪类一般情况下都是使用：开头
排序位置的伪类
根据所有的子元素排序
- :first-child 第一个子元素
- :last-child 最后一个子元素
- :nth-child() 选中第n个子元素
- :nth-child(n) 选中所有子元素
- :nth-child(2) 选中第二个子元素
- :nth-child(2n)<==>:nth-child(even)选中偶数位的子元素
- :nth-child(2n+1)<==>:nth-child(odd)选中奇数位的子元素
根据同类型的伪类进行排序
- :first-of-type
- :last-of-type
- :nth-of-type()
这几个伪类在功能上和上述类似，不同点是他们是在同类型元素中进行排序
2.3CSS的声明块
通过声明块来指定要为元素设置的样式
- 声明是一个名值对结构，一个样式名对应一个样式值
否定伪类
将符合条件的元素从选择器中去除
<head>
<style>
ul > li:not(:nth-child(3)){//选中所有的li，除了第三个
color:red;
}
</style>
</head>
<body>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
超链接的伪类
- link表示没访问过的链接
a.link{
}
- visited表示访问过的链接
a.visited{
}
以上两个伪类只适用于a
由于隐私的原因，visted这个伪类只能修改链接的颜色
- :hover用来表示鼠标移入的状态
a:hover{
color:aqua;
font-size: 50px;
}
- :active 用来表示鼠标点击
a:active{
}
伪元素选择器
不存在的元素
-
：：开头
-
::first-letter
元素内容的第一个字母
p::first-letter{ //选中p元素中的第一个字母
font-size:50px;
}
<p>hello world!</p>
-
::first-line
表示第一行 -
::selection 表示选中的内容
p::selection{
background-color:greenyellow;
}
-
::after
befor和after在开发中用的非常多
元素最后的位置 -
::before
元素开始的位置
before和after必须结合content使用
div::before{
content:"abc";
color:blue;
}
div::after{
content:"xyz";
color:blue;
}
评论（0）