CSS选择器的种类

最新推荐文章于 2022-02-19 17:02:10 发布

付憨憨

最新推荐文章于 2022-02-19 17:02:10 发布

阅读量216

点赞数

分类专栏： CSS 文章标签： css选择器的种类

本文链接：https://blog.csdn.net/weixin_43365881/article/details/103199658

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文档：CSS选择器的种类.note
链接：http://note.youdao.com/noteshare?id=48ceebf671ad095d26631030e65d648b&sub=61716A64DE904C74A7497BC4B652C012

class、id、标签选择器

这个几个就不细说了，class和标签选择器主要用来设置样式上面，id选择器推荐不要用在css样式上，更多是用在js操作dom时，选择元素。
如：

div{
    background: #fff;
}
.list {
    color: red;

}
$('#li').html('<span>web秀</span>')

element element

div p选择<div> 元素内部的所有 <p> 元素。

element>element

div>p 选择父元素为 <div> 元素的所有 <p> 元素。

element+element

div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。

[attribute]

[target] 选择带有 target 属性所有元素。

[attribute=value]

[target=_blank] 选择 target="_blank" 的所有元素。

[attribute~=value]

[title~=title] 选择 title 属性包含单词 "title" 的所有元素。

[attribute|=value]/[attribute^=value]

[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。

[attribute$=value]

p[src$="e"] 选择其 src 属性以 "e" 结尾的所有 <p> 元素。

[attribute*=value]

p[title*="abc"] 选择其 title 属性中包含 "abc" 子串的每个 <p> 元素。

element1~element2

p~div 选择前面有 <p> 元素的每个 <div> 元素。

A标签伪类选择器

:link a:link 所有未被访问的链接(a标签的默认样式)。
:visited a:visited 所有已被访问的链接。
:active a:active 点击后没有松开鼠标的链接。
:hover a:hover 鼠标指针位于其上的链接。

:before / :after

/*在元素的内容之前插入内容。*/
div:before{
    content: '';
    display: block;
    background: red;
    width: 30px;
    height: 10px;
}
/*在元素的内容之后插入内容。*/
div:after{
    content: '';
    display: block;
    background: green;
    width: 30px;
    height: 10px;
}

:first-child

p:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。(注意和:first-of-type做区分)

:first-of-type

p:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。(注意和:first-child做区分)