css书写规范 ：
选择器{
属性名： 属性值 （width：“300px”）
属性名： 属性值
}
css样式分类：
1、行内样式： 
缺点：编写繁琐，不推荐
2、内部样式：
-----在<style>中编写，选择的元素在<body>中
3、外部样式：
------------文件以".css"结尾
在</html>上面，</title>下面加：
<link rel="stylesheet" href="./外部样式.css">
css选择器
1、基础选择器：
标签选择器：
------------选中当前页面中所有符合标签
p{
}
id选择器：
-----------"#"+id值
#box1{
background-color：pink
} 
类选择器:
--------------加“.”所有box1类名（class）
.box1{
}
通配符选择器：
--------选中所有的元素
{
}
2、包含选择器：
1.子代选择器：
---------选中第一层分类元素（假设有两层）
ul>li{
}
只选第二层：
ul div>li{
}
--------以此类推
2.后代选择器：选中所有分层
ul li{
}
（css样式存在层叠性，后边的颜色会把前面的覆盖掉）
3、逗号选择器（复合选择器）：
同时选择多个元素给属性：
div，
p,
h1{
}
4、属性选择器：
通过type：
input[type="text"]{------------type值为text的input
}
input[type*="e"]{------------type值里包含“e”的input
}
input[type^="e"]{------------type值里以p开头的input
}
input[type$="e"]{------------type值里以e结尾的input
}
通过name：
input[name="pwd"]{------------name值为pwd的input
}
input[name]{------------所有具有name属性的input
}
5、伪类选择器：
----------设置元素在不同状态下的选择器
未访问的链接样式：
a：link{
color：pink；
}
*鼠标悬停时的样式：
a：hover{
color：green；
}
可以用+设置下一行，如果有嵌套关系的就不用加号，就空格-----hover不限于在a中
访问过后的链接样式：
a：visitde{
color：red；
}
获取焦点：
a：focus{
color：blue；
}
活跃状态：
---------鼠标点击后按住鼠标未松开时
a：active{
color：yellow；
}
[注意：
显示顺序：a：limk、a：visited、a：hover、a：active
+：下一个
~：之后所有的兄弟元素]
6、结构伪类选择器
选择某一行：
ul li：nth-child（7）{
color：red；
} ------------ul里面的第7个li
ul li：last-child{
color：red；
} ------------ul里面的最后一个li，同理first-child
选择特殊行：
选择奇数行：
ul li：nth-child（2n+1）{
color：red；
} ------------ul里面的奇数行，偶数行同理2n，n+5：从第5个开始，一直到最后
：nth-child的弊端：
运行" .father .son :nth-chil（2）"的时候：
会先找.father，然后对所有子元素进行排序，然后再看子元素是否满足条件（.son)，最后显示的行列有误
解决方法： .father .son:nth-of-type(2)---------先找.father，再找.son，然后对.son里面的进行排序再选定
7、伪元素选择器:
-----------不是元素但可以像元素一样添加东西
p::before{
content:"添加的内容"; ------添加东西必须有一个属性是content
} --------在p前面添加
input::placeholder{
color : red; -------给提示语改颜色，只修改不是添加，不用加content
}
div::selection{
color : red; ----------给鼠标选定内容时改颜色
}
2520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
