标签：级别   let   大写   inpu   超链接   伪元素   size   first   input   

/css基础入门/
/css语法结构 选择器{属性名: 属性值；属性名2: 属性值2}/

/css三种引入方式：/
/1.通过标签引入css文件（最正规的写法）/
/2.在中的/
/3.标签内的style属性中直接写css代码/

/查找标签的六种选择器/
/基本选择器，组合选择器，属性选择器，分组与嵌套。伪类选择器，伪元素选择器/

/基本选择器/

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

/类选择器（标签中要有class属性，如class=‘c1’）/
/让所有具有c1类属性值的标签内部文本变成蓝色/
.c1{
color: blue;
}

/id选择器（标签中要有的id属性，如id=‘d1’）/
/将id为d1的标签内部文本内容改为绿色/

d1{

color: green;

}

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

/组合选择器/

/后代选择器(div标签，所有被span包括的内容都会被选择！)/
/div内部的所有的span/
div span{
color: red;

}

/儿子选择器(div>span表示div内部最靠近div那一层的span，其包含的内容都会被选择)/
div > span{
color: red;

}

/相邻选择器（此时选择的是紧靠着

/同级选择器（选择div标签后面，与div并列的同级别的span标签中的内容）/
div ~ span{
color: deeppink;
}

/属性选择器/

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

}

/指定属性名和属性值/
/找到页面上属性名是username并且属性值叫joe的标签/
[username = ‘Joe‘]{
background-color: black;
}

/指定某一类标签中的属性名与属性值/
/找到页面上input标签，且属性名是username，属性值叫joe/
input[username=‘Joe‘]{
background-color: aqua;
}

/分组与嵌套/

/分组与嵌套，就是基本选择器与组合选择器结和起来使用/
div, p, span{
color: green;
}

/找具有c1属性值的标签 后代的h1 后代选择器与类选择器的结合/
.c1 h1{
color: green;
}

/伪类选择器/

/关于标签的伪类选择器，主要关注a:hover鼠标悬浮时的颜色/
/超链接正常显示的颜色/
a:link{
color: aqua;
}

/鼠标悬浮在超链接上显示的颜色/
a：hover{
color: black;
}

/鼠标点击一瞬间未松开时的颜色/
a:active{
color: green;
}

/访问过该超链接之后的颜色/
a:visited{
color: gray;
}

/标签的伪类选择器/
/聚焦focus到input框时的背景颜色/
input:focus{
background-color: red;
}

/伪元素选择器/
/p标签内的首字母大写/
p:first-letter{
color: red;
font-size: 48px;
}

/在p标签之前加上content里的内容/
p:before{
content: ‘你好啊‘;
color: red;
}

/在p标签之后加上content里的内容/
p:after{
content: ‘?‘;
color: blue;
}

css基础1

标签：级别   let   大写   inpu   超链接   伪元素   size   first   input   

原文地址：https://www.cnblogs.com/godlover/p/12128565.html