css选择器总结

1. 标签选择器："，"

    标签选择器可以直接作用于多个标签，中间用逗号隔开进行分组，标签选择器可以选中所有的标签元素，选中的是所有而不是某一个。

<div class="lable">
    <h1 class="lable-one">我是标签选择器的应用</h1>
    <p class="lable-two">我是标签选择器的应用</p>
    <p>标签选择器可以直接作用于多个标签（中间以逗号隔开进行选择器分组），标签选择器可以选中所有的标签元素，选中的是所有而不是某一个</p>
</div>

.lable{
    width: 500px;
    height: 135px;
    background:blue;
}
.lable-one,.lable-two{
    color: white;
}

2. ID选择器：#

同一个页面的ID不能重复，任何标签都可以设置ID，ID 命名规范要以字母，可以有数字，下划线，大小写严格区分。

<div id="tatle">
    <p>这是id选择器的应用</p>
    <p>同一个页面中的id不能重复，任何标签都可以设置id,id命名规范要以字母，可以有数字，下划线大小写严格要区分</p>
</div>

#tatle{
    margin-top: 10px;
    width: 500px;
    height: 100px;
    background: #ff5e46;
    color: white;
}

3.类选择器：  .class{}

有效使用类选择器能够减少一些冗余性的代码，不要试图去用一个类将页面写完一个标签要携带多个类，共同设置样式，每个类要尽量的小，要有公共概念。

4.后代选择器： 空格   .father p{}

使用后代选择器，限定了选择区间，那个Div下的那个标签，限定了独立的逻辑区，布局规范上来说元素嵌套一般不要超过八层为好，最大嵌套层数为256层，超出的话选择器失效。

5 子代选择器：>  .bigBox>.smallbox

如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子选择器。

6 通用选择器：*

通用选择器是功能最强的选择器，它用一个号表示，表示选中所有的HTML标签

7 组合选择器 ： one two three

在要对很多元素做相同的操作的情况下，我们可以选择组合选择器，一般在页面布局的时候会使用组合选择器

<div class="first">
    <div id="second">
        <div class="three">
            组合选择器的应用
            <p>在要对很多元素做相同的操作的情况下,我们可以选择组合选择器,一般在页面布局的时候会使用组合选择器</p>
        </div>
    </div>
</div>


.first{
    width: 500px;
    height: 400px;
    background-color: slategrey;
    margin-top: 20px;
}
#second{
    width: 400px;
    height: 300px;
    background-color: #1afa29;
}
.three{
    width: 300px;
    height: 200px;
    background-color: #5bc0de;
}
.first,#second,.three{
    border: solid 2px salmon;
}

8 交集选择器：

注意点：

        1. 选择器与选择器之间没有任何连接符号格式

        2. 格式：选择器1 选择器2{ 属性：值 }

9 相邻兄弟选择器：“+”

紧接在另一个元素后，二者有相同父元素

<div class="box" >
    我是爸爸
    <div class="child-box1">
        我是大哥
    </div>
    <div class="child-box2">
        我是二弟
    </div>
    <div class="child-box2">
        我是二弟
    </div>
    <div id="child-box3">
        我是三弟
    </div>
    <p>我是打酱油的</p>
    <p>
        紧接在另一元素后,二者有相同父元素
    </p>
</div>

.box{
    margin-top: 20px;
    width: 500px;
    /*height: 600px;*/
    font-size: 20px;
    background: cyan ;
}
.child-box1+.child-box2{
    font-size: 40px;
    color: #671fff;
    text-align: center ;
}
#child-box3+p{
    font-size: 60px;
    color: brown;
    text-align: right ;
}
————————————————

10 通用兄弟选择器：~

两个元素之间有别的元素，二者有相同父元素

<div class="big_box">
    <div class="child_box1">大哥</div>
    <div class="child_box2">二哥</div>
    <div class="child_box3">三哥</div>
    <div class="child_box4">四弟</div>
    <p>两个元素之间有别的元素,二者有相同父元素</p>
</div>
————————————————
.big_box{
    background-color: #91a9ae;
    margin-top: 20px;
    width: 500px;
    height: 300px;
    color: white;
}
.child_box1~.child_box3{
    color: #81acfa;
    font-size: 40px;
}
————————————————

11 结构伪类选择器

:first-child()   :last-child()  :nth-child()  :nth-last-child(n)

css选择器_Cherish_喜爱的博客-CSDN博客