1.标签选择器

语法

标签 {
}

作用

标签选择器用于选择某种标签

比如

选择p标签，并设置背景颜色

p { 
	background-color:yellow;
}

例子

选择div标签，并将其字体大小设置为100px，字体设置为"微软雅黑"，文字颜色设置为rgb(251, 114, 153)

<style>
     div {
         font-size: 100px;
         font-family:"微软雅黑";
         color: rgb(251, 114, 153);
     }
</style>

<div>hello</div>
<div>world</div>

效果

2.id选择器

语法

#id {
}

作用

为指定id的元素设置样式

比如

为 id="firstid" 的元素设置样式

#firstid { 
	background-color:yellow;
}

例子：

针对id="test1"和id="test2"的两个元素各自设置样式。

<style>
     #test1 {
            font-size: 100px;
            color:cadetblue;
        }
     #test2 {
         font-size: 50px;
         color:rgb(251, 114, 153);
     }
</style>

<span id="test1">biubiubiu</span> <br/>
<span id="test2">bangbang</span>

效果：

3.类选择器

语法

.classname {

}

作用

为某一类元素设置样式

比如

为class="firstclass"的元素设置样式。

.firstclass {
}

例子

<style>
	.type1 {
	           background-color:rgb(251, 114, 153);
	           font-size: 100px;
	           color: white;
	       }
</style>

<div class="type1">2022</div>
<br/>
<div class="type1">2023</div>

效果：

4.通配符选择器

语法

* {
	
}

作用

选择所有的标签

例子

为所有标签设置文字颜色

<style>
        * {
            color :rgb(251, 114, 153);
        }
</style>

 <div>
     abc
 </div>
 <span>
     def
 </span>

 <p>
     ghijklmn
 </p>

效果：

5.后代选择器

语法

元素1 元素2 元素3 ........{

}

后代选择器可以一直嵌套。

作用

选择父元素中的子元素

比如

div span {
}

.class1 span {
}

#output_div span {
}

例子

1.选择标签中的子标签

<style>
	div span {
	    font-size: 50px;
	    color: rgb(186, 134, 36);
	}
</style>

<div>
	  <span>
	       今天是星期3
	   </span>
</div>

<div>
	   <span>
	       明天是星期4
	   </span>
</div>

效果：

2.选择类中的子标签

<style>
	.class1 span {
		  font-size: 30px;
		  color: rgb(26, 191, 220);
	}
</style>

<div class="class1">
   <span>
        周一周一，眼睛咪咪
    </span>
    <br/>
    <span>
        周二周二，肚子很二
    </span>
</div>

效果：

3.选择一个元素中的子标签

<style>
	#hello_div span{
        background-color: rgb(16, 232, 142);
        font-size: 30px;
        color: white;
    }
</style>

<div id="hello_div">
    <span>
        hello
    </span>
    <span>
        world
    </span>
</div>

效果：

注意：
后代选择器可以有很多组合，可以一直嵌套，上面举的例子只是套了两层。

可以像下面这样一直嵌套:

div span ol li {

}

6.子选择器

语法

元素1>元素2 {

}

作用

选择儿子标签，不能选择孙子标签

比如

选择div标签中的儿子a标签

div>a {
}

例子

把 “小猫” 改成红色

<style>
        .animal>a {
            color : red;
        }
</style>

<div class="animal">
    <a href="#">小猫</a>
    <ul>
        <li><a href="#">小狗</a></li>
        <li><a href="#">小狗</a></li>
    </ul>
</div>

效果

7.并集选择器

语法

元素1,元素2 {

}

作用

用于选择多组标签. (集体声明)

比如

选择div 和 span，把文字颜色改为蓝色

div, span {
	color:blue;
}

例子

现有以下代码：

<div>苹果</div>
<h3>香蕉</h3>
<ul>
    <li>鸭梨</li>
    <li>橙子</li>
</ul>

1.将苹果和香蕉设置为粉色

div, h3 {
    color:pink;
}

效果

2.将苹果鸭梨和橙子设置为蓝色

div, ul>li {
    color:blue;
}

效果

8.伪类选择器

伪类(pseudo-class)用于定义元素的特殊状态。

语法

selector:pseudo-class {
  property: value;
}

作用

可以为元素处于某种状态时设置样式

比如

设置鼠标悬停在链接时的效果

a : hover {

}

例子

1.当鼠标悬停在链接上时，设置为绿色

<style>
        a:hover {
            color: green;
        }
</style>
	
<a href="https://www.baidu.com">百度</a>

效果

2.设置输入文本框在被选中时的样式

<style>
        input:focus{
            color: pink;
            background-color: black;
        }
</style>
	
<input type="text">

效果

全部伪类：