css层叠样式

css：层叠样式表

用来调节标签的样式

/*注释*/

css三种引入方式

基本选择器

标签选择器/元素选择器

div {  /*将页面上所有的div标签内部的文本变成红色*/    color: red;}

ID选择器 (#)

#d1 {  /*将id为d1的标签内部文本内容改成绿色*/    color: green;}

类选择器 （.）

.c1 {  /*让所有具有c1类属性值的标签内部文本变成蓝色*/    color:blue;}

样式类名不要用数字开头

通用选择器（*）

* {  /*页面上所有的标签统一修改样式*/    color: aqua;}

组合选择器

后代选择器（标签 空格 标签）

div span {  /*空格表示div内部的span没有层级限制*/    color: red;}

样式只改变后代标签，并不改变父类本身

儿子选择器（>)只影响儿子，其他后代不影响

div > span {  /*>表示div内部的儿子*/    color: green;}

毗邻选择器，只影响div 后边同一级别的（第一个）span标签

div + span {  /*紧挨着的下一个标签*/    color: red;}

弟弟选择器 ，div同级别下（所有）span标签

div ~ span {  /*同级别下面所有的标签*/    color: deeppink;}

属性选择器

[username] {  /*找到页面上所有具有username属性名的标签*/    background-color: deeppink;}

[username='jason'] {  /*找到页面上属性名是username并且属性值叫jason的标签*/    background-color: black;}

input[username="jason"] {  /*找到页面上属性名是username并且属性值叫jason的input标签*/    background-color: aqua;}

分组与嵌套

分组

div ,p, span { color: green;}

具有相同样式的标签，其内部的后代标签同样拥有同样的样式

嵌套

.c1 h1{ /*找具有c1属性值的标签 后代的h1*/    color: green;}

伪类选择器

        a:link {/*点击前的颜色*/
            color: aqua;
        }

        a:hover {  /*鼠标悬浮*/
            color: black;
        }
        a:active {/*鼠标点击，未松手*/
            color: green;
        }
        a:visited {/*点击后，只要浏览器有点击记录*/
            color: gray;
        }
        input:focus {/*输入框点击后*/
            background-color: red;
        }

伪元素选择器

第一个字改变样式

p:first-letter {    color: red;    font-size: 48px;}

段首添加content文本内容，并改其样式，但不写入界面

p:before {    content: '你好啊';    color: red;}

段尾添加content文本内容，并改其样式，但不写入界面

p:after {    content: '?';    color: blue;}