选择器用法规范

最新推荐文章于 2024-05-23 12:52:35 发布

༺๑༒๑༻

最新推荐文章于 2024-05-23 12:52:35 发布

阅读量205

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44371671/article/details/107327407

版权

选择器用法规范

分类
选择器符号

分类

id选择器

在CSS中前面加#，并填写id名称

类选择器

在CSS中前面加.，并填写class名称

属性选择器

在CSS中填写元素与属性，例如


*[title] {color:red;}
a[href] {color:red;}
a[href][title] {color:red;}
img[alt] {border: 5px solid red;}

伪类选择器

在CSS中填写id、class、元素，再填写伪类，列如


.a:hover{}

元素选择器

在CSS中填写元素

伪元素

在CSS中填写id、class、元素，再填写伪元素，例如

.a::after{}

选择器符号

相邻兄弟选择器（+）

只对相邻兄弟选择器有用，只能影响排在其之后的元素，之前的元素无效，且两选择器之间都是相同父亲选择器。例子


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>

<body>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
</body>
</html>

上述例子中h1中能影响h1下边的p

兄弟选择器（~）

只对该元素的后面的所有兄弟选择器有效，包括兄弟的后代元素


<!DOCTYPE html>
<html>
	<head>
		<title>第一个表单</title>
	</head>
	<style>
		.classA~span{
			color: red;
		}
	</style>
	<body>
		<span class="classA">
			
		</span>
		<span>
			123		
		</span>
		<span>
			123
			<span>
			123
			<span>
			123		
			<p>125</p>
		</span>
		</span>
		</span>
	</body>
</html>

上述例子中的所有数字都是红色的

子选择器（>）

只能选择作为某元素儿子元素的元素，不包括孙元素、曾孙元素等等等。

:first-child 选择器

选择第一个后代选择器
也有例外的例子


<!DOCTYPE html>
<html>
	<head>
		<title>第一个表单</title>
	</head>
	<style>
		li:first-child
		{
		background:yellow;
		}

	</style>
	<body>
		<ol>
  <p>测试</p>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>

	</body>
</html>

上述例子中测试不是黄色的

:last-child选择器

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
只能选取最后一个相同的选择器。
提示：p:last-child 等同于 p:nth-last-child(1)

:nth-child() 选择器

该选择器选取父元素的第 N 个子元素，与类型无关。


<!DOCTYPE html>
<html>
	<head>
		<title>第一个表单</title>
	</head>
	<style>
		p:nth-child(2)
		{
			background:#ff0000;
		}


	</style>
	<body>
		<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<h1><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</h1>

</body>
	</body>
</html>

上述例子中的数字是2，第一个段落为红色；数字为一，没有效果；数字为3，第二个段落为红色；数字为6，无效果。所以只能控制相同选择器的样式。

:nth-of-type(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式（使用公式时，例子为隔行换色）

:nth-last-child() 选择器

与前面的 :nth-child() 选择器相似，不过是倒着数的。

༺๑༒๑༻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器用法规范

选择器用法规范分类id选择器类选择器属性选择器伪类选择器元素选择器伪元素选择器符号相邻兄弟选择器（+）兄弟选择器（~）子选择器（>）:first-child 选择器:last-child选择器分类id选择器在CSS中前面加#，并填写id名称类选择器在CSS中前面加.，并填写class名称属性选择器在CSS中填写元素与属性，例如*[title] {color:red;}a[href] {color:red;}a[href][title] {color:red;}img[alt]
复制链接

扫一扫