html五种css选择器,五种css选择器的基础练习

CSS的三种选择器在其中我对标签、类、id三种选择器进行了详细的讲解 下面是我在复习之中，找到的一个css选择器的练习，其中除了刚说到的三种还讲到了后代/属性两选择器的特点；

CSS选择器

/* 为了看着方便给所有标签都加上边框，及设置一些默认的样式 */

body,input{font-size:18px;}

input{border: 2px solid green;}

div,span,p{border: 2px solid red;font-size:18px;}

span{border-color: blue;margin-right:10px;}

div,p{ width:350px;height:80px;padding:5px;}

/* ----- 1.标签名选择器练习 -----

将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/

span{/*通过元素名选中当前文本中所有span*/

/*设置背景颜色为#efbdef*/

background:#efbdef;

/*设置字体大小为22px*/

font-size:22px;

/*字体加粗*/

font-weight:border;

/*字体变细:lighter*/

}

/* ----- 2.类选择器练习 -----

(1)将所有的span(但是不包括div和p标签下的span)的背景颜色设置为#faf77b，边框改为2px solid cyan；

(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置

#ec0e7e；*/

.s1{/*.s1表示匹配所有的class值为s1的元素,点(.)后面跟的是class值*/

/*设置背景颜色为#faf77b*/

background:#faf77b;

/*设置边框为2px，且为青色*/

border:2px solid cyan;

}

.s2{

background:#5eff1e;

color:#ec0e7e;

}

/* ----- 3.id选择器练习 -----

用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/

#p1{/*选中id值为p1的元素*/

/*设置字体大小为24px*/

font-size:24px;

/*设置字体颜色为#a06649*/

color:#a06649;

/*设置首行缩进20px*/

text-indent:20px;

}

/* ----- 4.后代选择器练习 -----

为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/

p span{/*匹配所有p元素内部的span元素*/

font-size:18px;

color:red;

background:pink;

}

/* ----- 5.属性选择器 -----

为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/

input[type='text']{/*匹配所有的input元素并且type值为text的元素*/

background:#FF7CCC;

font-size:22px;

text-indent:15px;

}

div111

这是一个span

这是一个div

span111

span222

span333

ppp111

这是一个span

这是一个P元素

ppp222

这是一个span

这是一个P元素

如果你能停下脚步观看我的成果，Thanks！！