3-选择器
前言：
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
1、标签名选择器
根据标签（元素）的名称来选择指定名称的标签进行样式的修饰！
格式：标签名/元素名{若干css属性...}，代码示例：
1 <head>
2 <style type="text/css">
3 span{/* 选中当前html中所有的span元素 */
4 border:2px solid green;
5 font-size:30px;
6 font-weight:bolder;
7 }
8 </style>
9 </head>
2、class选择器
通过标签上通用的属性class，为标签指定所属的类（组），所有class值相同的元素则为一组。可以通过class属性值选中这一组的元素，为这一组的元素统一设置样式。
格式：.class值{若干css属性...}，代码示例：
html代码：
1 <span class="s1 s2">我是span1</span>
2 <span class="s1">我是span2</span>
3 <span class="s1">我是span3</span>
1 <style>
2 .s1{/* 选中所有class值为s1的元素 */
3 background: #faf77b;
4 border:2px solid cyan;
5 }
6 .s2{/* 选中所有class值为s2的元素 */
7 background: #5eff1e;
8 }
9 </style>
另外，一个标签/元素可以设置多个class值，表示当前元素同时属于多个分组，例如：
<span class="s1 s2">我是span1</span>
多个class设置的样式会同时作用在当前元素上，如果多个class设置的样式出现冲突（例如：s1和s2同时设置背景，而且样色值还不相同），代码如上，s2的样式会覆盖s1的样式（样色值）。
3、id选择器
通过标签上通用的属性id，为标签设置一个唯一的标识（id的值在整个html中应该是独一无二的），因此可以通过id值唯一的选中一个元素。
格式：#id值{若干css属性...}
1 <style>
2 #p1{
3 border:2px solid red;
4 font-size:24px;
5 color:#a06649;
6 text-indent:20px;
7 }
8 </style>
1 <body>
2 <p id="p1">
3 ppp111
4 <span>这是p里面的span</span>
5 </p>
6 </body>
4、后代选择器
选中父元素内部的指定的后代元素
格式：选择器 后代元素{若干css属性...}
代码示例：
1 <style> 2 p span{/* 选中父元素内部的所有span元素 */ 3 font-size: 18px; 4 color:red; 5 background: pink; 6 } 7 </style>
<p> ppp111 <span>这是p里面的span</span> </p>
5、属性选择器
根据选择器加上元素的属性条件选中元素进行修饰！
格式：选择器[属性条件1]选择器[属性条件2]...{若干css属性...}
代码示例：
1 <style> 2 /* 为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小为22px、首行文本缩进15px； */ 3 input[type="text"][name="email"]{/* 选中所有的input并且type属性的值为text的元素 */ 4 background: #FF7CCC; 5 font-size:22px; 6 text-indent: 15px; 7 } 8 </style>
1 <input type="text" value="用户名"> 2 <input type="text" name="email" value="abc123@163.com" /> <br/> 3 <input type="button" value="按钮1"> 4 <input type="button" value="按钮2">
--------------------------我是结束线----------------------------------
浙公网安备 33010602011771号