table of Contents
This blog vast majority of online content sources, thanks to the selfless sharing of ~
CSS（Cascading Style Sheet）
Tag is used to adjust the style, also known as Cascading Style Sheets
CSS comments
/* 单行注释 */
/*
多行注释
*/
经典写法
/* 这是购物车页面的样式表（一般放css文件的第一行，声明该文件是干啥的） */
/* 顶部导航条开始 */
...顶部导航条样式代码...
/* 顶部导航条结束 */CSS syntax structure
选择器 {
属性1: 值;
属性2: 值;
属性3: 值;
}
#content {
background-color: red;
}CSS introduction of three ways
- File Import type (project specifications recommended)
- Writing in the head tag style tag
- Embedded / (write directly on the label, most not recommended) line in the formula
1.文件导入式（最规范的形式）
<link rel="stylesheet" href="mycss.css"/>
2.head标签内 写style 标签
<style>
p{
color: red
}
</style>
3.嵌入式
<p style="color: red">加油，努力</p>Selector
This can refer to the contents together the CSS the Selectors (Alternatively Chinese), switching the left catalog and to be completely read the following contents
We selector to select, specify a label, the label to add style
The basic selector
Tag selector, class selector, id selector, the global selector, sibling selector, descendant selectors
Attribute selectors
Combination selector
Pseudo-element selector
Pseudo class selector
The selector may be nested (# d1 .c2 a: hover {...} to the id of the class c2 d2 is hover state property of a tag set)
/* ######### 标签选择器 ########## */
元素（标签）选择器(<p></p>)
p{
color: red;
}
/* ######### 类选择器 ########## */
类选择器(class="c1")
.c1{
color: red;
}
/* ######### id选择器 ########## */
id选择器（id="d1"）
#d1{
color: red;
}
/* ######### * 全局选择器 ########## */
* 全局选择器(直接改所有的 ，用的不多)
*{
color: red;
}
/* ######### 后代选择器 ########## */
（空格）后代选择器(div下面的span、div下的p的span)
div span{
color: red;
}
/* ######### 子代选择器 ########## */
子代选择器(div下面的span)
div>span{
color: red;
}
/* ######### 毗邻选择器 ########## */
毗邻选择器（紧挨着的，下面额）
div+span{
color: red;
}
/* ######### 弟弟选择器 ########## */
弟弟选择器（同级别的下面所有的标签）
div~span{
color: red;
}
/* ######### 属性选择器 ########## */
属性选择器
具有某个属性名
某个属性名及属性值
具有某个属性名及属性值某个标签
/*[hobby]找只要包含某个属性名的标签*/
[hobby]{
background-color: red;
}
[hobby="jdb"]{
color="jdb";
}
/*找具有属性名是hobby 并且值是 jdb的 input标签*/
input[hobby="jdb"]{
color: red;
}
/* ######### 选择器分组 ########## */
选择器分组
p, span{
color: red;
}
最规范的写法：
p,
span{
color: red;
}
/* ######### 选择器嵌套 ########## */
选择器嵌套(所有选择器都可以嵌套（案例：id选择器、class选择器、标签选择器）)
#d1 .c1 span{
color: red;
}
/* ######### 伪类选择器 ########## */
伪类选择器（可以再了解一下）
:link 未访问时 :hover 鼠标覆盖/悬浮 :active 鼠标按下 :visited 访问后 :focus 获取焦点
a:hover{
color: red;
}
/* ######### 伪元素选择器 ########## */
伪元素选择器
:first-letter第一个字（母） :before（最前面） :after（最后面） :first-child（第一个元素）
p:first-letter{
color: red;
}
p:before{
content: '^'; /*css加上去的，页面上无法选中*/
color: red;
}
p:after{ /*可以用来解决浮动问题*/
content: '&'; /*在末尾添加内容*/
color: red;
}
Pseudo-classes, pseudo-element selector Quick
Since the id selector, class selector and other common selectors are more familiar with, so we organize a pseudo-classes, pseudo-element selectors quick access to facilitate post
First put a someone tidied it late again to sort out their own: CSS selectors complete reference manual
Here you want to put a table, sorted out quickly and easily find
CSS selectors priority*****
Reference: How priority is calculated? (Not long, the case is very simple, you can totally do not look below)
Added later style, many styles do not take effect reason is probably the lack of attention priority
Under the same circumstances selector
The principle of proximity
Where different selector
priority:
style> id selector> class> tag ...
Select weights
Styling Tips
First division page layout, and then the details of the skeleton Dachu
Google browser page to see the effect of adjusting the style