一、HTML标签的id和class属性和HTML标签的关系
•id属性值和HTML标签的关系：就像身份证号码和我们之间的关系差不多，具有唯一性，也就是说在
同一个页面中相同的id只能出现一次。
•class属性值和HTML标签的关系：就像名字和我们之间的关系差不多，属性不具有唯一性，我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class的元素具有相同的CSS样式。
•id就像你的身份证号，而class就像你的名字，但是都能通过他们来联系到你。
二、选择器
•选择器（selector）：声明网页上的哪些标签元素是我们选中的。
具体的选择器有很多种：
1、元素选择器
•元素选择器，就是“选中”相同的元素，然后对相同的元素定义同一组CSS样式。
•
语法：
标签名
{
属性1 : 取值1;
……
属性n : 取值n;
}
比如
p则会选中页面中的所有p标签。
2、id选择器【单选，唯一的】
•我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。
3、class选择器【多选】
•class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。
4.复合选择器
• 复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
（1）交集选择器【交】
• 语法：
选择器1.选择
器2
{ }
作用：选中同时复合多个条件的元素
• 例如
div.box1会选中页面中具有box1这个class的div元素。
div.cv { color：red }
（2）选择器分组（
群组选择器
）【并】
选择器1，选择器2，选择器3 { }
作用：同时选择多个选择器对应的元素
•群组选择器，指的是同时对几个选择器进行相同的操作。
5.通用选择器
• 通用选择器，可以同时选中页面中的所有元素。
• 语法：
*{ }
6、后代元素和子元素选择器
•HTML族谱
标签之间的关系
• 祖先元素
– 直接或间接包含后代元素的元素。
• 后代元素
– 直接或间接被祖先元素包含的元素。
• 父元素
– 直接包含子元素的元素。
• 子元素
– 直接被父元素包含的元素。
• 兄弟元素
– 拥有相同父元素的元素
•后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。
• 语法：
祖先元素 后代元素 后代元素 { }
如果取的是id的话，如p1，p2，div2要在前面加#
• 比如
p strong 会选中页面中所有的p元素内的strong元素。
•子元素选择器，就是选择元素内部中所有的某一种元素，包括子元素，不包括其他后代元素（如“孙元素”）。
• 语法：
父元素 > 子元素 { }
• 比如
p > strong 会选中页面中所有的p元素内的儿子strong元素，只限制在儿子这一代。
7、兄弟元素选择器
语法:
– 查找后边一个兄弟元素
• 兄弟元素 + 兄弟元素 { }
– 查找后边所有的兄弟元素
• 兄弟元素 ~ 兄弟元素 { }
三、选择器的优先级
-
我们为一个元素设置的样式同时也会应用到它的后代元素上
-
继承是发生在祖先后代之间的
-
继承的设计是为了方便我们的开发：利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
-
注意：并不是所有的样式都会被继承：比如背景相关的，布局相关等的这些样式都不会被继承。
不同级别
-
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
-
作为style属性写在元素内的样式【内联样式】
-
id选择器
-
类和伪类选择器
-
元素选择器
-
通配符选择器
-
浏览器自定义或继承
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）, 选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式。可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式。
总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
同一级别
(1) 同一级别中后写的会覆盖先写的样式
(2) 同一级别css引入方式不同，优先级不同
总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。
CSS3补充内容
8.属性选择器
-
[属性名] 选择含有指定属性的元素
-
[属性名=属性值] 选择含有指定属性和属性值的元素
-
[属性名^=属性值] 选择属性值以指定值开头的元素
-
[属性名$=属性值] 选择属性值以指定值结尾的元素
-
[属性名*=属性值] 选择属性值中含有某值的元素的元素
<style>
/* p[title]{ */
/* p[title=abc]{ */
/* p[title^=abc]{ */
/* p[title$=abc]{ */
p[title*=e]{
color: orange;
}
</style></head><body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p></body></html>
9.伪类选择器
-
伪类（不存在的类，特殊的类）：伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素...
-
伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
:only-child
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据
所有的
子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
:empty
-
这几个伪类的功能和上述的类似，
不通点是他们是在
同类型元素
中进行排序
:not() 否定伪类
- 将符合条件的元素从选择器中去除
10.a元素的伪类
a是超链接标签
<style>
/*
:link 用来表示没访问过的链接（正常的链接）
*/
a:link{
color: red;
}
/*
:visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
*/
a:visited{
color: orange;
/* font-size: 50px; */
}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover{
color: aqua;
font-size: 50px;
}
/*
:active 用来表示鼠标点击
*/
a:active{
color: yellowgreen;
}
p:first-child{
color: red;
}</style>
11.伪元素选择器
-
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
-
伪元素使用 :: 开头
<style>
p{
font-size: 20px;
}
/*
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
div::before{
content: 'abc';
color: red;
}
div::after{
content: 'haha';
color: blue;
}
div::before{
content: '『';
}
div::after{
content: '』';
}</style>
CSS餐厅练习：
http://flukeout.github.io/#
扫一扫
1909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
