目录
3.元素选择器之间组合使用分类(即元素组合选择器)【后代/儿子/毗邻/弟弟】
6.伪类选择器(状态变化)【link,hover,active,visited,focus】
1.CSS书写格式，CSS引入方式
1.css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
2.css的三种引入方式
1.style标签内部直接书写(head内，调试阶段)
<style>
hi{
color: yellow;
}
</style>
2.通过link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="css文件路径">
stylesheet：引用外部css文件
3.行内式，直接在标签处(一般不用)
<h1 style="color: yellow">一起学习python吧</h1>2.CSS选择器分类(id,class,元素，通用)
1.例子代码：
<html>
<head></head>
<body>
<span id="i1" class="c1">今天学习了嘛</span>
<p>一起努力学习</p>
</body>
</html>
2.选择器分类（在style中演示）
(1)id选择器
#i1 { /*找到id是i1的标签 将文本颜色变成绿黄色*/
color: yellow;
}
(2)类选择器
.c1 { /*找到class值里面包含c1的标签*/
color: red;
}
(3)元素/标签选择器
span { /*找到所有的span标签*/
color: red;
}
(4)通用选择器
* { /*将html页面上所有的标签全部找到*/
color: green;
}3.元素选择器之间组合使用分类(即元素组合选择器)【后代/儿子/毗邻/弟弟】
元素组合选择器
后代选择器
儿子选择器
毗邻选择器
弟弟选择器
例子代码：
<html>
<head>
<style>
div span{ /*后代选择器，空格：后代(所有span)*/
color: red;
}
div>span{ /*儿子选择器，>:儿子(第一级所有span)*/
color: red;
}
div+span{ /*毗邻选择器，+:和div同级并且紧挨着的下面的第一个span*/
color: aqua;
}
div~span { /*弟弟选择器，~:和div同级别下面所有的span*/
color: red;
}
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div
<p>div下的p</p>
<p>div下的p
<span>div下的p里的span</span>
</p>
<span>div下span3</span>
<span>div下span4</span>
</div>
<span>span5</span>
<span>span6</span>
<p>ppp</p>
<span>span7</span>
</body>
</html>4.属性选择器(精准定位)
属性选择器
含有某个属性
含有某个属性并且有某个值
含有某个属性并且有某个值的某个标签 标签[属性=""]{样式}
例子代码：
<html>
<head>
<style>
[username]{ /*1.将所有含有属性名是username的标签背景色改为红色*/
background-color: red;
}
[username='wsx']{ /*2.找到所有属性名是username并且属性值是wsx的标签改为橘色*/
background-color: orange;
}
input[username='wsx']{ /*3.找到所有属性名是username并且属性值是mxg的input标签*/
background-color: wheat;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="zjf">
<input type="text" username="mxg">
<p username="wsx">前端学习</p>
<div username="sdf">MySQL学习</div>
<span username="lzr">python学习 </span>
</body>
</html>5.多种选择器并列/组合（逗号表示并列）
1.多种不同选择器组合使用：
多种样式同用时：并列用逗号,隔开
<html>
<head>
<style>
div,p,span { /*元素标签之间并列，逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span { /*id与元素之间并列*/
color: orange;
}
#d1 .c2 span{ /* id与元素之间组合嵌套 */
color: red;
}
</style>
</head>
<body>
<div id="d1">div
<p class="c2">div>p
<span id="d3">div>p>span1</span>
<span id="d4">div>p>span2</span>
</p>
<p class="c3">sadjasdjkasldj</p>
</div>
<p class="c1">p</p>
<span>span</span>
</body>
</html>6.伪类选择器(状态变化)【link,hover,active,visited,focus】
<!--
伪类选择器，用于鼠标触碰所显示效果，多用在标题跳转（a超链接），
格式：标签:状态{}
访问前状态：link
鼠标悬浮状态：hover
点击不松鼠标状态：active
访问后状态：visited
input标签框聚焦状态：focus
-->
<html>
<head>
<style>
body {
background-color: black;
}
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*鼠标悬浮态,停留在标记处的状态，常用*/
color: aqua;
}
a:active { /*鼠标点击不松开的状态 激活态*/
color: black;
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: brown;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">买买买买啊</a>
<input type="text">
</body>
</html>7.伪元素选择器(首尾调节，css添加内容，消除浮动问题)
<!--
伪元素选择器，多用于文本前后修改样式
first-letter:首字调节
before>content：利用css在前面添加文本，该文本不能被cv
after>content:
before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题
-->
<html>
<head>
<style>
p:first-letter { /*首字调节*/
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 用css添加内容，且内容不能被cv*/
content:"这段内容不可以被cv,不信你试试";
color: blue;
}
p:after {
content: '这段内容也不可以被cv';
color: orange;
}
</style>
</head>
<body>
<p>装备一刀99，没有刀都掉钱</p>
</body>
</html>8.选择器优先级
1.选择器相同，上到下顺序而排
就近原则:谁离标签更近就听谁的
2.选择器不同
行内 > id选择器 > 类选择器 > 标签选择器
（精确度越高越有效）
扫一扫
1666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
