![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
CSS3选择器(详细!全!)
CSS3选择器(详细!全!)
一、属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
1、E[att^=value]属性选择器
E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。
需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。
例:
<style type="tsxt/css">
p[id^="one"]{ /*表示匹配包含id属性,且id属性值是以“one”字符串开头的p元素*/
属性:属性值;
}
</style>
<body>
<p id="one">内容</p>
<p id="one0">内容</p>
</body>
2、E[att$=value]属性选择器
E[att$=value]属性选择器是指选择器名称为E的标记,且该标记定义了att属性,att属性值包含后缀为value的子字符串。
与E[att^=value]选择器一样,E元素可以省略的,如果省略则表示可以匹配满足条件的任意元素。
例:
<style type="tsxt/css">
p[id$="main"]{ /*表示匹配包含id属性,且id属性值是以“main”字符串结尾的p元素*/
属性:属性值;
}
</style>
<body>
<p id="oldmain">内容</p>
<p id="newmain">内容</p>
</body>
3、E[att*=value]属性选择器
E[att*=value]属性选择器是指选择器名称为E的标记,且该标记定义了att属性,att属性值包含value的子字符串。
与前两个选择器一样,E元素可以省略的,如果省略则表示可以匹配满足条件的任意元素。
例:
<style type="tsxt/css">
p[id*="demo"]{ /*表示匹配包含id属性,且id属性值是包含“demo”字符串的p元素*/
属性:属性值;
}
</style>
<body>
<p id="olddemo">内容</p>
<p id="demoone">内容</p>
</body>
二、关系选择器
1、子代选择器(>)
子代选择器主要用来选择某个元素的第一级子元素(第一个子元素)。
<style type="text/css">
h1>strong{ /*表示选择只作为h1元素子元素的strong元素*/
属性:属性值;
}
</style>
<body>
<h1>
<strong>这属于第一级子元素</strong>
<strong>这也属于第一级子元素</strong>
</h1>
<h1>
<strong>这不属于第一级子元素,这是h1元素的子元素</strong>
</h1>
</body>
2、兄弟选择器(+、~)
兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。
临近兄弟选择器(+)
该选择器使用加号“+”来连接前后2个选择器。
选择器中的2个元素有同一个父亲,而且第2个元素是紧跟第1个元素。
<style type="text/css">
p+h2{
属性:属性值;
}
</style>
<body>
<p>一</p>
<h2>二</h2> /*只选择p元素后紧邻的第1个兄弟元素*/
<h2>三</h2>
<h2>四</h2>
</body>
普通兄弟选择器(~)
普通兄弟选择器使用“~”来链接前后2个选择器。
选择器中的2个元素有同一个父亲,但第2个元素不必紧跟第1个元素。
<style type="text/css">
p~h2{
属性:属性值;
}
</style>
<body>
<p>一</p>
<h2>二</h2> /*选择p元素后的所有兄弟元素*/
<h2>三</h2> /*选择p元素后的所有兄弟元素*/
<h2>四</h2> /*选择p元素后的所有兄弟元素*/
</body>
三、结构化伪类选择器
1、:root选择器
:root选择器用于匹配文档根元素,在HTML中,根元素始终是HTML元素。也就是说使用“:root选择器”定义的样式,对所有页面元素都生效。对于不需要该样式的元素,可以单独设置样式进行覆盖。
<style type="text/css">
:root{
属性:属性值;
}
</style>
2、:not选择器
如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用:not选择器。
<style type="text/css">
body *:not(h3){
属性:属性值;
}
</style>
<body>
<h3>一<h3>
<p>二</p> /*选择*/
<p>三</p> /*选择*/
<p>四</p> /*选择*/
</body>
3、:only-child选择器
:only-child选择器用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用“:only-child选择器”可以选择这个子元素。
<style type="text/css">
li:only-child{ /*用于选择作为ul唯一子元素的li元素*/
属性:属性值;
}
</style>
<body>
<div>
<ul>
<li>内容</li>
</ul>
</div>
</body>
4、:first-child选择器和:last-child选择器
:first-child选择器和:last-child选择器分别用于为父元素中特定类型的第1个或者最后一个子元素设置样式。
<style type="text/css">
p:first-child{
属性:属性值;
}
p:last-child{
属性:属性值;
}
</style>
<body>
<p>一<p> /*:fist-child*/
<p>二</p>
<p>三</p>
<p>四</p> /*:last-child*/
</body>
5、:nth-child(n)选择器和:nth-last-child(n)选择器
:first-child(n)选择器和:last-child(n)选择器分别用于为父元素中特定类型的指定位置的子元素(第n个子元素、倒数第n个子元素)设置样式。
<style type="text/css">
p:nth-child(2){
属性:属性值;
}
p:nth-last-child(2){
属性:属性值;
}
</style>
<body>
<p>一<p>
<p>二</p> /*nth-child(2)第二个元素*/
<p>三</p>
<p>四</p> /*nth-last-child(2)倒数第二个元素*/
<p>五</p>
</body>
6、:nth-of-type(n)选择器和:nth-last-of-type(n)选择器
:nth-of-type(n)选择器和:nth-last-of-type(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素,与元素类型无关。
<style type="text/css">
h2:nth-of-type(odd){属性:属性值;} /*用于将所有h2元素中第奇数行的元素设置样式*/
h2:nth-of-type(even){属性:属性值;} /*用于将所有h2元素中第偶数行的元素设置样式*/
p:nth-last-of-type(2){属性:属性值;} /*用于将倒数第2个p元素设置样式*/
</style>
7、:empty选择器
:empty选择器用来选择没有子元素或文本内容为空的所有元素。
<style type="text/css">
:empty{
属性:属性值;
}
</style>
<body>
<p>一</p>
<p>二</p>
<p></p> /*选择设置样式*/
<p>三</p>
</body>
8、:target选择器
:target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。url带有后面跟有锚名称#,指向文档内某个具体的元素,这个被链接的元素就是目标元素。
只有用户单击了页面中的超链接,并跳转到target元素后,:target选择器所设置的样式才会起作用。
<style type="text/css">
:target{ /*用于为target元素设置样式,当单击链接时,所链接到的内容将会被添加样式*/
属性:属性值;
}
</style>
<body>
<p><a href="#demo1">跳转至demo1</p>
<p><a href="#demo2">跳转至demo2</p>
<p>请点击上面的链接,:target选择器会突然显示当前活动的HTML锚</p>
<p id="demo1">内容1</p>
<p id="demo2">内容2</p>
</body>
四、伪元素选择器
伪元素表示页面中一些特殊的并不真实存在的元素
伪元素选择器是针对CSS3中已经定义好的伪元素使用的选择器。
1、::before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容。其基本语法格式为:
<style type="text/css">
p::before
{
content:"文字"或"url()";
属性:属性值;
}
</style>
<body>
<p>内容</p>
</body>
在上述语法中,被选元素位于“:before”之前,“{}”中的content属性用来指定要插入的具体内容,该内容既可以为文本也可以为图片。
2、::after选择器
:after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同,必须配合content属性来指定要插入的具体内容。
<style type="text/css">
p::after
{
content:"文字"或"url()";
属性:属性值;
}
</style>
<body>
<p>内容</p>
</body>
::before和::after选择器必须设置content属性,不然伪元素是不会显示的。
3、::first-letter选择器
::first-letter选择器只能用于块级元素,用于设置附属元素第一个字母的样式。
4、::first-line选择器
::first-line选择器只能用于块级元素,用于设置附属元素表示第一行字母的样式。
5、::selection选择器
::section选择器匹配元素中被用户选中部分。
伪类选择器和伪元素选择器的区别:
① 虚实不同
伪类选择器是实的,伪类选择器并不会创建元素,它只是修改已有元素的样式。
伪元素选择器是虚的,当它添加子元素时,新建了一个元素,并为其添加样式,但这个元素并不存在dom树中。
② 表示不同:
使用单冒号(:)表示伪类元素。
CSS3规范中要求使用双冒号(::)表示伪元素。
五、链接伪类
定义超链接时,为了提高用户体验,网页设计者经常需要为超链接不同的状态指定不同的样式,使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在CSS3中,通过链接伪类可以实现不同的超链接样式。
所谓伪类,不是真正意义上的类,它的名称是由系统定义的,通常由标记名、类名、id名加英文":"构成。
超链接标记<a>
的伪类有4种:
a:link{CSS样式规则;} 未访问时超链接的状态
a:visited{CSS样式规则;} 访问后超链接的状态
a:hover{CSS样式规则;} 鼠标指针悬停时超链接的状态
a:active{CSS样式规则;} 鼠标单击不动时超链接的状态
<style type="text/css">
a:link,a:visted{ /*未访问时和访问后*/
属性:属性值;
text-decoration:none; /*清除超链接默认的样式*/
}
a:hover{ /*鼠标指针悬停时*/
属性:属性值;
}
a:active{ /*鼠标单击不动时*/
属性:属性值;
}
</style>
<body>
<a href="#">123</a> /*href="#"表示链接当前页面*/
</body>
除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)