CSS3属性选择器_css3中att属性选择器设置颜色-CSDN博客

本文链接：https://blog.csdn.net/Fine9548/article/details/106650112

属性选择器

相较于CSS，CSS3中增加了三个属性选择器：[att*=val],[att^=val],[att$=val].

[att * =val]属性选择器
基本概念：如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。

<head>
	<meta charset="UTF-8">
	<style>
        [id*=section]{
            background: blue;
        }
	</style>
<head>
<body>
<div id="section1">section1</div>
</body>

[att^=val]属性选择器
基本概念：如果用att表示的属性的属性值的开头字符为val指定的字符的话，那么该元素使用这个值。

<head>
	<meta charset="UTF-8">
	<style>
        [id^=t]{
            background: blue;
        }
	</style>
<head>
<body>
<div id="ttsection">ttsection</div>
</body>

[att$=val]属性选择器
基本概念：如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。
PS.如果指定的字符为数字，那么需要在之前加一个" \ "以及离数字最近的一个字符（除了连接符为“_”时）

<head>
	<meta charset="UTF-8">
	<style>
        [id$=\n1]{
            background: blue;
        }
        [id$=\.2]{
            background: red;
        }
        [id$=_2]{
        /*也可以是[id$=\_2]*/
            background: pink;
        }
	</style>
<head>
<body>
<div id="section1">section1</div>
<div id="section1-1">section1</div>
<div id="section1-1-2">section1</div>
<div id="section1.2">section1</div>
<div id="section1_2">section1</div>
</body>

结构性伪类选择器

1、伪类选择器：CSS中已经定义好的选择器,不能随便取名

  常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active

2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器

CSS中有如下四种伪元素选择器：
1）first-line:为某个元素的第一行文字使用样式；
2）first-letter:为某个元素中的文字的首字母或第一个字使用样式；
3）before:在某个元素之前插入一些内容；
4）after: 在某个元素之后插入一些内容；