阅读 567

(Ⅱ)类选择器、通配选择器、属性选择器 | CSS 基础与选择器初识

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码


🔗紧接上篇文章

4.3 类选择器

🔗源码及效果展示

“类”: 可直接理解为一个足球俱乐部,在这个俱乐部(类)里,所有成员(元素)都必须遵循统一的规范——如出席商业活动时都必须着同样的装束。

创建一个“类”分两步:

  • 为 HTML 元素增加一个 class 属性,这样就可以将这个元素加到这个“类”中。

❗️注意:一个元素可以加入多个类,即一个人可以加入多个俱乐部,写法上各个“类名”用“空格”隔开。

<ul>
  <li class="first">fine</li>
  <li class="second">thank you</li>
  <li class="third done">and you</li>
</ul>
复制代码
  • 在 CSS 中选择这个“类”(❗️注意:格式为在 class 类名前面用一个 . 字符)。
.first {
  font-weight: bold;
}
.done {
  text-decoration: line-through;
}
复制代码

🏆小总结: 想要对多个元素使用某个样式时,就把这些元素都加入到这个“类”里,就会用到 class;但如果只有一个元素需要加这个样式,那就用 id。

4.4 通配选择器

这个选择器可以与任何元素匹配,就像一个“通配符”。如:

* {
  color: yellow;
}
复制代码

这个“规则”可以让文档中所有元素的 color 值都指定为 yellow。

4.5 属性选择器

“属性选择器”根据元素的属性和属性值来匹配元素,“属性”英文单词为:attribute。

4.5.1 [attr]

🔗源码及效果展示

即直接用 [] 符号将元素的属性名框起来,用于根据元素属性来选择元素:

li[class] {
  color: red;
  background: yellow;
}
复制代码

选择有 class 属性(值不限)的所有 li 元素,使其文本为 red,背景色为 yellow 。

4.5.2 [attr=val]

🔗源码及效果展示

即直接用 [] 符号将“属性”和与之对应的“属性值”框起来,用于根据具体属性及其值来选择元素:

li[class="second"] {
  color: red;
  background: yellow;
}
复制代码

选择有 class 属性值为 second的所有 li 元素,使其文本为 red,背景色为 yellow。

❗️注意:这种选择格式要求必须与“属性值”完全匹配,不多不少,不能有任何形式的简写。

例:选择有 class 属性值为 third done 的所有 li 元素,使其文本为 red,背景色为 yellow。

li[class="third done"] {
  color: red;
  background: yellow;
}
复制代码

✘不能简写为:

li[class="third"] {
  color: red;
  background: yellow;
}
复制代码

4.5.3 [attr~=val]

🔗源码及效果链接

即直接用 [] 符号将“属性”、符号 ~ 和与之要加样式的“属性值”框起来,用于“根据部分属性值”来选择元素:

li[class~="done"] {
  color: red;
  background: yellow;
}
复制代码

选择有 class 属性值包含 done 的所有 li 元素,使其文本为 red,背景色为 yellow。

4.5.4 ^ $ *

1. ^

🔗源码及效果展示

li[class^="se"] {
  color: red;
  background: yellow;
}
复制代码

选择 class 整个属性值以 se 开头的所有 li 元素,使其文本为 red,背景色为 yellow。

2. $

🔗源码及效果展示

li[class$="ne"] {
  color: red;
  background: yellow;
}
复制代码

选择 class 整个属性值以 ne 结尾的所有 li 元素,使其文本为 red,背景色为 yellow。

3. *

🔗源码及效果展示

li[class*="ir"] {
  color: red;
  background: yellow;
}
复制代码

选择 class 属性值中包含字串 ir 的所有 li 元素,使其文本为 red,背景色为 yellow。

💡助记:
^ 是笑脸(^^)的左边开始,所以记忆为属性值以某字符开头;
$ 美元符号很像一个摇摆的尾巴,所以可记忆为属性值以某字符结尾;
* 星号犹如星星,都是一串一串的,所以可记忆为属性值中包含某字符串。

4.5.5 语言值匹配

🔗源码及效果展示

<!DOCTYPE html>
<html lang="zh">                        
<head>                                   
  <meta charset="utf-8">                    
  <title>表示“谢谢”的语言</title>            
</head>                                 
<body>                                  
  <h1>表示“谢谢”的语言</h1>              
  <dl>
    <dt>英语</dt> 
    <dd lang="en">Thank you.</dd>
    <dt>日语</dt> 
    <dd lang="ja">ありがとう.</dd>
    <dt>法语</dt>
    <dd lang="en">Merci.</dd>
    <dt>澳洲英语</dt>
    <dd lang="en-au">Thank you very much.</dd>
  </dl>        
</body>                                           
</html>
复制代码

当需要对以上代码中:选择 lang 属性等于 en 或者以 en- 开头的所有元素,使其文本为 red,背景色为 yellow。

*[lang|="en"] {
  color: red;
  background: yellow;
}
复制代码

❗️注意:上面这种属性选择器常常用于匹配语言值。



后记: 对于基本的选择器,本篇我们先了解到这,下篇文章我们将对以下选择器及其周边知识作详解——伪类选择器、伪元素选择器、组合选择器。

CSS 知识点多且杂,唯有静下心来、动起手来,用一行行代码逐个击破才不至于浮于表面。

共勉:我荒废了时间,时间便把我荒废了。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论