css3选择器高级部分

原创

陈业贵的博客 2021-11-16 15:52:56 博主文章分类：css系列（精通精通） ©著作权

文章标签 html css ide 属性选择器 css3 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者陈业贵的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

序选择器;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:first-child
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:first-child代表了父元素div的第一个子元素如果为p的话,设为红色.

css3选择器高级部分_css3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:first-of-type
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:first-of-type代表了给选中的是同级别中的第一个p设置颜色.

css3选择器高级部分_css_02

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:last-child
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:last-child代表了给子元素的最后一个设置颜色.也就是说必须有父子关系的.

css3选择器高级部分_css_03

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:last-of-type
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:last-of-type代表了同级别的最后一个p设置颜色.

css3选择器高级部分_属性选择器_04

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:nth-child(3)
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:nth-child(3)代表了同级别的第三个元素如果是p的话,设置颜色,

css3选择器高级部分_css_05

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:nth-of-type(3)
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:nth-of-type(3)选中的是同级别的第三个p设置颜色.

css3选择器高级部分_属性选择器_06

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:nth-last-child(2)
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:nth-last-child(2)选中的是同级别的倒数第二个如果为p设置颜色.

css3选择器高级部分_css_07

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:nth-last-of-type(2)
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
</body>
</html>

p:nth-last-of-type(2)代表了同级别的同类型的倒数第二个p设置颜色.

css3选择器高级部分_css_08

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:only-child
		{
			color: red;
		}
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
<div><p>666</p></div>
</body>
</html>

p:only-child代表了父元素中只有一个子元素p

css3选择器高级部分_ide_09

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		p:only-of-type
		{
			color: red;
		}
	</style>
</head>
<body>
<p>666</p>
</body>
</html>

p:only-of-type代表了只有一个p

css3选择器高级部分_html_10

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		.para:only-of-type
		{
			color: red;
		}
	</style>
</head>
<body>
<p class="para">我是段落1</p>
<div>
    <p class="para">我是段落2</p>
    <p class="para">我是段落2</p>
    <h1>我是标题</h1>
</div></body>
</html>

.para:only-of-type代表了在同级别中只有一个类型.para

css3选择器高级部分_css_11

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		p:nth-child(odd)
		{
			color: red;
		}
	</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

p:nth-child(odd)同级别中奇数的.设置颜色.

css3选择器高级部分_ide_12

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		p:nth-child(even)
		{
			color: red;
		}
	</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

p:nth-child(even)选中的是为偶数的.

css3选择器高级部分_ide_13

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		p:nth-of-type(odd)
		{
			color: red;
		}
	</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

p:nth-of-type(odd)代表了只能是类型为p的设置颜色.(奇数)

css3选择器高级部分_html_14

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		p:nth-of-type(even)
		{
			color: red;
		}
	</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

p:nth-of-type(even)代表只能是类型为p的偶数的设置颜色

css3选择器高级部分_html_15

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		 p:nth-child(2n+0){
            color: red;
        }
        p:nth-child(2n+1){
            color: blue;
        }
	</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

n是一个计数器, 从0开始递增
p:nth-child(2n+0)是02468红色.
p:nth-child(2n+1)是13579设置为蓝色.

css3选择器高级部分_css_16

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		 p:nth-child(3n+0){
            color: red;
        }
	</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

p:nth-child(3n+0)代表了3 6 n是一个计数器, 从0开始递增

css3选择器高级部分_css3_17

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-属性选择器上</title>
    <style>
        /*
        p[id]{
            color: red;
        }
        */
        p[class=cc]{
            color: blue;
        }
    </style>
</head>
<body>
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>

</body>
</html>

p[class=cc]代表了给p标签class为cc的都设置颜色.

css3选择器高级部分_html_18

1.什么是属性选择器?
作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type=password]{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-属性选择器下</title>
    <style>
        /*
        img[alt^=abc]{
            color: red;
        }
        */
        /*
        img[alt|=abc]{
            color: red;
        }
        img[alt$=abc]{
            color: blue;
        }
        */
        /*
        img[alt*=abc]{
            color: red;
        }
        */
        img[alt~=abc]{
            color: red;
        }
    </style>
</head>
<body>


<!--
<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">
-->

<img src="" alt="abcwwwmmm">
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">

</body>
</html>

img[alt~=abc]代表了~=代表了空格的其中有abc的

注意点:
[attribute|=value] 代表了value与其他内容是用-隔开的.
[attribute^=value] CSS3代表了开头是value就行，其他的不管
[attribute~=value] CSS2代表了被空格隔开的包含value的就行
[attribute*=value] CSS3代表了只要包含value就行了

css3选择器高级部分_css_19

通配符选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		        *{
            color: red;
        }
	</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
<a href="#">我是超链接</a>
</body>
</html>

css3选择器高级部分_css_20