前言

今天摸鱼看掘金的时候，看到一篇文章，里面有关系一些关于css基础不扎实的辩论，说一些效果明明可以用css简单实现，却通过js来进行操作，怎么说呢，各有各的优势吧，js的优势是代码逻辑比较清晰，css的作用是操作dom比较少，性能比较好。这个我就不发表观点了，不过我的css底子的确一般般，那今天就抽空稍微补一下CSS选择器的内容

基础选择器(X .X #X)

这个就很简单了，就三个，标签选择器,类选择器,id选择器,这里就不多阐述了，就是id其实是唯一标识，但我有时候觉得我们的开发人员一般id也是乱用的，并没有唯一这个概念。

通配符选择器(*)

这个也比较简单,就是一个*,这个就是匹配所有的标签，比如我们在一个页面加上

*{
    margin:0;
    padding:0;
}

那么这个页面的所有标签都将会没有margin和padding

后代选择器(X Y)

比如我们需要改变li中的a标签的样式,而不是所有的a标签的样式，那么就可以使用这个

1
2
3

li a{
   text-decoration: none;
}

相邻选择器(X+Y)

选中指定元素的直接后继元素,下面这个代码就是选中了所有ul标签后面的第一段，并将它们的颜色都设置为红色。

1
2
3

ul + p {
    color: red;
}

子选择器(X > Y)

1
2
3

#container > ul{
    border:1px solid #333;
}

X Y和X>Y的差别就是，子选择器只会选择它的直接子元素。就比如

<div id="container">
    <ul>
        <li>
            <ul></ul>
        </li>
    </ul>  
</div>

这样的dom结构，使用X>Y只会选择container下的那一层的ul,被li包起来的ul的并不会被选中。

兄弟节点组合选择器(X ~ Y)

1
2
3

ul ~ p{
    color:red;
}

他和X+Y很相似，然而它又不是那么严格。ul+p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

属性选择器(X[title])

1
2
3

a[title]{
    color:red;
}

选择a标签中有title属性的部分，没有title属性的a标签不会被这个css修饰

href选择器

X[href=’http://xxxx']

比如我需要修饰a标签中href为http://baidu.com,那就是

1
2
3

a[href='http://baidu.com']{
    color:red;
}

X[href=’Y’]

又比如我要修饰a标签中href带有baidu的，比如baidu.com,baidu.cn,baidu.gov类似的

1
2
3

a[href="baidu"]{
    color:red;
}

X[href^=”href”]

a[href^="http"]{
    background:url("xxxx.png") no-repeat;
    padding-left:10px;
}

这里我们可以选择http开头的标签

X[href$=”.jpg”]

以jpg结尾的图片选择

选择所有图片(X[data-*=”foo”])

1
2
3

a[data-filetype='image']{
    color:red;
}

data-info定位

我们可以给dom添加一个data-info属性

1
2
3

a[data-info~='image']{
    color:red;
}

伪类选择器

X:checked

1
2
3

input[type=radio]:checked{
    border:1px solid black
}

上面这个伪类的写法可以定位那些被选中的单选框和多选框

X:after

before和after这俩伪类。它们会在被选中的标签周围生成一些内容

X:hover

鼠标滑过这个标签样式变化

1
2
3

div:hover{
    background:red;
}

X:not(selector)

取反，比如我们要取id不是container的所有div

1
2
3

div:not(#container){
    color:blue;
}

X::pseudoElement

1
2
3

p::first-line{
    font-weight:bold;
}

定位p标签中的第一行

1
2
3

p::first-letter{
    font-size:2rem;
}

上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。

X:nth-child(n)

1
2
3

li:nth-child(3){
    color:red;
}

比如ul标签中有n个元素，我想取第三个，就可以使用上面的方式
如果我是想每个3个元素获取一次标签，那么就是

1
2
3

li:nth-child(4n){
    color:red;
}

X:nth-last-child(n)

如果是取最后3个元素，那就是可以使用这个伪类

1
2
3

li:nth-last-child(2){
    color:red;
}

X:nth-of-type(n)

假如我们有5个div，我们只想对第三个进行修饰，那么就可以使用

1
2
3

div:nth-of-type(3){
    color:red;
}

X:nth-last-of-type(n)

当然，这个也有倒序的

X:first-child和X:last-child

1
2
3

ul li:first-child{
    color:red
}

根据first-child和last-child可以获取第一个和最后一个节点

结语

本篇文章就先到这里了，更多内容敬请期待。债见~

blog-of-codesigner(顾炯洋)

recorded growth

前言