WEB前端代码：css优先级、基本选择器、层级选择器、伪类选择器、属性选择器

最新推荐文章于 2025-05-26 19:11:15 发布

原创最新推荐文章于 2025-05-26 19:11:15 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WEB

Web 专栏收录该内容

80 篇文章

订阅专栏

该博客主要介绍了CSS相关知识。包括CSS优先级，如id、class、标签选择器的优先级顺序；还介绍了基本选择器、层级选择器、伪类选择器和属性选择器的具体类型和用法，如基本选择器中的:first-child等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、css优先级

1)id选择器
2)class选择器
3)标签选择器

<style type="text/css">
		
		#p-id{
			color: #f00;
		}
		.p-class{
			color: 0f0;
		}
		p{
			color: 00f;
		}
	</style>
	
	
</head>
<body>
	<p class="p-class" id="p-id">下雨了</p>
	
</body>

2、基本选择器

• :first-child第一个
• :first-letter首字母
• :first-line根据浏览器窗口大小的选择第一行
• :last-child最后一个
• :nth-child(2)第几个

p:first-child{
			color: #f00;
		}

3、层级选择器

• a,b祖先
• a b
• a>b 父子关系
• a+b 兄弟关系

	.div1+h1{
			color:#00f;
		}

4、伪类选择器

• :hover
• :focus
• ::selection

h1{
			cursor: pointer;
		}
		h1:hover{
			background: #ccc;
		}
	</style>
	
	
</head>
<body>
	<h1>好的</h1>
	<h1>好的</h1>
	<h1>好的</h1>
	<h1>好的</h1>
	<h1>好的</h1>

<style type="text/css">
		
		
		input:focus{
			outline-color:blue;
		}	
	</style>
	
	
</head>
<body>
	<form action="">
		<p>用户名:</p>
		<p><input type="text"></p>

		<p>密码:</p>
		<p><input type="text"></p>

		<p>
			<input type="submit" value="Ok">
		</p>
	</form>	
	
</body>

	p::selection{
			background:#f0f;
		}	
	</style>
</head>
<body>
	<h1>linux技术</h1>	
	<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
</body>

5、属性选择器

• [id]
• [id=use1]
• [name^=en]以什么开头
• [name~=linux]等于某个值
• [name$=en]以什么结尾
• [name*=en]属性含有部分内容

	<style type="text/css">
		h1[id][class]{
			background: #ccc;
		}
	</style>
</head>
</body>
	<h1 id="faaa">PHP</h1>
	<h1 id="faaaa" class="asdas">PHP</h1>
	<h1 id="adasdf">PHP</h1>
</body>

h1[id~=faaa]{
			background: #ccc;
		}

h1[id|=faaa]{
			background: #ccf;
		}

h1[id^=faaa]{
			background: #ccf;
		}
		以什么开头的