【CSS】常见的选择器
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>hellodiv>
<div>worlddiv>
效果
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">biubiubiuspan> <br/>
<span id="test2">bangbangspan>
效果：
3.类选择器
语法
.classname {
}
作用
为某一类元素设置样式
比如
为class="firstclass"的元素设置样式。
.firstclass {
}
例子
<style>
.type1 {
background-color:rgb(251, 114, 153);
font-size: 100px;
color: white;
}
style>
<div class="type1">2022div>
<br/>
<div class="type1">2023div>
效果：
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">
效果
全部伪类：
