第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。

第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）

第二等：ID选择器，如：#header，权值为0100.

第三等：类选择器、如：.bar，权值为0010.

第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.

通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.

继承的样式没有权值。

1. CSS简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层

总之一句话，CSS用来设置网页中元素的样式

使用CSS来修改元素样式的方式大致可以分为3种

2.类型样式设置

a.内联样式（行内样式）

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）

b.内部样式表

将样式编写到head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

<style>
p{color:green; font-size:50px;
}
</style>

问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

c.外部样式表（最佳）

可以将css样式编写到一个外部的CSS文件中，然后通过编写head中link标签来引入外部的CSS文件完成选择

<link rel="stylesheet" href="./style.css">

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用

将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

3.CSS基本语法

3.1注释

css中的注释

只能使用/*和*/包裹。即不管是单行注释，还是多行注释，都是以/*开头，以*/结尾

/* css中的单行注释 *//*
css中的多行注释
css中的多行注释
css中的多行注释
*/

我们对比下其他几种前端语言的注释

html中的注释

只能使用包裹。即不管是单行注释，还是多行注释，都是以结尾


<!-- html中的单行注释 --><!--
html中的多行注释
html中的多行注释
html中的多行注释
-->

JS(JavaScript)和JQuery中的注释

单行注释使用//。多行注释使用/*和*/包裹，以结尾

/* JS(JavaScript)和JQuery中的单行注释*//*
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
*/

3.2基本语法

`类型：选择器声明块`

选择器

通过选择器可以选中页面中的指定元素

比如p的作用就是选中页面中所有的p元素声明块

声明块

通过声明块来指定要为元素设置的样式

声明块由一个一个的声明组成，声明是一个名值对结构

一个样式名对应一个样式值，名和值之间以:连接，以;结尾


h1{color: green;
}

CSS选择器

1.通配选择器（Universal selector）

●作用：选中页面中的所有元素
●语法：*
●例子：

*{color: red;
}

2.元素选择器（Type selector）

也叫类型选择器、标签选择器

●作用：根据标签名来选中指定的元素
●语法：元素名{}
●例子：p{} h1{} div{}

p{color: red;
}h1{color: green;
}

3.类选择器（Class selector）

●作用：根据元素的class属性值选中一组元素
●语法：.类名
●例子：.blue{}

.blue{color: blue;
}
.size{font-size: 20px;
}

class是一个标签的属性，它和id类似，不同的是class

●可以重复使用，
●可以通过class属性来为元素分组，
●可以同时为一个元素指定多个class属性，空格隔开

<p class="blue size"> 类选择器（Class selector）</p>

4.ID选择器（ID selector）（id不能重复）

●作用：根据元素的id属性值选中一个元素，一个元素一个id
●语法：#id名{}
●例子：#box{} #red{}

#red{color: red;
}

5.属性选择器（Attribute selector）

●作用：根据元素的属性值选中一组元素
●语法1：[属性名] 选择含有指定属性的元素
●语法2：[属性名=属性值] 选择含有指定属性和属性值的元素
●语法3：[属性名^=属性值] 选择属性值以指定值开头的元素
●语法4：[属性名$=属性值] 选择属性值以指定值结尾的元素
●语法5：[属性名*=属性值] 选择属性值中含有某值的元素
●例子：p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}

p[title]{color: orange;
}
p[title=e]{color: orange;
}
p[title^=e]{color: orange;
}
p[title$=e]{color: orange;
}
p[title*=e]{color: orange;
}

6. 复合选择器

交集选择器

●作用：选中同时复合多个条件的元素
●语法：选择器1选择器2选择器3选择器n{}
●注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头！！！

div.red{font-size: 30px;
}.a.b.c{color: blue;
}

并集选择器（选择器分组）

●作用：同时选择多个选择器对应的元素
●语法：选择器1,选择器2,选择器3,选择器n{}
●例子：#b1,.p1,h1,span,div.red{}

h1,span{color: green;
}

7.关系选择器

●父元素：直接包含子元素的元素叫做父元素
●子元素：直接被父元素包含的元素是子元素
●祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
●后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
●兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器（Child combinator）

●作用：选中指定父元素的指定子元素
●语法：父元素 > 子元素{}
●例子：A > B

div.box > p > span{

color: orange;

}

后代元素选择器（Descendant combinator）

●作用：选中指定元素内的指定后代元素
●语法：祖先后代
●例子：A B

div span{

color: skyblue;

}

兄弟元素选择器（Sibling combinator）

●作用：选择下一个兄弟
●语法：前一个 + 下一个前一个 + 下一组
●例子1：A1 + A2（Adjacent sibling combinator）
●例子2： A1 ~ An（General sibling combinator）

p + span{

color: red;

}

p ~ span{

color: red;

}

7.伪类选择器（状态选择器）（重要）

伪类（不存在的类，特殊的类） (ul>li+tab,生成结构)

伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…

伪类一般情况下都是使用:开头

以上这些伪类都是根据所有的子元素进行排序的

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child() 选中第n个子元素

n：第n个，n的范围0到正无穷

2n或even：选中偶数位的元素

2n+1或odd：选中奇数位的元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

:first-of-type 同类型中的第一个子元素

:last-of-type 同类型中的最后一个子元素

:nth-of-type() 选中同类型中的第n个子元素

:not()否定伪类，将符合条件的元素从选择器中去除

/* ul下所有li，黑色 */
ul>li {color: black;
}/* ul下第偶数个li，黄色 */
ul>li:nth-child(2n) {color: yellow;
}/* ul下第奇数个li，绿色 */
ul>li:nth-child(odd) {color: green;
}/* ul下第一个li，红色 */
ul>li:first-child {color: red;
}/* ul下最后一个li，黄色 */
ul>li:last-child {color: orange;
}

:link 未访问的链接

:visited 已访问的链接

由于隐私的原因，所以visited这个伪类只能修改链接的颜色

:hover 鼠标悬停的链接

:active 鼠标点击的链接

/* unvisited link */
a:link {color: red;
}/* visited link */
a:visited {color: yellow;
}/* mouse over link */
a:hover {color: green;
}/* selected link */
a:active {color: blue;
}

8.伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用::开头

●::first-letter 表示第一个字母
●::first-line 表示第一行
●::selection 表示选中的内容
●::before 元素的开始
●::after 元素的最后
●::before和::after 必须结合content属性来使用

/* 段落首字母设置大小为30px */

p::first-letter{

font-size: 30px;

}

/* 段落第一行设置为黄色背景 */

p::first-line{

background-color: yellow;

}

/* 段落选中的部分变绿色 */

p::selection{

background-color: green；

}

/* div前加上内容 */

div::before{

content: 'BEFORE';

color: red;

}

/* div后加上内容 */

div::after{

content: 'AFTER';

color: blue;

}

CSS语法及其选择器相关推荐

CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
Web前端之CSS语法与选择器
目录一.CSS简介层叠样式表 1.内联样式(行内样式) 2.内部样式表 3.外部样式表二.CSS基本语法注释 css中的注释我们对比下其他几种前端语言的注释 html中的注释 JS(Java ...
CSS语法（选择器）
目录 css语法一二.常用选择器三.复合选择器四.关系选择器五.后代选择器六.选择下一个兄弟(不包括前一个) 七.属性选择器八.伪类选择器(不存在的类) css语法一 -注释 /* ...
【Web前端HTML5CSS3】——CSS语法与选择器（超级全面）
目录一.CSS语法 1. CSS简介内联样式(行内样式) 内部样式表外部样式表 2. CSS基本语法注释基本语法 3. CSS选择器常见选择器复合选择器关系选择器属性选择器 6. 伪 ...
【Web前端HTML5CSS3】04-CSS语法与选择器
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录 CSS语法与选择器 1. CSS简介层叠样式表内联样式(行内样式) 内部样式表外部样式表 2. CSS ...
HTML超链以及CSS基础、选择器
一.超链接a的相关属性 1.href="书写路径"有5种写法:外部路径以及绝对路径.相对路径.空(刷新页面).#(取消链接功能) 2.title="鼠标悬停上去之后的提示 ...
HTML +CSS 语法
HTML 1.html基本结构 <!DOCTYPE html> 声明当前的html文档是 html5 <html></html> 根标签(根节点) 一个网页中只有一 ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：
1.CSS样式的理解: Cascading Style Sheets(层叠样式表):修饰html标签样式的 2.使用(需要内嵌html中): 1.行内样式:(通过标签的style属性使用) 格式:样式 ...

CSS语法及其选择器

1. CSS简介

层叠样式表

2.类型样式设置

a.内联样式（行内样式）

b.内部样式表

c.外部样式表（最佳）

3.CSS基本语法

3.1注释

3.2基本语法

`类型：选择器声明块`

选择器

声明块

CSS选择器

1.通配选择器（Universal selector）

2.元素选择器（Type selector）

3.类选择器（Class selector）

4.ID选择器（ID selector）（id不能重复）

5.属性选择器（Attribute selector）

6. 复合选择器

7.关系选择器

7.伪类选择器（状态选择器）（重要）

8.伪元素选择器

CSS语法及其选择器相关推荐

最新文章

热门文章

CSS语法及其选择器

1. CSS简介

层叠样式表

2.类型样式设置

a.内联样式（行内样式）

b.内部样式表

c.外部样式表（最佳）

3.CSS基本语法

3.1注释

3.2基本语法

类型：选择器 声明块

选择器

声明块

CSS选择器

1.通配选择器（Universal selector）

2.元素选择器（Type selector）

3.类选择器（Class selector）

4.ID选择器（ID selector）（id不能重复）

5.属性选择器（Attribute selector）

6. 复合选择器

7.关系选择器

7.伪类选择器（状态选择器）（重要）

8.伪元素选择器

CSS语法及其选择器相关推荐

最新文章

热门文章

`类型：选择器声明块`