CSS三大特性
- 层叠性
- 继承性
- 优先性
层叠性
1.当同一个元素被两个选择器选中时，CSS会根据++选择器的权重++决定使用哪一个选择器
2.权重低的选择器效果会被权重高的选择器效果覆盖，权重相同时取后者
id选择器的权重为100，类选择器的权重为10，标签选择器的权重为1
继承性
继承性是子元素继承父元素样式的特性，在CSS中以text-、font-、line-开头的属性以及color属性都可以继承
有一些比较特殊的元素，如a标签的颜色不能继承，必须对a标签本身进行设置；h标签字体的大小不能继承，必须对h标签本身进行设置
优先性
id选择器＞类选择器＞标签选择器＞通配选择器＞继承＞浏览器默认属性值
通配选择器
作用：选中页面所有元素
语法：*{}
*{color:blue;}
类选择器(class选择器)
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器
语法：.class属性{}
<style>
.box{color:red;}
</style>
<body>
<div class="box">小明</div>
<div class="box">小李</div> <!--文本都变成红色-->
</body>
不要使用纯数字、中文等命名、尽量使用英文字母来表示
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性{}
<style>
#box{color:red;}
</style>
<body>
<div id="box">变红</div>
</body>
id属性具有唯一性，也就是说一个页面中相同的id只能出现一次
元素选择器
作用：根据标签名来选中指定元素
语法：p{},div{}
<style>
div{color:red;}
</style>
<body>
<div>变红</div>
</body>
后代选择器
作用：选择元素内部中某一种元素的所用元素(包括子元素和其它后代元素)
例：
father div{ 100px;}
父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素
<style>
#box1 p{color:blue;}
#box2 span{color:red;}
</style>
<body>
<div id="box1">
<p>好好学习，天天向上</p> <!--文本内容变成蓝色-->
<div>失败是成功之母</div>
</div>
<div id="box2">
<div>好好学习，天天向上</div>
<span>失败是成功之母</span> <!--文本内容变成红色-->
</div>
</body>
组群选择器
作用：同时选择多个选择器进行相同的操作
语法：p,span,div{}
<style>
p,span,div{color:red;}
</style>
<body>
<p>小李</p>
<span>小王</span>
<div>小明</div> <!--文本内容都变成红色-->
</body>
选择器之间要用逗号隔开
属性选择器
作用：根据元素的属性及属性值来选择元素
语法：
- [属性名]{} --->选择含有指定属性的元素
<style>
[title]{color:blue;}
</style>
<body>
<p title="a">富强</p>
<span title="b">民主</span> <!--p标签和span标签文本内容都变成蓝色-->
</body>
- [属性名=属性值]{} --->选择含有指定属性和属性值的元素
<style>
[title="a"]{color:blue;}
</style>
<body>
<p title="a">富强</p>
<span title="b">民主</span> <!--只有p标签文本内容变成蓝色-->
</body>
- [属性名^=属性值]{} --->以...开头
<style>
[title^="film"]{border:3px black;}
</style>
<body>
<img src="img/1.jpg" alt="film-a"> <!--前两张图片都被设置了一个黑色边框-->
<img src="img/2.jpg" alt="film-b">
<img src="img/3.jpg" alt="films-c"> <!--没有任何变化-->
</body>
- [属性名*=属性值]{} --->包含...
<style>
[title*="film"]{border:3px black;}
</style>
<body>
<img src="img/1.jpg" alt="film-a">
<img src="img/2.jpg" alt="films-b"> <!--没有任何变化-->
<img src="img/3.jpg" alt="films-film">
<!--第一张和第三张图片都被设置了一个黑色边框-->
</body>
- [属性名$=属性值]{} --->以...结尾
<style>
[title$="a"]{border:3px black;}
</style>
<body>
<img src="img/1.jpg" alt="film"> <!--没有任何变化-->
<img src="img/2.jpg" alt="films-b-a">
<img src="img/3.jpg" alt="films-film-a">
<!--第二张和第三张图片都被设置了一个黑色边框-->
</body>
伪类选择器
- 伪类：不存在的类，特殊的类
- 用来描述一个元素的特殊状态
- 一般情况下都是使用:开头
常见有以下：
- :first-child --->表示选中第一个子元素
- :last-child --->表示选中最后一个子元素
- :nth-child() --->可以匹配列表中任意一个子元素
括号中可填1，2，3，……，n;odd;even;2n;2n+1等其它
注意：以上伪类都是根据所有的子元素进行排序的
以下三种伪类功能和上述类似，不同点在于它们是在同类型元素中进行排列
- :first-of-type
- :last-of-type
- :nth-of-type()
伪元素选择器
- 伪元素表示页面中一些特殊的并不真实存在的元素
- 伪元素前是::
常见伪元素有:- ::first-letter --->表示第一个字母
- ::first-line --->表示第一行
- ::selection --->表示选中的内容
- ::before --->表示元素的开始
- ::after --->表示元素的结束
注意：before和after必须结合content属性来使用
例:
div::before{content:『; color:red;}
div::before{content:』; color:red;}
------------恢复内容结束------------