什么是选取器
每一条css样式声明由两部分构成：
选取器{
样式;
} 选取器”指明了{}中的“样式”的功效对象，亦便是“样式”功效于网页中的那些元素有哪几种选取器
标签选取器
标签选取器其实便是html代码中的标签：
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的功效：为p标签设置12px字号，行间距设置1.6em的样式。em并不等于固定的px，1em暗示父级元素的字体体积。各浏览器默认状况下1em=16px。
类选取器
经过 .类名{}设置元素样式：
<head>
<meta charset="UTF-8">
<title>css选取器</title>
<style type="text/css">
.dv{
color: black;
}
</style>
</head>
<body>
<div class="dv">
我是一个div
</div>
</body>
1、英文圆点开头 2、其中类选器名叫作能够任意起名（但不要起中文）ID选取器
经过 #ID名{}设置元素样式：
<head>
<meta charset="UTF-8">
<title>css选取器</title>
<style type="text/css">
#dv{
color: black;
}
</style>
</head>
<body>
<div id="dv">
我是一个div
</div>
</body>
1、运用ID选取器，必要给标签添加上id属性，为标签设置id="ID名叫作"，而不是class="类名叫作"
2、ID选取符的前面是井号（#）号，而不是英文圆点（.） 3、id属性的值既为当前标签的id，尽可能见名思意，语义化类和ID选取器的区别 ID选取器只能在文档中运用一次，而类选取器能够运用多次。咱们能够为一个元素同期设多个样式，但只能够用类选取器的办法实现，ID选取器是不能够的（不可运用 ID 词列表）。<style type="text/css">
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
</style>
</head>
<body>
<p class="stress bigsize">运用类选取器样式设置成功</p>
<p id="stressid bigsizeid">运用ID选取器样式设置失败</p>
</body>
子选取器
运用> 语法，用于选取指定标签元素的第1代子元素：
出于性能思虑少用。
<style type="text/css">
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">类名为first下的
<span>标签被设置红色边框样式</span>
这儿不会有特殊样式</p>
</body>
后代选取器
语法为空格，用于选取指定标签元素下的后辈元素：
出于性能思虑少用。
<style type="text/css">
.food li{
border:1px solid red;
}
</style>
</head>
<body>
<ul class="food">
<li>川菜
<ul>
<li>水煮肉片</li>
<li>夫妇肺片</li>
</ul>
</li>
<li>新疆菜
<ul>
<li>大盘鸡</li>
<li>烤全羊</li>
</ul>
</li>
</ul>
</body>
通用选取器
通用选取器是功能最强大的选取器，它运用一个*号指定，功效是匹配html中所有标签元素，下面代码将html中任意标签元素字体颜色所有设置为红色：
不意见运用。
* {color:red;}
伪类选取器
伪类选取符准许经过:hover给html不存在的标签（标签的某种状态）设置样式，例如说咱们给html中一个标签元素的鼠标悬浮的状态来设置字体颜色：
a:hover{color:red;}
以上css代码暗示a 标签中元素鼠标滑过的状态为字体颜色变红。
不要被
| 
发表于 2024-6-30 06:29:00
