CSS3选择器01—CSS2.1部分选择器[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆.

该内容分为两部分，第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。

在开始之前，先简单介绍一下选择器，选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。

1、简单选择器，通过元素类型，class或id匹配一个或多个元素。

2、属性选择器，通过属性/属性值匹配一个或多个元素。

3、伪类，匹配处于确定状态的一个或多个元素。（比如鼠标指针悬停的元素、当前被选中或未被选中的复选框、元素是DOM树中一父节点的第一个子节点等）

4、伪元素，匹配处于相关的确定位置的一个或多个元素。（例如每个段落的第一个字，或者某个元素之前生成的内容）

5、组合器，这里不仅仅是选择器本身，还有以有效的方式组合两个或者更多的选择器用于非常特定的选择的方法。

6、多用选择器，这些也不是单独的选择器。这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，以将一组声明应用于由这些选择器选择的所有元素。

那么下面就具体的选择器来一一做一定的解释，有不足的地方还希望不吝赐教。嘿嘿。

一.基本选择器:

　　　　 1：*，通配符，匹配所有元素。

*{
  padding:0;
  margin:0;    
}

/*个人建议，请不要在你的CSS代码中出现通配符，通配符（*）是一种效率极低甚至会有在大型网站中使用导致页面渲染变慢的可能。所以，请尽可能的不要使用。*/

　　　　2：#id，id选择器，匹配所有id属性为”id”的元素，id属性具有唯一性。

#text {
  font-size: 16px;
}
/*一个ID名称在文件中必须是唯一的,若是ID名称重复，则可能会出现不可预知的情况，所以一定要避免ID名称的重复*/

　　　　3：.class，class选择器，匹配所有class属性中包含”class”的元素。文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)

.demo{
    width: 100px;
    height: 100px;
    background: red;
}

　　　　4：E(element),标签选择器，匹配所有使用E标签的元素。

span{
    color: red;
    background: pink;
    font-style: 20px;
}

二.多元素组合选择器:

　　　　5：E,F，多元素选择器，匹配所有E元素和F元素，E和F之间用逗号（，）分隔。

span,p,div{
    color: red;
    background: pink;
    font-style: 20px;
}

　　　　6：E F，后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔。

.demo .text{
    color: gray;
}

　　　　7：E > F，子元素选择器，匹配所有E元素的子元素F。

.demo>.text{
    color: gray;
}

　　　　8：E + F，毗邻元素选择器，匹配所有紧随E元素之后的同级元素F。

.demo + .text{
    color: gray;
}

三.属性选择器:

　　　　9：E[att]，匹配所有具有att属性的E元素，不考虑它的值。（E在此处可以省略，如“[checked]”，下同）

[title]{
    color:red;
}

　　　　10：E[att=val]，匹配所有att属性等于”val”的元素。

[title=name]{
    border:5px solid blue;
}
img[title=bgimg]{
    width:100px;
    height:100px;        
}

　　　　11：E[att~=val]，匹配所有att属性具有多个空格分隔的值、其中一个值等于”val”的E元素。

[title~=hello]{
    color:red;
}

　　　　12：E[att |= val]，匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以”val”开头的E元素。（主要用于lang属性，比如”en”、”en-us”、”en-gb”等等）

[lang|=en] {
    color:red;
}

四.伪类选择器:

　　　　13：E:first-child，匹配父元素的第一个子元素。

.demo:first-child{
    color: pink;
}

　　　　14：E:link，匹配所有未被点击的链接。

.demo:link{
    font-weight: 900;
}

　　　　15：E:visited，匹配所有已被点击的链接。

.demo:visited{
    font-weight: 900;
}

　　　　16：E:active，匹配鼠标已经在其上按下，还没有释放的E元素。

.demo:active{
    font-weight: 900;
}

　　　　17：E:hover，匹配鼠标悬停其上的E元素。

.demo:hover{
    color: orange;
    font-weight:900;      
}

　　　　18：E:focus，匹配获得当前焦点的E元素。

input:focus{
    color:red;
}

　　　　19：E:lang(c)，匹配lang属性等于c的元素。

html:lang(zh){
    color:lime;
    background:red;
}
:lang(en) > span{
    color:pink;
}

五.伪元素选择器:

　　　　20：E:first-line，匹配E元素的第一行。

.demo:first-line{
    color:red;
}

　　　　21：E:first-letter，匹配E元素的第一个字母。

.demo:first-letter{
    font-weight: border;
}

　　　　22：E:before，在E元素之前插入生成的内容。

.num:before{
  content:"(" attr(href) ")",
          
}

　　　　23：E:after，在E元素之后插入生成的内容。

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
/*after清除浮动，这里只对after和before的选择器写法做一个简单说明，并不具体涉及属性及其用法*/

最后想说，这些东西只是简单的罗列和解释，算是方便在使用的时候快速查找，如果想要更深入的了解还需要的更多的练习和代码量，就算是最基本的选择器知识，其实也要比这些多得多。只是还有很多用处并不是特别多，比如上面的E:lang(c)，E:visited，E:active等，还有很多未写在文章内的，如果想要更深入的学习，大家可以去下面的相关链接查看。

参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/124443.html原文链接：https://javaforall.net