CSS--选择器

Posted 2020-07-03 Heroine.z

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS--选择器相关的知识，希望对你有一定的参考价值。

1.类和ID选择器的区别

　　相同点：可以应用于任何元素

　　不同点：

　　1、ID选择器只能在文档中使用一次。与类选择器不同，在一个html文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

　　2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用以空格分隔的词列表）

2.属性选择器：[属性]

　　根据一个或者多个属性元素来选择，h1[class]{color:red;} a[class] [title]{color:red;}

　　根据具体属性值来选择，a[class="a1"]{color:red;}

　　根据部分属性值来选择。p[class~="title"]{color:red;}表示p标签的class中只要包含title就使颜色变成红色。"~="能用于任何属性。

　　子串匹配属性选择器：

　　　　[foo^="bar"]选择foo属性值以“bar”开头的所以元素

　　　　[foo$="bar"]选择foo属性值以“bar”结尾的所以元素

　　　　[foo*="bar"]选择foo属性值包含子串“bar”的所以元素

　　　特定属性选择器：例：*[lang|="en"]{color="blue";}这个规则会选择lang属性以en或者en-开头的所有元素。这种属性选择器最常见的用途是匹配语言值。

3.　* 子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

　　*包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

　　总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

　*要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以用相邻兄弟结合符（adjacentsibling combinator），这表示为一个加号（+）。

　　例：h1 +p {margin-top:0px;}选择紧接在一个h1元素后出现的所以段落，h1 要和p元素有共同的父元素。　

4.伪类选择器：

　　链接伪类：静态：

　　：link 未访问的地址超链接 a:link{color:bule}

　　：visited 已访问的地址超链接　　a:visited{color:red}

　　以上两例子等同于<body link="blue" vlink="red">

　　动态伪类：（可以运用到任何元素）

　　：focus 指示当前拥有输入焦点的元素，也就是说可以接受键盘输入或者能以某种方式激活的元素。

　　：hover 指示鼠标指针停留悬停的情况

　　：active指示被用户输入激活的元素。例鼠标点击情况。

　　*伪类的顺序“link-visited-focus-hover-active”

　　*选择第一个子元素：first-child

　　例：p:first-child {color:red;}将作为某元素第一个子元素的所有p元素设置为粗体。常见的错误是认为first-child 之类的选择器会选择p元素的第一个子元素。

　　*可以在同一个选择器中结合使用伪类。结合顺序并不重要，但不用把互斥的伪类放在一起。

　　例：a:link:hover:lang(de){color:red}或者a:hover:link:lang(de){color:red}将未点击过的语言为德语的超链接鼠标悬停时的颜色变为红色。

5.伪元素选择器伪元素都必须放在出现该伪元素选择器的最后面

　　*设置首字母样式 :first-letter

　　*设置第一行样式：first-line

　　*设置之前和之后的样式：before ：after

6.可以兼容所有浏鉴器的“伪类选择符”就是 a 标签（伪类选择符有很多，尤其是 css3 中，但是不能兼容所有浏览器），例如 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

以上是关于CSS--选择器的主要内容，如果未能解决你的问题，请参考以下文章