1. 子选择器
使用 “ >”符号来选择指定元素的第一代子元素(类选择器名下的子元素),仅对第一代子元素进行样式更改。
实例:
<style type="text/css">
.h1>strong
{
border:1px solid red;
}
</style>
</head>
<body>
<h1 class="h1">hello world!<br><strong> this gonna be right!</strong></h1>
2. 后代选择器
选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
3.通用选择器
* {color:red;}
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}
它相当于下面两行代码:
h1{color:red;}
span{color:red;}
* 即代表所有的标签
4. 伪类选择符
它允许给HTML中不存在的标签设置样式,
常用的伪类选择符: tag_name:hover{ color:red; }
常用的组合有: a:hover {color:red;} 作用时当鼠标划过超链接时,颜色就会变成红色 hover意思为盘旋,犹豫
5. 分组选择符
即多个标签一齐设置样式。
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}
它相当于下面两行代码:
h1{color:red;}
span{color:red;}
6. CSS中的继承
css中的某些样式是具有继承性的
p{border:1px solid red;}
继承性是相对于子元素而言的,子元素也会使用相同的样式。
7. CSS 特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码,样式的选择是基于权值的
标签的权值是1,类选择符权值为10,id选择符为100,进行样式选择时将选择权值最高的。而且是最终标签与含自己标签的其他样式进行比较;例如span{ } 与 p span{ } 进行比较,p { }与 span{ }是无法比较的。
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
所以之前的样式优先级就好理解了:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)
8. CSS样式层叠
当上面的权值相同时,就会使用的层叠。
层叠就是当样式的权值相同时,HTML允许同一个元素有多个样式存在,当有相同权值的样式时,会根据CSS样式的先后顺序来决定取用哪一种样式。处于最后面的样式将会被采用。
9. CSS重要性
当制作网页时,有时有特殊情况需要对某些样式赋予最高权值,这是就要使用到css的重要性了。
基本格式(实例):
p{color:red!important;}
p{color:green;}
注意:!important 要放在分号前面。
10. CSS文字排版-字体
body { font-family:"字体名";}
11. CSS文字排版-字号,颜色
body{font-size:xx px; color:red; }
12.CSS文字-粗体
p{font-weight:bold;}
13. CSS文字-斜体
p{font-style:italic;}
14. CSS文字-下划线
p{text-decoration:underline;}
15. CSS 删除线
.oldPrice{font-decoration:line-through;}