css选择器总结

熟练使用css，可以简单明了得完成一些比较复杂的问题。但是css的内容很多很杂，这里只是总结工作中遇到的一些不常用的，一些简单常用的css，就不多啰嗦了。

1. css 实现 disabled

input[type=text]框可以直接使用属性disabled来实现，但是一些自定义 div[contenteditable=true]输入框要实现disabled，就要使用css来处理了。

...
<div :contenteditable='true' class='div-input-box' :class="{'div-disabled':disabled}"></div>
...
.div-input-box {
    background-color:#fff;
    color:#000;
    cursor:text;
    border:1px solid #bdbdbd;
    &.div-disabled {
        cursor:default; // 把光标变成箭头
        pointer-events:none; // 让输入框失去点击事件，失焦和聚焦的能力
        background-color:#eee;
        color:#ccc;
    }
}

2. 组合选择器

2.1 后端选择器 div span

空格隔开即可,span可能是div子级也可能是div子级的子级

2.2 直接子级 div > span

span只能是div子级

2.3 一般兄弟组合器 div span.title ~ span.content

寻找同一个父级div下的 class为title的span后面的同级的所有的class为content的span，然后为其添加样式。

2.4 紧邻兄弟选择器 div span.title + span.content

寻找同一个父级div下的 class为title的span后面的同级的紧跟着的class为content的span，然后为其添加样式。

3. 伪类选择器

伪类选择器，其实就是用来描述自身的特殊状态的选择器，本质还是根据自己的状态给自己添加,处于这个状态下的样式。

3.1 button:hover 鼠标悬停在按钮时上触发的按钮样式

3.2 div:empty div在没有子元素的状态时触发的样式

3.3 :is() 可以添加一些伪类或者元素标签名等(不等添加伪元素:before等)，获取那个标签本身。

• 给不同层级下的h1添加样式

ol li h1,
ul li h1,
ul li ol li h1 {
    font-size:14px;
}
:is(ol,ul) :is(li) h1,
:is(ul) :is(li) :is(ol) :is(li) h1{
    font-size:14px;
}

3.4 :not() 可以添加类名或者标签名等。

我们经常使用，交集选择器表示，一个dom在某个状态下才展示的样式，而这个相反，表示一个dom不在某个状态下，展示的样式。

div :not(div):not(span) {
    font-weight: blod;
} // 给div后代中所有非div和span的标签的字体加粗
div:not(.disabled){
    background-color:#fff;
} // 当div没有class为disabled的时候，背景颜色为白色。

3.5 :has() 给定的选择器参数，只要这个dom能匹配住给定相应参数锚定的dom时，就给本dom设置样式

h1:has(+ p) {
    margin-bottom:10px;
} //h1如果紧跟了一个p的兄弟节点，就设置这个h1有10个下外边距

正是因为有这个伪类选择器的特性，就可以模拟一下本来没有的父级选择器。

div:has( .title.disabled) {
    background-color:#eee
} //如果div的子级title为disabled，就设置这个div的背景色为#eee

3.5 :active 激活状态 主要用在button和a

3.6 :focus 输入框聚焦

3.7 :first-child 子级中的第一个

4. 伪元素选择器

伪元素就不是描述自己的样式了，而是描述dom自带的一些固有元素的样式，::before和::after是最常用的伪元素，会生成成为这个dom子级中的第一个和最后一个元素，元素内容为content中的内容，一般用来表示一些固定的字体，下拉框按钮图标等等。