前端——css选择器
CSS样式
css的三种引入方式
<!--1、行内css（一般不使用）-->
<h1 style="color: green">老板好 要上课吗?</h1>
<!--2、内部css-->
<style>
h1 {
color: red;
}
</style>
<!--3、外部css(最正规方式 解耦合)-->
<link rel="stylesheet" href="mycss.css">
CSS选择器
基本选择器
-
id选择器
#d1 { /*找到id为d1的标签，将其文本颜色变成绿色*/ color: green; } -
类选择器
.d1 { /*找到class为d1的标签，将其文本颜色变成黄色*/ color: yellow; } -
元素选择器
span { /*将所有的span标签找到，并将其文本颜色变成粉色*/ color: pink; } -
通用选择器
* { /*将所有标签找到，并将其文本颜色变成黑色*/ color: black; }
组合选择器
/*
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>
<p>儿子1</p>
<p>儿子2
<span>孙子1</span>
</p>
<span>儿子3</span>
<span>儿子4</span>
</div>
<span>毗邻</span>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
*/
-
后代选择器
div p { /*找到div下的所有p标签，将其颜色变成红色*/ color: red; } -
儿子选择器
div>p { /*找到div下一级中的所有p标签，且使其文本颜色变为绿色*/ color: green; } -
毗邻选择器
div+span { /*将与div同一级别的且紧挨着div的span标签的文本颜色变为蓝色*/ color: blue; } -
弟弟选择器
/*弟弟选择器*/ div~span { /*将与div同级别的且在div下面的所有span标签的文本颜色变为红色*/ color: red; }
属性选择器
/*
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
*/
<style>
[username] { /*将所有含有属性名是username的标签背景色改为红色*/
background-color: pink;
}
[username='jason'] { /*找到所有属性名是username并且属性值是jason的标签*/
background-color: orange;
}
input[username='jason'] { /*找到所有属性名是username并且属性值是jason的input标签*/
background-color: wheat;
}
</style>
<body>
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="kevin">
<p username="tank">水箱老师</p>
<div username="egon">矮子老师</div>
<span username="jason">jason老师 </span>
</body>
