css选择器知识归纳-学吧号

css选择器知识归纳

图片[1]-css选择器知识归纳-学吧号【这是我的学习笔记，你也可以拿去用】 1 元素选择器：比如p{xxxx}，选择文档中所有的p元素； 2 类选择器：比如.center_bar{xxxx}，选择文档中使用了类center_bar的元素； 3 id选择器：比如.button1{xxxx}，选择文档中使用了button1的元素； 4 或选择器：用逗号连接多个选择器； 5 与选择器：多个选择器紧挨在一起； 6 后代选择器：用空格连接多个选择器； 7 子代选择器：用大于号连接多个选择器，它其实是后代选择器的特殊情况； 8 属性选择器： (1) 比如p[id]，选择标签上有属性“id”的p元素； (2) 比如p[id=”button1″]，选择标签上有属性“id”并且id的值为“button1”的p元素； (3) 比如p[id^=”b”]，选择标签上有属性“id”并且id的值以“b”开头的p元素； (4) 比如p[id$=”b”]，选择标签上有属性“id”并且id的值以“b”结尾的p元素； (5) 比如p[id*=”b”]，选择标签上有属性“id”并且id的值包含“b”的p元素； 9 p:first-child：既是p元素，也是某元素的第一个孩子； 10 p:last-child：既是p元素，也是某元素的最后一个孩子； 11 p:nth-child(3)：既是p元素，也是某元素的第三个孩子； 12 p:nth-child(odd)：既是p元素，也是某元素的第奇数个孩子； 13 伪类选择器都是某种状态，比如active、link、hover，使用“:”； 14 伪元素选择器，确实有某些实体的东西，比如第一行文字、第一个文字、被选中的文字，使用“::” 15 只有多个选择器选中了同一个元素的同一个属性，才会出现优先级的问题； 16 如果两个选择器优先级相同，那么写在后面的选择器生效； 17 选择器优先级的排列： (1) !important (2) 内联样式 (3) id选择器 (4) 类和伪类选择器 (5) 元素和伪元素选择器 (6) *选择器 (7) 继承样式

CSS选择器

图片[2]-css选择器知识归纳-学吧号

后面带的[]里面的是指标记具有那一个属性。

详解CSS样式选择器有哪些?

图片[3]-css选择器知识归纳-学吧号

CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS选择器分类：标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器 1、html标签选择器：定义：以html标签作为选择器 2、class类选择器：定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。

类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：同一个元素可以设置多个类，之间用空格隔开： 3、ID选择器定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则 4、群组选择器定义：集体统一设置样式 5、全局选择器定义：所有标签设置样式 HTML文档结构图 6、后代选择器定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。 7、伪类选择器链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。伪类说明 :link 未访问的链接 :visited 已访问的链接 :hover 鼠标悬停状态 :active 激活的链接 :hover 用于访问的鼠标经过某个元素时； :active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）伪类选择器的属性：link > visited > hover > active 说明： 1) a:hover 必须置于 a:link和a:visited之后，才有效 2) a:active 必须置于 a:hover之后才有效 3) 伪类名称对大小写不敏感 8、CSS其它选择器 css继承特性，从父元素那继承部分css属性选择器的优先级 ID选择优先级最高（id选择器定义具有唯一性） class选择器次之（class选择器可以多个）元素选择器再次之其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高 !important 加重选择器的优先级，添加在样式规则之后，中间用空格隔开。 CSS选择器命名规则 1：采用英文字母，数字以及”-” 和 “_” 命名 2：以小写字母开头，不能以数字和”-” 和 “_” 开头 3：使用有意义的命名规范常用CSS命名 header 页头 main 主体 footer 页尾 nav 导航 sidebar 侧栏 container 容器 column 栏目 title 标签 menu 菜单 submenu 子菜单 *列举常用命名，大家根据自身项目及团队的规则命名耐心学习基础知识，基础是盖房的根基，必须打结实。

如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。