CSS 快速学习

【快速学习让我不再思考太多，更多专注在一个 box 当中，上下文朝着正交方向前进~】

【Think small，】https://learnxinyminutes.com/docs/zh-cn/css-cn/

【do big!】http://dabblet.com/

 

 

Syntax

……………………………………………… 

Selector {

　　property:value,

　　...

}

Eg

……………………………………………………

* {

　color:red; /* 选择器是 所有 ，属性是 红色文字，组合起来是 所有文字 设置为 红色 */ 

}

 

………………………………………………………………………………………………………………………………………………………………………………………………

/*
假定页面上有这样一个元素

<div class='some-class class2' id='someId' attr='value' />
*/

/* 你可以通过类名来指定它 */
.some-class { }

/* 给出所有类名 */
.some-class.class2 { }

/* 标签名 */
div { }

/* id */
#someId { }

===============================================

Selector 有种像正则表达式的语法
===============================================

/* 通过属性的值的开头指定 */
[attr^='val'] { font-size:smaller; }

/* 通过属性的值的结尾来指定 */
[attr$='ue'] { font-size:smaller; }

/* 通过属性的值的部分来指定 */
/*  ~ 这个之前没见过  */
[attr~='lu'] { font-size:smaller; }

/* 你可以把这些全部结合起来，注意不同部分间不应该有空格，否则会改变语义 */
div.some-class[attr$='ue'] { }

===============================================

假设现在这样，
<div class="some-parent">
　　<div class="class-name"></div>

　　<div class="class-name"></div>

</div>
===============================================

/* 某个元素是另一个元素的直接子元素 */
div.some-parent > .class-name {}

/* 或者通过该元素的祖先元素 */
div.some-parent .class-name {}

/* 注意，去掉空格后语义就不同了。
你能说出哪里不同么？ */
div.some-parent.class-name {}

===============================================

假设现在这样，

<div class="some-parent">　　
	<div class="i-am-before">第一部分</div>　　
	<div class="this-element">第二部分</div>

	<div class="this-element">第三部分</div>

</div>

===============================================

/* 你可以选择某元素前的【相邻】元素   */
.i-am-before + .this-element { }

/* 某元素之前的同级元素 相邻【或不相邻】 */
.i-am-any-before ~ .this-element {}

================================================

/* 伪类工具允许你基于页面的行为指定元素（而不是基于页面结构） */

/* 例如，当鼠标悬停在某个元素上时 */
:hover {}

/* 已访问过的链接*/
:visited {}

/* 未访问过的链接*/
:link {}

/* 当前焦点的input元素 */
:focus {}

/* ####################
   ## 属性
   ####################*/

选择器 {

    /* 单位 */
    width: 50%; /* 百分比 */
    font-size: 2em; /* 当前字体大小的两倍 */
    width: 200px; /* 像素 */
    font-size: 20pt; /* 点 */
    width: 5cm; /* 厘米 */
    width: 50mm; /* 毫米 */
    width: 5in; /* 英尺 */

    /* 颜色 */
    background-color: #F6E;  /* 短16位 */
    background-color: #F262E2; /* 长16位 */
    background-color: tomato; /* 颜色名称 */
    background-color: rgb(255, 255, 255); /* rgb */
    background-color: rgb(10%, 20%, 50%); /*  rgb 百分比 */
    background-color: rgba(255, 0, 0, 0.3); /*  rgb 加透明度 */

    /* 图片 */
    background-image: url(/path-to-image/image.jpg);

    /* 字体 */
    font-family: Arial;
    font-family: "Courier New"; /* 使用双引号包裹含空格的字体名称 */
    font-family: "Courier New", Trebuchet, Arial; /* 如果第一个
                             字体没找到，浏览器会使用第二个字体，一次类推 */
}

=================================
【优先级话题】
假设现在这样，

<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>

我自己的印象是
1.class优先   还有写在后面的优先
2.行内优先
3.更具体的优先

实际情况是这样，
1.使用 !importance 指令级别最优先  所以是E
2.行内嵌入 的比 外部的优先   （正常都写在外部的）所以是F
3.按照class优先原则 ， 加上更具体原则 ，所以是 A
4.按照class优先原则，写在后面优先原则，所以是 C
5.按照class优先原则，所以是B
6.按照class优先原则，没有class了，所以是D

=================================

/*A*/
p.class1[attr='value']

/*B*/
p.class1 {}

/*C*/
p.class2 {}

/*D*/
p {}

/*E*/
p { property: value !important; }