需求解决 _针对特定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;
}