css

 

元素选择器

span{}

类选择器

.red{color: red;}
.red.bold{} 　　--同时满足两个条件
<div class="red bold"></div>

ID选择器，一般名称不重复

#a{}

属性选择器，针对于有该属性的元素

[title*="点击"] {}　　--可支持模糊匹配
[title^="点击"] {}　　--匹配开头部分
[title$="点击"] {}　　--匹配尾部字段

a[href] {color: red;}
a[href^="http://abc.com"]{color: blue;}

.button, input[type="submit"]{}

>li{}　　--仅第一级的时候选用

 后代选择器

前提 div a 中有 div b ，而div b 中有div c
.a * {}　　--a以下的元素
.a div{}　　--a以下的div
.a .b{}　　--a以下的b元素

相邻选择器

.a + div{}  --只选择一个与a相邻的div
.a ~ div{}  --与a平行的所有div选择器，但是只能往下匹配
.a + .b{}

伪类选择器 (触发式)

a:link {}  --link表示没有访问过的链接
a:visited {}  --visited表示访问过的链接
button:hover,a:hover {}  --悬停动作
button:active {}  --点击激活时（按下按钮）
input:focus {}  --获得聚焦

伪元素选择器（实现了重复多个区域的一次修改到位）

p:first-letter{} --设置首字母
.help:after{　　　　　　--前提<a class="help">ddd</a>，则会在ddd后面加上内容[aa]
　　content:"[aa]";
　　color:blue;
}
.help::before {　　　　　--在ddd前面加上内容**　　　
　　content:"**";　　　　-- 一个冒号可支持旧版浏览器，而两个冒号是新推出的。最好不用混合使用
　　color:red;
}
div p:first-child {}　　--在div中找到第一个段落
div p:last-child {}　　--在div中找到最后一个段落
div p:nth-child(2) {}　　--在div中找到第二个段落

 

---

 

•  选择器权重

style属性（内联） > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器

 

---

 

css常用属性

text-decoration: line-through;    --删除线 ，underline下划线，overline上划线
position: fixed;　　--该位置不会随页面滚动而改变
overflow-x: hidden；  --水平不滚动
overflow-y: auto;   --垂直滚动
z-index: -100;  --置于底层
margin:10px； --上下左右都是10
margin:10px 20px；  --上下10 左右20
margin:10px 2px 6px;  --上10 左右2 下6
margin：1px 0px 2px 3px;  --（顺势针方向）上1右0下2左3
font-family: sans-serif;  --字体为非衬线
font-weight: normal;  --也可以100-900，bold
line-height:2;　　--当前行高为字体的两倍，也可以用像素指定
text-decoration:none;  --重置默认样式
border-radius: 40px;  --设置圆角

display属性

block　　独占一行
inline　　添加margin和padding 只会对左右生效
inline-block　　margin和padding上下左右都可以，并且还是流动的
none　　隐藏一个元素

盒子模型

 参见 https://www.cnblogs.com/smyhvae/p/7256371.html

 

删除浏览器默认的边距，清除元素的默认样式
<style>
*{
         -webkit-appearance: none !important;
    }
  html, body, div, span, object, iframe,h1, h2,
  h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,
  em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,
  ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
  tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,
  figure, footer, header, hgroup, menu, nav, section, summary,time, mark,
  audio, video {
    margin:0;
    padding:0;
    border:0;
  }
</style>