需求解决 _针对特定Class设置样式 _CSS _20210906

需求解决 _针对特定Class设置样式 _CSS _20210906

有一个需求，需要对一些具有 某个Class的标签 ，icon，以及其中的字体设置 隐藏或者展示

解决方法如下：（需要对 该页面引用的CSS样式表进行操作或者在页面编写CSS）

.test > font { /* 可以对字体进行操作 写法如下 其中的 样式可以根据 需要 进行 添加 */
   color : #C0C0C0;
    display: none;
}

.test > i { /* icon 的操作 方法 是 和 font 一致的 都是使用 ">" 表示 这个元素 属于 该class 的节点下 */
   color : white;
    display: none;
}
/* 与 icon 和 font 这样的 下级元素不太 对于 包含特定 Class 的 span 从属关系 就不一样了 可以 这样操作 */ 
span.test { // 对应
  display: none;
}

以上做法的好处就是 简洁 ，不需要 区分是 哪一个 span ，只要改 span 包含 特定Class 就可以改变 其样式

思路来源 W3CShnool(https://www.w3school.com.cn/css/css_selectors.asp)

实例

在这个例子中，只有具有 class="center" 的

元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}