css3 复合选择器,CSS3样式，基础选择器，复合选择器

目录

CSS(Cascading Style Sheet)：层叠样式表

CSS3样式规则

选择器{

属性1：属性值1；(键值对方式)

属性2：属性值2；

......

}

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现。

引入CSS3样式表的方式

(1)行内式：也称为内联样式，是通过标签的style属性来设置元素的样式。一般写在标签的属性中(适合属性只用一次的内容)。

例如：

西安邮电大学

(2)内嵌式：在html页面中使用

(3)链入式：是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，然后在html页面找

(4)导入式：在

例如：  

@import url(../css/c1.css);

CSS3的基础选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中执行这一任务的样式规则部分被称为选择器。

(1)选择器：用来定位页面中的标签

(2)标签名选择器：是指用HTML标签名称作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式。

标签名{

属性1：属性值1

属性2：属性值2

......

}

(3)类选择器：给标签加上class属性，class属性值可以重复

.类名{

属性1：属性值1；

属性2：属性值2；

......

}

(4)id选择器：给标签加上id属性，id属性值不能重复

#id{

属性1：属性值1；

属性2：属性值2；

......

}

(5)通配符选择器：所有选择器中范围最广的，能够匹配页面中的所有元素

*{

属性1：属性值1；

属性2：属性值2；

......

}

举例：

/* 类选择器 */

.p1{

color:red;

}

.p2{

color:blue;

}

/* id选择器 */

#beijing{

color:rgb(100, 100, 100);

font-family: '隶书';

}

#te{

text-transform: capitalize; /* 文本首字母大写 */

word-spacing: 50px; /* 单词之间的距离 */

letter-spacing: 25px; /* 字母之间的距离 */

text-decoration: underline; /* 下划线 */

}

/* 通配符选择器 */

*{

font-family: '隶书';

}

/*标签名选择器*/

a{

text-decoration: none; /* 取消超链接的下划线 */

}

p{

text-shadow: 5px 3px 1px black; /* 文字设置阴影：水平阴影距离 垂直阴影距离 模糊半径 阴影部分字体颜色 */

}

C++程序设计

Java程序设计

JavaScript程序设计

Python程序设计

北京市

上海市

重庆市

天津市

table boy class

跳转到百度

运行结果：

CSS3复合选择器

(1)标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。

(2)后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

(3)并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。

CSS3层叠性和继承性

层叠性：指多种CSS样式的叠加

继承性：指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

不能继承的属性：边框(border)、定位属性、内外边距(margin/padding)、布局属性、背景属性、宽高属性。

CSS3的优先级

据不同的选择器计算它的权值，优先应用权值最大的CSS样式。当前权值相同时，使用离它最近的CSS样式,CSS定义了一个!important命令，该命令被赋予最大的优先级，不受其他样式影响。(行内标签高于权值)

标签名选择器的权重为1(什么都不带)

类选择器的权重为10(前面带 . )

id选择器的权重为100(前面带#)

注意：继承样式的权重为0；行内样式优先；权重相同时CSS遵循就近原则；!important命令为最大优先级。