CSS选取器详解-天涯论坛 - Powered by Discuz! Archiver

4lqedz 发表于 2024-6-30 06:25:19

CSS选取器详解

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

听听海 发表于 2024-8-29 06:43:10

大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。

流星的美 发表于 2024-9-3 16:57:27

你的见解独到，让我受益匪浅，非常感谢。

m5k1umn 发表于 2024-10-22 05:56:17

一看到楼主的气势，我就觉得楼主同在社区里灌水。

j8typz 发表于 2024-11-13 05:14:35

我赞同你的看法，你的智慧让人佩服，谢谢分享。

m5k1umn 发表于 4 天前

回顾历史，我们感慨万千；放眼未来，我们信心百倍。

页: [1]

天涯论坛's Archiver

CSS选取器详解