摘要：今天在做项目的时候，发现选择器有些遗忘。文本也属于节点选择匹配的所有元素，且匹配元素被相关指向否定伪类选择器。相邻兄弟选择器。匹配的元素，该元素位于后面相邻位置通用兄弟选择器。
今天在做项目的时候，发现选择器有些遗忘。特写此文章来加深记忆，也方便自己日后回顾。
通用选择器 *//有时候为了浏览器内置样式，可能会这样写。
//但一般不推荐！！！
*{ margin:0;padding:0; }
标签选择器 E
ID选择器 #myid
类选择器 .myclass
类选择器和ID选择器算是最常见两种选择器。
这里要讲一下关于选择器优先级。
优先级从高到低分别为：
内联样式、ID、class/属性选择器/伪类选择器[如:hover,:focus]等、元素选择器/伪元素选择器[如:before,:after]
如果两个优先级相同，则按照声明顺序，写在【样式表】后面的起作用。
【注意！是在样式表中的位置！而不是在使用的位置！】
123
最后p的颜色显示为red！！！是写在样式表后面的.classB起作用！
属性选择器
E[disable] E中定义了disable属性的元素。E可省略，则表示选择定义了disable属性的任意类型的元素
E[att="val"] 匹配所有att属性等于val的E元素。E可省略，同上。
E[att~=key] 匹配att属性有key的元素,att属性是一个以空格符分隔的列表。
a[title~="bar1"]匹配第一个a元素
E[att|=es] 匹配E的元素，且att属性值是以es开头，att属性是用‘-’分隔的列表。
[lang|en] 匹配第一个body元素
E[att*="bar"] 匹配E的元素，且att属性值包含bar的子字符串。
E[att^="http://"] 匹配E的元素，且att属性以http://开头
E[att$=".png"] 匹配E的元素，且att属性以.png结尾
伪类选择器E:link 被定义了超链接并未被访问
E:visited 被定义了超链接并已经访问
E:active 匹配元素被激活
E:hover 匹配元素正在被鼠标经过
【注意顺序：LVHA :link->:visited->:active:->:hover】
举个栗子。
a:link {color: blue;}
a:active {color: red;}
a:hover {color: magenta;}
a:visited {color: purple;}
由于优先级相同，按照先后顺序来显示。
一个未被访问过的链接可以同时是hover和active的状态，但是由于visited写在最后，所以会覆盖了:active和:hover的样式。那么这个链接都是紫色的,无法呈现:active和:hover的状态。
E:focus 匹配元素获取了焦点
E:first-child 匹配E的元素，且该元素是父元素的第一个子元素
E:last-child 父元素中最后一个位置，且匹配E的子元素
E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素
E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n) 在所有满足E的元素内的第n个元素
E:first-of-type 相当于E:nth-of-type(1)
E:last-of-type 相当于E:nth-last-of-type(1)
这里nth-child/nth-last-child和nth-of-type容易混淆。p:nth-of-type(2){color:red;} p:nth-child(2){color:blue;} 效果： 123为蓝色。p:nth-child(2)匹配其父元素中第二个位置的p元素。若div元素第二个位置元素不是p元素，则不起作用。 456为红色。p:nth-of-type(2)匹配div中所有p元素中的第二个。123
456
E:empty 匹配E的元素，且不包含子节点。【文本也属于节点】
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
E:not(s) 否定伪类选择器。匹配E且不满足s选择符的元素。
E:root 匹配文档根元素
E::selection 匹配当前选中的元素
E:checked 匹配E的所有被选中UI元素radio/checkbox
E:enabled 匹配E的所有可用UI元素
E:disabled 匹配E的所有不可用UI元素
在网页中，UI元素一般是指包含在form元素内的表单元素input:checked 匹配单选按钮，不匹配复选框 input:enabled 匹配文本框，复选框，单选按钮，不匹配button input:disable 匹配button 关系选择器
A E 后代选择器。匹配E，且是被包含在A内的元素。只要是A的后代即可。
A > E 子包含选择器。匹配E的元素，且是A元素的子元素！只能是子元素，不能是孙元素等。。
B + E 相邻兄弟选择器。匹配E的元素，该元素位于B后面相邻位置！
A ~ E 通用兄弟选择器。匹配E的元素，该元素位于E元素的后面，且在同一级结构。即兄弟位置。
伪元素选择器E:first-line E元素内第一行文本
E:first-letter E元素内第一个字符
E:before 在E元素之前插入生成内容
E:after 在E元素之后插入生成的内容
之前利用选择器和css3动画写了一个筛选菜单的效果。
github地址如下：https://github.com/Lsxj/css3/tree/master/css-filter
效果如下：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115248.html
摘要：样式选择器权重优先级如下的权重为选择器的权重为类选择器的权重为伪类选择器的权重为属性选择器的权重为标签选择器的权重为伪元素选择器的权重为通配符的权重为综合上述权重优先级来看，正确的优先级排序应该是内联样式类伪类属性选择标签伪元素继承通配符 CSS选择器是编写CSS代码时的一个核心概念，选择器定义了相应的样式将会影响到文档中的哪些部分，以下是自己在学习及工作过程中对CSS选择器的一些总结...
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
摘要：通用选择器，子选择器和相邻同胞选择器并不在这四个等级中，所以他们的权值都为，优先级最高，万不得已的情况下才用。规范命名风格规范文件命名统一为小写的英文字母尽量少用拼音，如。当名字需要组合时，可以采用文件名的规范。 css样式的权值(权重) 权值等级的定义 第一等：代表内联样式，如: style=，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类...
阅读 1129·2021-11-24 10:43
阅读 3053·2021-11-22 09:34
阅读 3534·2021-10-08 10:04
阅读 3890·2021-09-23 11:58
阅读 3100·2019-08-30 15:44
阅读 452·2019-08-30 13:01
阅读 1141·2019-08-28 18:07
阅读 1412·2019-08-26 13:42
