CSS

CSS选择器

基本选择器

# id选择器
​
# 类选择器
​
# 元素/标签选择器
​
# 通用选择器
<style>
        /*id选择器*/
        /*#d1 {  !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
        /*    color: greenyellow;*/
        /*}*/
        /*类选择器*/
        /*.c1 {  !*找到class值里面包含c1的标签*!*/
        /*    color: red;*/
        /*}*/
        /*元素(标签)选择器*/
        /*span {  !*找到所有的span标签*!*/
        /*    color: red;*/
        /*}*/
        /*通用选择器*/
        /** {  !*将html页面上所有的标签全部找到*!*/
        /*    color: green;*/
        /*}*/
</style>

组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
       <p>div p</p>
       <p>div p
           <span>div p span</span>
       </p>
       <span>span</span>
       <span>span</span>
  </div>
  div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
...
"""
​
# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器
​
            /*后代选择器*/
        /*div span {*/
        /*    color: red;*/
        /*}*/
​
        /*儿子选择器*/
        /*div>span {*/
        /*    color: red;*/
        /*}*/
​
        /*毗邻选择器*/
        /*div+span {  !*同级别紧挨着的下面的第一个*!*/
        /*    color: aqua;*/
        /*}*/
​
        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
       }

属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
​
/*[username] {  !*将所有含有属性名是username的标签背景色改为红色*!*/
        /*    background-color: red;*/
        /*}*/
​
        /*[username='jason'] {  !*找到所有属性名是username并且属性值是jason的标签*!*/
        /*    background-color: orange;*/
        /*}*/
​
        /*input[username='jason'] {  !*找到所有属性名是username并且属性值是jason的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/