CSS的各种选择器

1：基本选择器：

/* 标签选择器 */
/* 给标签用的 */
p {
    color: #60ff56;
}


/* 类选择器: 点加类名 */
/* 给所有继承这个类用的 */
.c1 {
    color: #ff6900;
}



/* id选择器 */
/* 针对这个id使用 */
#d1 {
    color: #3e70ff;

}


/*   全局选择器 */
/* 整个页面统一使用 */
* {
    color: #f100ff;
}

 

2：组合选择器：

/*后代选择器*/
/* div span 是找里面所有后代的span */
div span{
    color: red;
}

/* 子代选择器 */
/* div>span 只找自己的子代，子代的子代他不会找 */
div>span{
    color: blue;
}

/* 毗邻选择器 */
/* div+span 紧挨着的下面一个*/
div+span {
    color: yellow;
}

/* 弟弟选择器，*/
/* div~span 同级别的下面所有的标签 */
div~span{
    color: blueviolet;
}

 

3：属性选择器：

/* 三大类：
    1：具有某个属性名
    2：具有某个属性名及属性值
    3：具有某个属性名及属性值某个标签
    */
/*属性选择器用[]*/
/*找只要有hobby这个属性名的所有标签*/
[hobby]{
    background-color: red;
}

/* 找属性名是hobby 而且值是jdb的*/
[hobby='jdb']{
    background-color: mediumvioletred;
}

/* 找input标签,而且属性值是jdb的*/
input[hobby='jdb']{
    background-color: blueviolet;
}

 

4：分组与嵌套：

p{
    color: mediumvioletred;
}
div{
    color: mediumvioletred;
}
span{
    color: mediumvioletred;
}

/* 可以简写为下面的方式 */

/*分组*/
div,
span,
p {
    color: mediumvioletred;
}

/*嵌套,多个不同的选择器可以组合使用,用逗号隔开*/
#d1,
.c1,
span {
    color: blueviolet;
}

 

5: 伪类选择器：

/*链接态*/
a:link{
    color: pink;
}

/*悬浮态*/
a:hover{
    color: blue;
}

/*鼠标点击态*/
a:active{
    color: aqua;
}


/*访问后*/
/* 这个会影响到悬浮态和点击态，*/
a:visited{
    color: black;
}

/*  input  */
/*input 被点击的状态 被称为获取焦点状态*/
input:focus{
    background-color: orange;
}

/*悬浮*/
input:hover{
    background-color: red;
}

 

6：伪元素选择器：

/* 用于修改第一个字 */
p:first-letter{
    font-size: 48px;
    color: aqua;
}

/* 加在头部*/
p:before{
    /*这个添加的文字是不能选择的,但是这个文字是确实存在的*/
    content: '^';
    color: blueviolet;
}

/*after 在解决浮动的问题上比较有用,但是这个文字是确实存在的*/
p:after{
    /*这个添加的文字是不能选择的*/
    content: '?';
    color: orange;
}

 

7：选择器的优先级

　1：选择器相同的情况下：

　　　　先看那个css后导入，就用哪个，（就近原则）

　2：选择器不同的情况下：

　　　　行内 > id > class > 标签 > 全局

其中，class同级别的话，会用就近原则（最后定义的类，而不是放在最后的类）

 在特殊情况下。可以用!important 让样式强制生效