css-选择器有必要研究么-class一把梭?-CSDN博客

本文链接：https://blog.csdn.net/YogaMiller/article/details/126326946

选择器有啥, 为啥选择器人家可以写一本书?

tips

:not()的权重是 0 但是里面的会计算权重.
类和空格(后代选择)的范围是最广的 > 子选择符能不用就不用** 因为层级关系被强制绑定了, 不利于维护
.item + .item 会选中除第一的元素, 比:not(:first-child) 也好更好!!!

01. 概述 ~ 是兄弟 + 是相邻兄弟

css选择器分四类: 选择器, 选择符(空格 > + ~ || ) 伪类:hover 伪元素::before ::after
作用域
标签不区分大小写, DIV P 也能选中类名区分
命名空间 (@namespace了解即可)
.box,.example:focus-within 后面的这个选择器不识别导致这一行不识别. --webkit- 无效伪类特性, 可用来区分浏览器

let div = document.querySelector('div')
let shadow = div.attachShadow({ mode: 'open' })
shadow.innerHTML = '<p class="aa-Bb">shadow</p>'
shadow.innerHTML += '<style>p{ background-color: red;}</style>'
这个p标签样式不影响页面其他的p

02. 选择器优先级

选择器	权重
* + ~ > \|\| 空格 :not() :is() :where()	0
标签	1
类伪类属性	10
id	100
行内	1000
!important	不要滥用, 通常用来覆盖 js 的样式

11个类能超过id 吗??

.foo[style*="color: #ccc"]{
	color: #fff !important;
}
:not([dir])
html[lang]
.box.box重复自身, 是提升优先级的小技巧...或者加属性.foo[class] #foo[id]

03. 命名 .a-b

众所周知, 编程最难的就是命名…

html 标签和属性名不区分大小写, 但是属性值是区分的, 但是可以忽略
短点, 因为css没那么关注语义, 只是关注有没有用到
.qc-header 避免 .box .title
全局设置 box-sizing是毁灭性的.
不要使用ID选择器, 重置困难…和js 耦合…也不要用标签选择器 .x>div这种是最垃圾的,性能差, 难维护.
放弃嵌套写法???
.active 本身不写样式…x.acitive .active>.x{}

[class='BOX' i] {
	background-color: red;
}
能以数字命名开头, 但是需要\31 unicode值...
甚至能以其他符号开头, .\+box 甚至中文
.--  .-a-b  这两个也合法
dn df dg fl fr tl tr tc tj  面向属性命名
.db{
	display: block;
}
.tc{
	text-align: center;
}
.ml20{
	margin-left: 20px;
}
.vt{
	vetical-align: top;
}
.g-db .-db
借鉴标签名 .zml-md-header/body/aside/main/nav/section/content/summary/detail/option/img/footer/li/a
cs-module-g // 组
desc // 描述
.x 表示box
借鉴属性值: readio checkbox range 
无障碍访问的role 属性

变量
:root{}
重置
通用结构
.zml-header/main/footer
模块
业务
样式库(简写)

04. CSS 选择符

继承有就近原则
权重相同的时候, 后来居上
:not() 的权重是 0
~ 随后兄弟
怎么选择前面的? 可以在视觉上处理比如 flex的 flex-direction: row-reverse. 或者 direction: rtl; 浮动或者定位就算了.
了解列选择符 | |

document.querySelectorAll('#myId div div') 和下面的是有区别的, css选择器是独立于整个页面的
document.querySelector('#myId').querySelectorAll('div div')
querySelector('.box').querySelectorAll(':scope div div')可以
:focus + .cs-tips { visibility: visible };
 text-decoration: underline;  underline wavy 会重叠, 也就是既有下划线, 又有波浪线.

05.元素选择器

具体分两类: 标签(又叫类型选择器, 所以first-of-type底层是找同类) 和通配符 div *
元素选择器是唯一不能重复自身的选择器
写级联的时候元素选择器必须写前面, div[c=b2] 其他的选择器则可以不这样 [c=b2].b *[attr=attrVal] *可以省略

提高优先级的安全的方法!!!!!
1. 重复自身
2. 借助 body/html
3. 借助 :not() div:not(非div标签)

div.box.box{}
#app#app{}
[foo][foo]{} 
[attr=attrVal]  // 属性值匹配选择器
svg | a{} ??

06. 属性选择器

[attr~="val"]   'val bb' 可以  'value bb' 不可以
data-v-xx自定义属性.
[attr|="val"] 匹配 "val" "val-a" "val-a b" 不匹配 "value" "val a" "b val-a"
[class|=cs-buton] 写公共样式
.css-button-primary{}
[am-align] AMCSS  attribute modules for css

正则 ^  匹配链接地址 $ 匹配文件类型 
 *  
[style*="display: none" i]{} i 忽略大小写
`[data-search]:not([data-search*=]){display:none}`
const s = document.createElement('style')
document.head.appendChild(s)
s.innerHTML = ''

在这里插入图片描述

.box[type=radio]{}
[type=radio].box{} // 比上面的性能好,因为css解析器是从右像左进行的.
:hover.foo{}
.foo:hover{} 
input[type=radio]{} 直接省略input反而更好. 还有[href^=http] [alt]
div#app 这个div也很多余.
自定义元素选择器是IE9及以上支持的.

:nth-of-type 结构伪类选择器?

在这里插入图片描述

通配符选择器

1. 通配符选择器选择不到伪元素
*,::after,::before {
box-sizing: border-box;
}
body>*{}

min max / height width

https://demo.cssworld.cn/3/3-2.php
上面这个是一个展开收起的demo, max-height设置过渡, 因为height: auto的话没有过渡的效果

其实如果写height: 100px;(一个具体的值，是有效果的）但是高度要适应内容，所以就设置max-height
把max-height设置得足够大，就没问题。但是发现，设置得比较大的时候，动画有卡顿，以为是书中没提到的，结果后面就写了，要使用足够安全的最小值。（1000 => 0 如果元素实际高 100px 能看到的变化的是最后的十分之一时间，所有就有卡顿的感觉）