前端：巧用CSS伪类，提升布局效率( 三 ) _CSS伪类

文章插图

:lang()
通过指定的lang值选择一个元素
:lang() CSS 伪类基于元素语言来匹配页面元素。通过html的lang属性设置
<!DOCTYPE html><html lang="en"> // 当前html为英文<head><style>div:lang(en) { // 语言是英文的时候设置文字颜色为红色color: red;}</style></head><body><div>my name is susu</div><div>我的名字叫苏蘇</div></body></html>

文章插图

文章插图

:not()
用来匹配不符合一组选择器的元素
CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

<!DOCTYPE html><html lang="en"><head><style>* {font-size: 18px;}.main :not(p) {/* 不是p标签的文字颜色都是红色 */color: red;}</style></head><body><div class="main"><div>我是第一个div</div><div>我是第二个div</div><p>我是一个p</p><p>我也是个p</p><p>我不是个p也不行啊，有p包着呢</p></div></body></html>