1.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<style>
/*
li里的第一个是红色
*/
/*
伪类：不存在的类，特殊的类
伪类用来描述元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素
伪类一般情况下都是:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(m) 第m个子元素
特殊值：
：第n个n的范围到正无穷
2n或even表示选中第偶数个子元素
2n-1或odd都表示奇数表示奇数
以上这些伪类是根据所有子元素来排序的
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(m) 第m个子元素：这几个功能和上面的类似
-not()否定伪类
将符合条件的子类从选择器中去除
nth-type（3）是第3的倍数
nth-child(3)是第3个
*/
ul>li:first-child{
color: red;
}
ul>li:last-child{
color:blue;
}
ul>li:nth-child(2n){
color: green;
}
ul>li:first-of-type{
color:brown;
}
ul>li:not(li:nth-type(3)){
color:yellowgreen;
}
</style>
</head>
<body>
<ul>
<span>我是一个span</span>
<li>第零个</li>
<li >第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<li>第六个</li>
</ul>
</body>
</html>
2.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<style>
p{
font-size:20px;
}
/*
伪元素：伪元素表示的是一些特殊但并不存在的元素（特殊的位置）
伪元素使用 ::开头
*/
/*
::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
::before表示元素的开始
::after表示元素的最后
before 和 after必须结合content使用
*/
p::first-letter{
font-size: 60px;
}
p::first-line{
background-color: blue;
}
div::before{
content:'abc';
color:red;
}
</style>
</head>
<body>
<div>vhfgjhfgjgy</div>
<p>
Wdfbuvwdcgewiwefjif
gweihweiwieuiw ddfgfddddddddd
</p>
<P>
bvigdewuhbweivhgbirweu
</P>
</body>
</html>
3.复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<style>
/*
将class为red的元素设置为红色（字体）
交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1和选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
.red{
color: red;
}
div.red{
font-size: 30px;
}
.a.b.c{
color:blue;
}
/*
选择器分组（并集选择器）
作用：选择器1，选择器2，选择器3，选择器n{}
b1,p1,h1,span..{}
*/
h1,
span{
color:red;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>标题</h1>
<span>哈哈</span>
</body>
</html>
4.选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<style>
#box1{
background-color:orange;
}
.d1{
background-color: purple !important;
}
.red{
background-color:red;
}
div,p,span{
background-color: yellowgreen;
}
div{
font-size: 20px;
}
/*
样式的冲突：
-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独进行的），
选择器的累加不会超过其最大数量，类选择器再高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后边添加 !important,则此时该样式会获取到最高的优先级，甚至超过内联样式。
注意：在开发中这个玩意一定要慎用！
*/
</style>
</head>
<body>
<div id="box1" class="red d1 d2 d3 d4" style="background-color:skyblue;">我是一个div</div>
</body>
</html>
5.样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<style>
p{
color:red;
}
/*
样式的继承：我们为元素设置的样式也会应用于其后代元素上
继承也发生在后代的后代
我们只需要设置一次就好了
注意：并不是所有的样式都能被继承
比如背景相关的，大小相关的
*/
p{
color:red;
}
div{
color:blue;
}
</style>
</head>
<body>
<P>
我是一个p元素
<span>我是p元素中的span</span>
</P>
<div>
<span>我是div中的span
<em>我是span中的em</em>
</span>
</div>
<span>我是p元素外的span</span>
</body>
</html>
6.单位
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<title>Document</title>
<style>
html{
font-size:30px;
}
.box1{
/*
长度单位：
像素
-屏幕（显示器）实际上是由一个一个的小点构成的
-不同屏幕像素大小是不同的，像素越小的屏幕显示的效果越清晰
-所以同样的200px在不同设备下显示效果不一样
百分比
-百分比可以设置属性时相对于父元素属性的百分比
-设置百分比可以使子元素跟随父元素的改变而改变
em：
-em是相对于元素的字体大小来计算的
-lem =1font-size
-em会根据我们字体大小改变而改变
rem: -rem是相对于根元素的字体大小来计算;
*/
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
7.颜色
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height:200px;
/*
颜色单位：
在css中可以直接使用颜色名来设置各种颜色
比如：red,orange,yellow,blue,green.......
但是在css中直接使用颜色名是非常的不便
RGB值：
-RGB通过三种颜色的不同浓度来调配出不同的颜色
-R red,G green,B blue
-每一种颜色的范围在0~255（0%-100%）之间
语法：RGB(红色，绿色，蓝色)
RGBA:
-就是在rgb的基础上增加了一个表示不透明度
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明，0表示完全透明，5半透明
十六进制的RGB值
-语法：#红色绿色蓝色
-颜色浓度通过 00-ff
-如果颜色两位两位重复可以进行简写
#aabbcc --> #abc
HSL值 HSLA值
H 色相
S 饱和度
L 亮度
*/
background-color: red;
background-color: rgb(255,0,0);
background-color: rgb(0,255,0);
background-color:rgb(0,0,0);
background-color: rgb(255,255,255);
background-color: rgb(109,34,234);
background-color: #ffff00;
background-color: hsl(230,100%,89%);
background-color: hsla(98,48%,40%,0.658);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
8.a元素的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<style>
a:link{
color:red;
}
/*
:link 表示没访问过的链接
*/
a:visited{
font-size: 70px;
color:orange;
}
/*
visited表示访问过的
只能改颜色，大小不能改（为了保护隐私)
*/
a:hover{
color:aqua;
font-size: 90px;
}
/*
:active:鼠标点击
*/
a:active{
color:yellowgreen;
font-size:60px;
}
</style>
</head>
<body>
<!--
1.没有访问过的链接
2.访问过的链接
-->
<a href="https://www.baidu.com">访问过的链接</a>
<a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>
代码学自尚硅谷
1307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
