CSS基础选择器（微重点）总结

基础选择器（标签，类，id，通配符选择器）

语法：标签 { 样式代码块}；

<style>
	XX选择器 { 
		样式代码块
	 }
</style>

标签选择器

eg： p div span a 等等都是标签

p { 
	color: pink;    //把p段落标签设置为粉红色； 
}

---

类选择器

类基础选择器：

<style>
        .guo {
            color: pink;
        }
</style>

<p class="guo"> 果果</p>   // 此时果果就变成了粉红色

类选择器的复合：

<style>
        .color {      
            color: pink;
        }
        
        .font-size {
            font-size: 2em;
        }
</style>
<p class="guo font-size"> 果果</p>     // 此时果果的样式同时受到了 颜色  和 大小的影响 。同时改变

---

id选择器

特点：id选择器仅仅只能被使用一次，特指，且不能重复使用。常常与JavaScript连用。

语法：

<style>
        #guo {
            color: pink;
        }
</style>
    <p id="guo"> 果果</p>     // 此时的果果颜色可以改变
    <p id="guo"> 果果</p>     //  此时的果果不能改变     原因是：同一个id只能被使用一次，不可复用。

---

通配符选择器

特点：通配符选择器可以设置所有的标签，无一例外，统一设置样式。非常方便。

<style>
        * {
            color: pink;
        }
</style>
                         // 此时body中的p span ul>li的颜色都会变成pink；
<p id="guo"> 戈</p>
<span>戈</span>
<ul>
    <li>戈</li>
</ul>

---

基础选择器（标签，类，id，通配符）总结

• 标签选择器：可以同时设置同类标签的样式。
• 类选择器：可以同时设置具有这个类的标签的样式。
• id选择器：设置样式以后只能被调用一次，不能复用；如果有其他选择器也调用了这个id，只显示代码最前面的那个标签样式，后面的一律不显示。
• 通配符选择器：同时控制所有的元素标签，同时设置样式。