摘要：兄弟选择器和相邻选择器的区别是相邻选择器只能选择前置元素后相邻的一个匹配元素，兄弟选择器能够选择前置元素后同级的所有匹配元素。分组选择器选择所有的元素其基本结构是选择出用逗号分隔的所有匹配元素。
一、CSS基本选择器
CSS基本选择器包括了四类：标签选择器、类选择器、id选择器、通配选择器 1、包含选择器 第一个选择符名表示：包含选择符名称 2、子选择器 第一个选择符名表示：父级选择符名称 3、相邻选择器 第一个选择符名表示：“兄”选择符名称 4、兄弟选择器 第一个选择符名表示：“兄”选择符名称 5、分组选择器 其基本结构是选择出用逗号分隔的所有匹配元素。 1、只指定属性名 2、指定属性名，并指定属性值 注意：属性值必须完全匹配 3、指定属性名，并具有该属性值 4、指定属性名，并属性值是以value开头的 5、指定属性名，并且属性值是以value结束的 6、指定属性名，并且属性值中包含了value 7、指定属性名，并且属性值是value或者以value-开头的值 E表示：元素 伪类选择器的分类 访问一个链接的顺序是：link-->visited-->hover-->active 2、结构伪类 3、否定伪类 4、UI状态伪类 5、target伪类 以上为伪类，下面的是伪元素： 伪类：用于向某些选择器添加特殊的效果
针对同一个标签，通过这几种方式定义的样式的优先级分别是：
通配选择器<标签选择器<类选择器/*选择div的所有后代中的span元素*/
div span{
font-size:12px;
}
第二个选择符名表示：被包含选择符名称/*选择div的所有孩子中的span元素(父子关系)*/
div>span{
font-size:12px;
}
第二个选择符名表示：子级选择符名称/*选择div的相邻弟弟p元素(div之后紧接着是p元素，并且是同一级)*/
div+p{
font-size:12px;
}
第二个选择符名表示：“弟”选择符名称
其结构是第一个选择器指定前面相邻元素，后面的选择器指定相邻元素/*选择div标签后面的所有同级的p元素*/
div~p{
font-size:12px;
}
第二个选择符名表示：“弟”选择符名称
其基本结构是第一个选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素。兄弟选择器和相邻选择器的区别是：相邻选择器只能选择前置元素后相邻的一个匹配元素，兄弟选择器能够选择前置元素后同级的所有匹配元素。/*选择所有的div、p、h1元素*/
div,p,h1{
font-size:12px;
}
/*形式：E[attr][attr]...:*/
.nav a[id]{
font-size:12px; /*选择class为nav的元素的所有子元素中，具有id属性的a元素*/
}
.nav a[id][title]{
font-size:12px; /*选择class为nav的元素的所有子元素中，具有id属性和title属性的a元素*/
}
/*形式：E[attr="value"]...:*/
.nav a[id="one"]{
font-size:12px; /*选择class为nav的元素的所有子元素中，id属性值为one的a元素*/
}
.nav a[class="nav first"][title]{
font-size:12px; /*选择class为nav的元素的所有子元素中，具有title属性，并且class属性值为nav first的a元素*/
}
与上面唯一的不同就是属性值不一定要完全匹配，属性值是一个词列表(类似于class一样可以有多个)，只要词列表中有一个值为value就可以。/*形式：E[attr~="value"]...:*/
.nav a[class="nav first"][title]{
font-size:12px; /*选择class为nav的元素的所有子元素中，具有title属性，并且class属性值为nav或first或nav first的a元素*/
}
/*形式：E[attr^="value"]...:*/
.nav a[title^="https://"]{
font-size:12px; /*选择class为nav的元素的所有子元素中，具有title属性，并且title属性值以https://开头的a元素*/
}
/*形式：E[attr$="value"]...:*/
.nav a[href$="png"]{
font-size:12px; /*选择class为nav的元素的所有子元素中，具有href属性，并且href属性值以png结尾的a元素*/
}
/*形式：E[attr*="value"]...:*/
.nav a[title*="mine"]{
font-size:12px; /*选择class为nav的元素的所有子元素中，具有title属性，并且title属性值包含了mine的a元素*/
}
/*形式：E[attr|="value"]...:*/
.nav img[src|="img"]{
width:200px; /*选择class为nav的元素的所有子元素中，具有src属性，并且src属性值为img或以img-开头的a元素*/
}
四、伪类选择器
/*伪类选择器的形式：E:pseudo-class*/
a:hover{
color:"red"
}
pseudo-class表示：伪类名称
1、动态伪类
锚点伪类：
:link
:visited
行为伪类：
:hover
:active
:focus:first-child：选择某个元素的第一个子元素
:last-child：选择某个元素的最后一个子元素
:nth-child(n)：选择某个元素的第n个子元素
:nth-last-child(n)：从后往前数，选择某个元素的第n个子元素
:nth-of-type()：选择指定的元素，e.g： div:nth-of-type("p")
:nth-last-of-type()：从后往前数，选择指定的元素
:first-of-type()：选择一个上级元素下的第一个同类子元素
:last-of-type()：选择一个上级元素下的最后一个同类子元素
:only-child：选择的元素是它的父元素的唯一一个子元素
:only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty：选择的元素里面没有任何内容
:not():过滤掉特定元素 e.g： input:not([type="submit"]){}:enabled：被用来指定当元素处于可用状态时的样式
:disabled：被用来指定当元素处于不可用状态时的样式
:read-only：被用来指定当元素处于只读状态时的样式
:read-write：被用来指定当元素处于非只读状态时的样式
:cehcke：被用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式
:required：元素具有required属性
:target：匹配文档(页面)的URI中某个标志符的目标元素
伪元素：用于向某些选择器设置特殊效果
上面的两个概念看了之后肯定会一脸懵逼，这不还是一样的吗？下面介绍下两者的区别：
1、伪类主要是为了给某些元素添加一些特殊效果，如a标签的link、visited伪类等；而伪元素则是创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容，并设置其样式。
2、可以同时使用多个伪类，而只能同时使用一个伪元素
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113161.html
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
阅读 2464·2021-10-19 11:45
阅读 2369·2021-09-30 09:56
阅读 1384·2021-09-30 09:47
阅读 568·2019-08-30 15:53
阅读 1810·2019-08-30 15:44
阅读 553·2019-08-30 12:52
阅读 1056·2019-08-30 11:16
阅读 1578·2019-08-29 16:36
