id选择器、类选择器、属性选择器

在网页编辑时，通常要对样式进行各种设置。我们借助CSS样式设计中的选择器，就能很好很方便的对它们进行管理和设置了。

今天，跟大家分享一下几个常用的选择器：id选择器、类选择器、属性选择器。

 

id选择器：为标有特定“id”的html元素来指定特定的样式，以“#”来定义。

例如：我们为<h1>标签中的元素设置颜色为绿色。

<style>
#green{
color: green;
}
</style>
<h1 id="green">我是绿色的</h1>
<h2 id="no"> 我没有被设置，我不是绿色的</h2>

 

类选择器：为标有特定“class”的html元素来指定特定的样式，以“.”来定义。

例如：我们让<h1>中的内容居中。

 

<style>
.center{
text-align: center;
}
</style>

<h1 class="center">我是居中的</h1>
<h2 class="no">我没有被设置，我不是居中的</h2>

 

 

属性选择器：为具有指定属性的html元素设置样式。

例如：我们为具有“name”属性的元素设置其颜色为红色。

 

<style>
[name]{color:red;}
</style>

<table>
<tr>
<td><input type="text" name="input" value="hello,我是红色的"></td>
</tr>
</table>

 

 

如果用到时需要再具体一点的话，我们就可以像下面这样：

例如：为具有“type=text”属性的元素设置其颜色为红色，为具有“type=button”属性的元素设置其颜色为绿色。

 

<style>
input[type="text"]{
color:red;
}
input[type="button"]{
color: green;
}
</style>

<table>
<tr>
<td><input type="text" value="我是红色"></td>
<td><input type="button" value="我是绿色"></td>
</tr>
</table>

 

 

这些都是最简单最基本的，仅供菜鸟参考。

如果你直接复制我的代码，却测试不了的话……

哈哈哈，那可能就是因为我的代码是直接写在博客的文本编辑框里，你复制到你的代码编辑器中，可能存在格式问题，而你的编辑器无法识别，这时候，你最好不要偷懒，自己重新打一遍，就能测试啦。

个人见解，如有不足，请各位多多指教，我们共同学习，共同进步。

 

【小主，觉得有用请打赏哦！多多少少没关系，一分也是对我的支持和鼓励。谢谢！】