目录
本篇文章只是为学习JS，简单的了解一下CSS选择器，做一下日常总结
CSS的引入样式
| 行内样式 | 写在标签内部 |
| 内部样式 | 在head中构建一个style标签 写在style标签中 |
| 外部样式 | 将所有的CSS写在一个文件中，从外部引入 |
一个网页有什么内容是html要做的事情，这些内容标签要怎么放置，长什么样子，就是CSS要做的事情，简单来说就是给页面做规划，选择器就是为了能够方便选择这些标签，对标签进行操作。
选择器规范（放了方便阅读，更好看，算是行业规范）
- 1.冒号后面要用空格
- 2.选择器和{之间也要用空格
这里只用内部样式演示，方便演示。
1.标签选择器
html就是由一个个的标签组成，像p标签，br标签，div标签，span标签等等，CSS选择器选择的就是标签。
代码
<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<a href="www.baidu.com">百度</a>
</body>代码的执行结果
CSS代码
标签选择器格式是 标签名字
<style>
div {
color : blue;
font-size: 48px;
}
a {
color: black;
font-size: 48px;
}
</style>代码的意思就是让所有div标签变成蓝色，字体48px；让a标签变成黑色，字体也是48像素。
2.class选择器
如果使用标签选择器你会发现，每一个标签都会被修改，虽然这样提高了代码的复用性，但是无法修改特定某个标签进行修改。
class选择器就是在标签内部定制一个class属性，通过这个属性就能锁定某一个或者某一类标签
<div class="aa">我是div1</div>CSS代码
class选择器，格式是 .class属性内容
<style>
.aa {
color: red;
font-size: 48px;
}
</style>
3.id选择器
id选择器实际是class选择器差不多，但是一般来说id是唯一的，以便确认某一个标签
<div id="bb">我是div2</div>CSS代码
id选择器格式是使用 #id属性内容
这里可以看到我对两个标签都进行了编码，大家可以猜一下最后会显示什么样子的结果？
<style>
div {
color : blue;
font-size: 48px;
}
#bb {
color: aqua;
font-size: 48px;
}
</style>执行结果
使用的就近css标签（就近原则）
4.复合选择器
前面无论是标签选择器，class选择器还是id选择器都是单标签选择器，复合标签就是可以多个单标签嵌套，具体直接看代码。
<div>
<ul>
<li id="aa">小猫</li>
<li id="bb">小狗</li>
<li id="cc">小猪</li>
</ul>
</div>如果我想对三个选项分别作出不一样的修饰，不仅可以通过id选择器选择，因为这里代码比较少，通过id就可以单独锁定，但是如果有很多呢？仅仅通过一个单标签是不够的。
复合选择器就是选择一个标签中的另一个，甚至可以再深入一层，标签也是由父子关系的。
<style>
div ul #aa {
color: red;
}
div #bb{
color: green;
}
div>ul>#cc {
color: blue;
}
</style>- 第一个复合标签是就是一层一层的递进的。
- 第二个标签为什么可以条跳跃，跨过ul标签呢？其实这也是被允许的，只要能锁定某一个标签，你怎么嵌套都可以的。
- 第三个标签的>前后就是严格的父子关系，不能跨越。
执行结果
5.通配符选择器
设置页面所有元素就是一样的 *
<style>
/*将页面所有元素设置为红色*/。
* {
color: red;
}
</style>
扫一扫
6392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
