|
选取器的种类有非常多，能够到 w3cschool 去瞧瞧认识一下。亦能够在 慕课网 中实践一下。
1、上下文选取器
标签选取器
<style>
h1 {font-size: 16px;}
p {color:red;}
</style>
代码中的h1和p便是选取器，她们是选取器里面最常用的一种，叫做标签选取器。咱们能够直接经过标签元素来指定必须添加样式的位置。
倘若咱们必须为多个标签添加同一种样式时，咱们能够把它们组合在一块，每一个标签选取器用“,”隔开，如下：
<style>
h1,h2,h3 {
font-weight: bold;
color: blue;
}
</style>
这般的组合咱们叫它分组选取器。
后代组合选取器
当咱们想为下面的article和aside的段落文本分别设置区别的字号时，咱们就能够用到后代选取器了，它们是在祖先元素和后代元素之间加了一个空格，如代码所示：
<style>
article p {
font-size: 12px;
}
aside p {
font-size: 14px;
}
</style>
后代选取器有一个问题便是，祖先元素选取的后代元素都会带有样式，然则咱们有时候并不必须所有的标签都带有样式，这个时候咱们就要用到其他的选取器了。
子选取器
咱们能够用DOM中的父子元素关系来选取，亦便是子选取器，两个元素中间用“>”来连接，如代码所示：
<style>
article>p {
font-size: 12px;
}
</style>
同胞选取器
咱们亦能够经过同胞关系来选取，叫做同胞选取器或是兄弟选取器，这就寓意着选取器的标签元素必须拥有同一个父元素，它们之间用“+”来连接，例子：
<style>
h2+p {
font-size: 12px;
}
</style>
并且必须重视的是：p标签必要是紧跟在h2标签的后面。
通常同胞选取器
通常同胞选取器中间用“~”连接。
<style>
h2~p {
font-size: 12px;
}
</style>
通常同胞选取器和同胞选取器的区别便是，p标签不必定是紧跟在h2标签的后面。
通用选取器
通用选取器是运用通配符“ * ”，它能够匹配任何元素。例如：
*｛
color: green;
｝
它会引起所有文本和边框都变成绿色。这儿有个小知识：
color属性设定的是前景色。前景色既影响文本亦影响边框，但一般咱们只用它设定文本颜色。
咱们亦能够这般运用通用选取器：
p* {
color: green;
}
这般只会把p包括的所有元素的文本变成红色。 通用选取器还有一个有意思的用法，便是能够用它形成一个非子选取器，例如：
section*a {
font-size: 1.3em;
}
代码所暗示的是，所有section的孙子元素，而非子元素的a标签都会被选中。这个从规律上来讲亦好理解，左边的section表率通配符的父元素，右边的a表率通配符的子元素，而*便是所有中间元素的集合。
以上便是经过DOM的层次结构的“上下文”关系来暗示的选取器。
2、id和类选取器
id和类选取器是咱们在CSS中常用的选取器，它们能够更精确的定位到咱们要添加样式的标签位置。只要在HTML标记中为元素添加id和class属性，就能够经过id和类选取器直接选取。
能够给id和class属性设定任何值，但不可以数字或特殊符号开头。
类选取器
body标签包括的任何HTML元素都能够添加class属性，如：
<h1 class="specialtext">这是一个H1标签</h1>
<p>这是一个段落。</p>
<p class="specialtext featured">这是另一个段落</p>
1、类选取器
而后咱们就能够用类选取器添加样式了，类选取器前面要加一个“ . ” ，后面跟着类名，如下：
<style>
p {
font
| 
发表于 2024-6-30 06:25:19
楼主