css复习整理(一)：选择器与创建

最新推荐文章于 2020-06-12 15:15:53 发布

weiweitb8

最新推荐文章于 2020-06-12 15:15:53 发布

阅读量300

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weiweitb8/article/details/77230914

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.选择器

1.CSS的选择器

大体分为：1.元素选择器 2.类选择器 3.id选择器 4.属性选择器（如[title]）；
然后选择器又可以进行各种组合：
＊后代选择器：父代名后代名｛属性名：属性值｝后代元素为所有后代（子子孙孙元素；
＊子代选择器：父代名> 子代名｛属性名：属性值｝子元素为父元素的儿子元素，不包括孙元素等；
＊兄弟选择器：如table + ul｛属性名：属性值｝解释为紧临table元素的ul元素；
＊群组选择器：如name1, name2,name3 ｛属性名：属性值｝多个群组共用一个属性设置；
＊伪类选择器：selector : name {属性名：属性值｝
＊通用选择器：*{属性名：属性值}

2.注意知识点：

1）伪类以及伪元素选择器：

这二者的区别是伪类是向选择元素添加效果，其效果可通过添加一个类实现，而伪元素是将特殊效果添加到某些选择器，其效果可通过添加真实元素实现。伪类包括：:link :visited :hover :active :focus :first-child :lang等，注意a:hover 必须被置于 a:link 和 a:visited 之后才有效，a:active 必须被置于 a:hover 之后，才是有效的；伪元素包括： :before :after :first-letter :first-line 。

2）属性选择器：

如[attribute] [attribute = value] [attribute~=value](属性值中包含指定词汇) [attribute|=value](属性值开头包含指定元素且为独立的单词) [attribute^=value](匹配属性值以指定值开头的每个元素) [attribute$=value](匹配属性值以指定值结尾的每个元素) [attribute*=value](匹配属性值中包含指定值的每个元素)；可以多个属性值一起使用进行选择，当给出属性对应的值时，value必须完全匹配，css才可以起作用。

3）类与id选择器差别：

中类名可以用空格分开，故有多类选择器，而ID 属性不允许有以空格分隔的词列表。

4）优先级排序（括号中的数字为选择器的权值）

通用选择器 < 元素选择器（1） < 类选择器（10） < 属性选择器 < 伪类 < ID 选择器（100） < 内联样式（1000）；当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明,尽量不使用它，使用时最好在某一特定页面而非全局中使用。记住CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有"!important"规则的优先级最大；

二. 创建

1.插入样式表：

创建样式表可分为以下几种情况：
*外部样式表：<link/>引入外部的CSS
*内部样式表：<style>标签引入，一般放在<head>里；
*内联样式表：放在标签里，由style设置的样式；

2.注意知识点：

1）多重样式：属性在不同样式表中被同一选择器定义，则继承更具体的样式；
2）多重样式优先级：内联样式> 内部样式 >外部样式 > 浏览器默认样式，但是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。