css中常用的选择器(一)

最新推荐文章于 2024-10-23 09:17:57 发布

原创最新推荐文章于 2024-10-23 09:17:57 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了CSS中的四种常用选择器：类型选择器、类选择器、ID选择器及其使用方法，并对比了它们之间的优先级。

css中常用的选择器（选择器就是指定css要作用的标签）

1. 类型选择器，或者说是html标签选择器

格式：类型名（标签名）{ 属性名：属性值;... }

示例：

div{
       font-size:24px;
       background-color:#FFBF0;
       color:#0F0;
}

2.类选择器

格式一：类.className { 属性名：属性值;... }

格式二：.className { 属性名：属性值;... }

示例：

<html>
<head>
<style type="text/css">
div {
	font-size:18px;
}

/*
类选择器的两种形式
1. 带限定
2. 不带限定
*/
/*
适用div中的类名为classSelector的标签
使用场景：相同标签设置不同样式，用class区分
*/
div.classSelector {
	font-size:24px;
}
/*
适用所有类名为classSelector的标签
使用场景：不同标签设置相同样式用class进行统一定义
*/
.classSelector {
	font-size:10px;
}
</style>
</head>
    
<body>
  	<div>选择器</div>
    <div class="classSelector">限定类选择器</div>
    <p class="classSelector">类选择器</p>
</body>
</html>

3. ID选择器

格式：#id { 属性名：属性值;... }

示例：

<html>
<head>
<style type="text/css">

/*类型选择器(标签选择器)*/
ul {
	font-size:24px;
}
/*id选择器*/
#idselector{
	font-size:16px;
}
</style>
</head>

<body>
	<ul id="idselector">---ul1---</ul>
   	<ul>---ul2---</ul>
   	<ul>---ul3---</ul>
    <ul>---ul4---</ul>
</body>
</html>