CSS读书笔记
本帖最后由 Sian 于 2018-1-8 13:26 编辑1、过滤所有外加样式：normalize.css
https://cdn.bootcss.com/normalize/7.0.0/normalize.css
2、属性选择器
2.1、包含title属性的元素 input {
color: red,
}2.2、包含title并且值为"submit"的元素 input {
color:red
border: 1px solid #000;// dotted,dashed
}2.3、包含href并且值中包含"yusian.com" a{
color:red
}2.4、包含href并且以"http://yusian.com"开头 a{
color:red
border: 1px dotted #000;
}2.5、包含href并且以"yusian.com"结尾 a{
color:red
border: 1px dashed #000;
}3、后代选择器
3.1、类a元素下面的类b的元素被选中 .a .b {
color : red;
}3.2、同时含有类a和类b的元素将被选中 .a.b {
color : red;
}4、相邻选择器
4.1、相邻的下一个 .a + div {
color: yellow;
}4.2、相邻通用选择器，相邻以下的所有 .a ~ div {
background: gray;
}5、伪类选择器
5.1、超链接伪类选择器，注意先后顺序，因为会相互覆盖，所以状态放前面 a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}5.2、input的伪类选择器 input:focus{
outline: none;
border: 1px dashed red;
}6、伪元素选择器
6.1、元素开头加"*" p:before {content: "*"}6.2、元素结尾加“[?]” p:after {content: "[?]"}6.3、元素第一个字符渲染红色 p:first-letter {color: #FF0000}6.4、第一个元素 p:first-child {color: blue;}6.4、最后一个元素 p:last-child {color: green;}6.5、第n个元素 p:nth-child(n) {color: #00FFFF;}7、选择器权重
内联 > id选择器 > 类/属性/伪类选择器 > 元素选择器
8、display的几个属性值
8.1、inline
左右可伸缩，尽可能的向左上角靠；
8.2、block
上下左右可伸缩，成块出现，不可换行或折断，并且不与其他元素同行
8.3、inline-block
上下左右可伸缩，成块出现，不可换行或折断，可与其他元素同行
8.4、none
隐藏不显示；
9、在线商城项目
9.1、box-sizing 属性：content-box、border-box、inherit，边框与内边距是否计算入框中 * {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}9.2、清除浮动
A、在div中，所有元素均设置成float时，母元素的高度会塌陷，从而无法设置可见样式；
B、要解决这个问题，最简单的办法是在所有子元素的后面添加一个空div，并且清除浮动，使得母元素形态上能够扩展到最后一个元素；
C、还有一个办法是通过伪类选择器的方式添加一个空元素清除浮动，在相关的元素中添加这个类即可； .clear-float:before,
.clear-float:after {
content: "";
display: block;
clear: both;
}
页:
[1]