一。css的三种css导入：
1.在标签中内部定义（不推荐）。
2.在head中的style总定义样式。
3.使用link链接外部的css文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试css</title> <link rel="stylesheet" href="newcss.css"> <style> p { color: blueviolet; } </style> </head> <body> <p style="color: blue">测试三种选择器</p> </body> </html>
其中的作用优先级是1》2》3。
二。四种基本选择器：
1.标签选择器（仅限这个标签下的格式）
p {
color: blueviolet;
}
指定一个标签，将所有的标签都改为该样式。
2.id选择器
#d1{
color:yellow;
}
将这个id下的格式改为该样式。
3.类选择器
.p1{
color: coral;
}
将定义了该类名的所有类都变成该格式。
4.全局选择器
*{
color:coral;
}
将该页面下的所有格式都改为该格式。
当具有相同的选择器时，以最后一个为准。
不同的选择器优先级由作用域大小排列。选择范围越大，优先级越小。
三。组合选择器。
1.后代选择器。
div p {
color: blueviolet;
}
该div下所有的p的样式都为该样式。
2.儿子选择器。
div>span {
color: aqua;
}
只有div中的span才具有该属性，
3.毗邻选择器。
div+span {
color: orange;
}
在div紧挨着的下一个span的样式。
4.弟弟选择器。
div~span {
color: brown;
}
div下面的所有的span的样式修改。
四，属性选择器
<input type="text" name="username" hobby="jdb"> <input type="text"> <span hobby="jdb">span</span>
1.属性名
[hobby] {
background-color: red;
color: orange;
}
使用属性名指定修改。
2.属性名加值
[hobby="jdb"] {
background-color: pink;
}
使用属性名加值指定修改。
3.标签，属性名加值
input[hobby="jdb"] {
background-color: greenyellow;
}
指定某个标签中具有某个属性和某个值的元素修改。
五。分组和嵌套。
1.分组。可以将一些需要同样的样式修饰的值一起修饰。
div,span, p {
color: pink;
}
2.嵌套 不同的选择器可以组合使用同样的属性。
#d1,.c1,span {
color: orange;
}
六。伪类选择器。
主要是对链接标签<a>使用的选择器。
1.link
link是在a标签连接态时，显示的相册。
a:link {
color: pink;
}
2。鼠标悬浮态
当鼠标悬浮在链接上时，会出现的样式。
a:hover {
color: red;
}
3.鼠标点击态
当鼠标点击下去的时候会出现的样式和状态。
a:active {
color: purple;
}
4.访问态。
当链接被访问后，出现的状态。
a:visited {
color: dimgrey;
}
5.input框被点击时的状态，被称为获取焦点
input:focus {
background-color: orange;
}
6.input悬浮时显示的状态。
input:hover {
background-color: red;
}
七。伪元素选择器。
1.作用与某个标签的头一个字符的样式。
p:first-letter {
font-size: 48px;
color: gold;
}
2。作用与某个元素的开头，而且不能被选择。
p:before {
content: '$';
color: gold;
}
3.作用于某个元素的结尾。
p:after {
content: "?";
color: red;
}
这些选择器会在浮点的问题上有很大的用处。
原理就是始终显示在该元素内部内容的最后面。。