CSS选择器
1.css简介
(1)网页分为三个部分:结构(html)、表现(CSS)、行为(JavaScript)
(2)CSS—层叠样式表
网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层来设置样式,而我们最终能看到只是网页的最上边一层。总之,CSS用来设置网页中元素的样式
(3)通过CSS来修改元素的样式
第一种方式—内联样式/行内样式:在标签内部通过style属性来设置元素的样式
-问题:使用内联样式,样式只能对一个标签生效,如果希望影响多个元素,必须一个一个的修改,非常不方便
-注意:开发时绝对不要使用内联样式!
<p style="color: aqua; font:900" >少小离家老大回,乡音无改鬓毛衰</p>
第二种方式—内部样式表
-将样式编写到head中的style标签里,然后通过CSS的选择器来选中元素并为其设置各种样式,可以同时为多个标签设置样式,并且修改时只需修改一处即可
-内部样式更加方便对样式进行复用
-问题:只能对一个网页起作用,里面的样式不能跨页面进行复用
<style>
p{
color: rgb(165, 18, 18);
font-size: 1cm;
}
</style>
第三种方式—外部样式表 最佳实践
-可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件
-外部样式表需要通过link标签来进行引入,意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
-将样式编写到外部的CSS文件中可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户体验
style.css
p{
color:blue;
font-size:small;
}
h1{
color:brown;
font-size: large;
}
link标签引入
<link rel="stylesheet" href="./0.style.css">
2.CSS语法
CSS基本语法:选择器 声明块
(1)选择器,通过选择器可以选中页面中指定元素,比如 p 的作用就是选中页面中所有元素的p元素
(2)声明块,通过声明块来指定要为元素设置的样式,声明块由一个一个的声明组成,声明是一个名值对结构
一个样式名对应一个样式值,名和值之间以:连接,以;结尾
3.常用选择器
(1)元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{} h1{} div{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:lightblue;
font-size: 20px;
}
</style>
</head>
<body>
<p>书里总爱写到喜出望外的傍晚</p>
<p>骑的单车还有他和她的对白</p>
<p>女孩的白色衣裳男孩爱看她穿</p>
<p>好多桥段</p>
<p>好多都浪漫</p>
<p>好多人心酸</p>
<p>好聚好散</p>
</body>
</html>
(2)id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{} #red{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:lightblue;
font-size: 20px;
}
#first{
color:lightcoral;
}
#second{
color: lightskyblue;
}
</style>
</head>
<body>
<p id="first">书里总爱写到喜出望外的傍晚</p>
<p id="second">骑的单车还有他和她的对白</p>
<p>女孩的白色衣裳男孩爱看她穿</p>
<p>好多桥段</p>
<p>好多都浪漫</p>
<p>好多人心酸</p>
<p>好聚好散</p>
</body>
</html>
(3)类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:lightblue;
}
#first{
color:lightcoral
}
#second{
color: lightskyblue;
}
.A{
font-size: 10px;
}
.B{
font-size: 20px;
}
</style>
</head>
<body>
<p id="first">书里总爱写到喜出望外的傍晚</p>
<p id="second">骑的单车还有他和她的对白</p>
<p class="A B C">女孩的白色衣裳男孩爱看她穿</p>
<p class="A">好多桥段</p>
<p class="B">好多都浪漫</p>
<p>好多人心酸</p>
<p>好聚好散</p>
</body>
</html>
(4)通配选择器
作用:选中页面的所有元素
语法:*{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color:mediumslateblue;
}
</style>
</head>
<body>
<p>书里总爱写到喜出望外的傍晚</p>
<p>骑的单车还有他和她的对白</p>
<p>女孩的白色衣裳男孩爱看她穿</p>
<p>好多桥段</p>
<p>好多都浪漫</p>
<p>好多人心酸</p>
<p>好聚好散</p>
</body>
</html>
4.复合选择器
(1)交集选择器
作用:选中同时复合多个条件的元素
语法:选择器1.选择器2.选择器3.选择器n{}
例子:div.A{} p.B{}
注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.A{
color: orangered;
}
p.B{
font-size: 20px;
}
</style>
</head>
<body>
<div class="A">书里总爱写到喜出望外的傍晚</div>
<p class="B">骑的单车还有他和她的对白</p>
<p>女孩的白色衣裳男孩爱看她穿</p>
<div class="A">好多桥段</div>
<div class="A">好多都浪漫</div>
<div class="A">好多人心酸</div>
<span class="A">好聚好散</span>
</body>
</html>
(2)选择器分组—并集选择器
作用:同时选择多个选择器对应的元素{}
语法:选择器1,选择器2,选择器3,选择器n{}
例子:p,span{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div.A{
color: orangered;
} */
p,span{
color:powderblue;
font-size: 2rem;
}
/* p.B{
font-size: 20px;
} */
</style>
</head>
<body>
<div class="A">书里总爱写到喜出望外的傍晚</div>
<p class="B">骑的单车还有他和她的对白</p>
<p>女孩的白色衣裳男孩爱看她穿</p>
<div class="A">好多桥段</div>
<div class="A">好多都浪漫</div>
<div class="A">好多人心酸</div>
<span class="A">好聚好散</span>
</body>
</html>
5.关系选择器
(1)元素分类
父元素:直接包含子元素的元素叫做父元素
子元素:直接被父元素包含的元素是子元素
祖先元素:直接或间接包含后代元素的元素叫做祖先元素,一个元素的父元素也是它的祖先元素
后代元素:直接或间接被祖先元素包含的元素叫做后代元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素是兄弟元素
(2)选择器分类
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素
div>p>span{
color: cadetblue;
}
后代元素选择器
作用:选中指定元素内的指定后代元素
语法:祖先 后代
div.A span{
color: cornflowerblue;
}
选择下一个兄弟
语法:前一个 + 下一个
p+span{
color: darkgoldenrod;
}
选择下边所有兄弟
语法:兄~弟
p~span{
color: indigo;
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p>span{
color: cadetblue;
}
div.A span{
color: cornflowerblue;
}
p+span{
color: darkgoldenrod;
}
p~span{
color: indigo;
}
</style>
</head>
<body>
<div class="A">
我是div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div中的span1元素</span>
<span>我是div中的span2元素</span>
</div>
<br>
<div>
<span>我是div外的span元素</span>
</div>
</body>
</html>
6.属性选择器
[属性名] 选择含有指定属性的元素
p[title]{
color: lightseagreen;
}
[属性名=属性值] 选择含有指定属性和属性值的元素
div[title=abc]{
color: lightseagreen;
}
[属性名^=属性值] 选择属性值以指定值开头的元素
div[title^=abc]{
color: lightseagreen;
}
[属性名$=属性值] 选择属性值以指定值结尾的元素
div[title$=abc]{
color: lightseagreen;
}
[属性名*=属性值] 选择属性值中含有某值的元素
p[title*=e]{
color: lightseagreen;
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
p[title*=e]{
/* div[title$=abc]{ */
/* div[title^=abc]{ */
/* div[title=abc]{ */
/* p[title]{ */
color: lightseagreen;
}
</style>
</head>
<body>
<div title="abc">书里总爱写到喜出望外的傍晚</div>
<p title="abcde">骑的单车还有他和她的对白</p>
<p title="hello">女孩的白色衣裳男孩爱看她穿</p>
<div title="abcdeabc">好多桥段</div>
<div >好多都浪漫</div>
<div>好多人心酸</div>
<span>好聚好散</span>
</body>
</html>
7.伪类选择器
(1)伪类(不存在的类,特殊的类)
伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素······
(2)伪类一般情况下用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值:
n 第n个(n的范围:0到正无穷)
2n或even 表示选中偶数位的元素
2n+1或old 表示选中奇数位的元素
—以上伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
—这几个伪类的功能和上述的类似,不同点是他们是在同类型元素中进行排序
:not() 否定伪类
—将符合条件的元素从选择器中去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul>li:first-of-type{
color:pink;
}
ul>li:first-child{
font-size: 1.5pc;
}
ul>li:nth-child(2n+1){
color:seagreen;
}
ul>li:not(:first-of-type){
color:turquoise;
}
</style>
</head>
<body>
<ul>
<p>我是p元素</p>
<li>li中的第1个</li>
<li>li中的第2个</li>
<li>li中的第3个</li>
<li>li中的第4个</li>
<li>li中的第5个</li>
<li>li中的第6个</li>
</ul>
</body>
</html>
8.超链接的伪类
(1):link 用来表示没访问过的链接(正常的链接)
a:link{
color: teal;
}
(2):visited 用来表示访问过的链接(只能修改链接的颜色)
a:visited{
color: violet;
}
(3):hover 用来表示鼠标移入的状态
a:hover{
font-size: 3px;
}
(4):active 用来表示鼠标点击
a:active{
font-size: 20px;
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
color: teal;
}
a:visited{
color: violet;
}
a:hover{
font-size: 3px;
}
a:active{
font-size: 20px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">访问过的链接</a>
<br><br>
<a href="https://www.sina.com.cn/">没访问过的链接</a>
</body>
</html>
9.伪元素
(1)伪元素表示页面中一些特殊的并不真实存在的元素
(2)伪元素使用 ::
开头
(3)常见伪元素
::first-letter 表示第一个字母
p::first-letter{
font-size: 40px;
}
::first-line 表示第一行
p::first-line{
color: rgb(207, 207, 64);
}
::selection 表示选中的内容
p::selection{
color: tomato;
}
::before 元素的开始
p::before
{
content:'『';
font-size: 40px;
}
::after 元素的最后
p::after{
content: '』';
font-size: 40px;
}
—这两个元素必须结合content属性来使用
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-letter{
font-size: 40px;
}
p::first-line{
color: rgb(207, 207, 64);
}
p::selection{
color: tomato;
}
p::before
{
content:'『';
font-size: 40px;
}
p::after{
content: '』';
font-size: 40px;
}
</style>
</head>
<body>
<q>AA</q>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium, voluptatem repudiandae odio quae illum iure vitae. Dicta eum sapiente similique, perferendis veritatis nemo inventore, atque sunt assumenda ullam, temporibus quibusdam!</p>
</body>
</html>
来个餐厅练习(https://flukeout.github.io/)轻松一下吧~