目录

CSS选择器分类—五大类：基本、复合、伪元素、伪类、属性选择器：

第一类：基本选择器

1.通用选择器

2.元素选择器

3.类选择器

4.id选择器

第二类：复合选择器

1.交集选择器

2.并集选择器

3.后代选择器

4.子元素选择器

5.相邻兄弟选择器

6.通用兄弟选择器

第三类：伪元素选择器

1.  ::first-line 选择器

2.  ::first-letter选择器

​3.  ::before 和::after 选择器

4.  ::selection选择器

第四类：伪类选择器

1.动态伪类选择器:

（1）:link、:visited、:hover、:active

（2）:focus焦点选择器

2.Ul伪类选择器:

（1）:enabled—可用，:disabled—禁用

（2）:checked伪类选择器（按钮、复选框、下拉框之类）

（3）:required和:optional选择器,必选和可选

（4）:default伪类选择器

（5）:valid和:invalid伪类选择器，合法和非法

（6）:in-range在输入范围内:out-of-range在输入范围外

（7）:read-only 和:read-write只读和可读

3.结构伪类选择器:

（1）:root根元素伪类选择器

（2）:empty选择器

（3）:first-child和:last-child选择器（子元素选择器）

（4）:only-child——父元素中的唯一子元素（子元素选择器）

（5）:only-of-type——父元素下唯一一个类型的子元素（子元素选择器）

（6）:first-of-type和:last-of-type（子元素选择器）

（7）:nth-child(3) ——第三个子元素

（8）:nth-last-child

（9）:nth-of-type和:nth-last-of-type

4.其他伪类选择器:target、:lang、:not

（1）:target 实现跳转，跳转到改行文字上，该行文字出现CSS样式

（2）:lang——语言

（3）:not（selecter）除……外

第五类：属性选择器

1.  [attribute] 选择器用于选取带有指定属性的元素

2.  [attribute=value]选择器用于选择带有指定值属性的元素

3.  [attribute~=value]选择器用于选取属性值中包含指定词汇的元素

4.  [attribute|=value]选择器用于选取带有以指定值开头的属性值的元素

5.  [attribute^=value]选择器匹配属性值中且以value开头的元素

6.  [attribute$=value]选择器用于选取属性值中且以value结尾的元素

7. [attribute*=value]选择器匹配属性值包含指定值的每个元素

CSS选择器分类—五大类：基本、复合、伪元素、伪类、属性选择器：

第一类：基本选择器

1.通用选择器

通用选择器*号：整篇格式一样。

例子04-1：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>滕王阁序</title><style type="text/css">*{padding: 10px;background-color:lavender;}</style></head><body><h2>滕王阁序</h2>   <p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。</p><p>十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p><p>穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。</p><p>呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</p><p>滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p>画栋朝飞南浦云，珠帘暮卷西山雨。</p><p>闲云潭影日悠悠，物换星移几度秋。</p><p>阁中帝子今何在？槛外长江空自流。</p><img src="tu1.jpg" width="80px"/><img src="tu2.jpg" width="80px"/><img src="tu3.jpg" width="80px"/><img src="tu4.jpg" width="80px"/></body>
</html>

2.元素选择器

例04-2：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>滕王阁序</title><style type="text/css">h2{text-align: center;  /*居中*/}p{text-indent: 2em;   /*首行缩进*/}span{color: red;padding: 0px;}img{width:80px;}</style></head><body><h2>滕王阁序</h2>  <p><span>豫章故郡,</span>洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。</p><p>十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p><p>穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。</p><p>呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</p><p>滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p>画栋朝飞南浦云，珠帘暮卷西山雨。</p><p>闲云潭影日悠悠，物换星移几度秋。</p><p>阁中帝子今何在？槛外长江空自流。</p><img src="tu1.jpg" width="80px"/><img src="tu2.jpg" width="80px"/><img src="tu3.jpg" width="80px"/><img src="tu4.jpg" width="80px"/></body>
</html>

3.类选择器

类选择器，用“.”开头。

4.id选择器

id选择器，在前面加“#”开头。

例04-3.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>滕王阁序</title><style type="text/css">*{padding: 10px;background-color: lightyellow;}h2{text-align: center;}span{color: blue;padding: 0px;}img{height:100px;}.slogan{  /*类选择器*/text-align: center;color:green;          }.content{ /*类选择器*/text-indent: 2em;     /*首行缩进2字符*/      }#shi{   /*id选择器*/color: red;              }</style></head><body><h2>滕王阁序</h2>  <p class="slogan">“文言文”</p><p class="content">豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。</p><p class="content">时维九月，序属三秋。<span id="shi">潦水尽而寒潭清，烟光凝而暮山紫。</span>俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。<span>落霞与孤鹜齐飞，秋水共长天一色。</span>渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。</p><p class="content">呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</p><p class="content">滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p class="content">画栋朝飞南浦云，珠帘暮卷西山雨。</p><p class="content">闲云潭影日悠悠，物换星移几度秋。</p><p class="content">阁中帝子今何在？槛外长江空自流。</p>     <img src="tu1.jpg" /><img src="tu2.jpg" /><img src="tu3.jpg" /></body>
</html>

第二类：复合选择器

1.交集选择器

语法：

element.class || element#id

{

css样式;

}

例05：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">span{color: blue;padding: 0px;}span.content{border: thin black solid;}        </style></head><body><p>云销雨霁，彩彻区明。<span class="content">落霞与孤鹜齐飞，秋水共长天一色。</span>渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦</p></body>
</html>

2.并集选择器

语法：

element1,element2,element3,...

{

css 样式;

}

h2,p,span{font-style: italic;/*斜体*/
}

3.后代选择器

后代选择器：可以选择不是直接子元素的选择器。选择elment1元素内部的element2元素。

elment1、elment2之间用空格隔开

语法：

element1 element2

{

css样式;

}

body .content{                     border: thin black solid;
}
/*注：body后面空一格，意为body里面所有的content（直接/非直接）都加上框。*/

例06：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>滕王阁序</title><style type="text/css">*{padding: 10px;background-color: lightyellow;}h2{text-align: center;}span{color: blue;padding: 0px;}img{height:100px;}.slogan{  /*类选择器*/text-align: center;color:green;          }.content{ /*类选择器*/text-indent: 2em;     /*首行缩进2字符*/      }#shi{   /*id选择器*/color: red;              }span{color: blue;padding: 0px;}   h2,p,span{/*并集选择器*/font-style: italic;}body .content{ /*后代选择器，注：body后面空一格， body里面所有的content（直接/非直接）都被框起来*/border: thin black solid;}</style></head><body><h2>滕王阁序</h2> <p class="slogan">“文言文”</p><p class="content">豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。</p><p class="content">时维九月，序属三秋。<span id="shi">潦水尽而寒潭清，烟光凝而暮山紫。</span>俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。<span class="content">落霞与孤鹜齐飞，秋水共长天一色。</span>渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。</p><p class="content">呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</p><p class="content">滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p class="content">画栋朝飞南浦云，珠帘暮卷西山雨。</p><p class="content">闲云潭影日悠悠，物换星移几度秋。</p><p class="content">阁中帝子今何在？槛外长江空自流。</p>      <img src="tu1.jpg" /><img src="tu2.jpg" /><img src="tu3.jpg" /></body>
</html>

4.子元素选择器

子元素选择器，选择element1元素中符合直接子元素的element2元素，只能匹配元素中的直接子元素，如果元素不是父元素的直接子元素，则不会被选择。

语法：

element1 > element2

{

css 样式;

}

body>.content{border: thin black solid;
}
/*像非直接子元素的就没有框了。（落霞与孤鹜齐飞.......）*/

例07：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>滕王阁序</title><style type="text/css">*{padding: 10px;background-color: lightyellow;}h2{text-align: center;}span{color: blue;padding: 0px;}img{height:100px;}.slogan{  /*类选择器*/text-align: center;color:green;          }.content{ /*类选择器*/text-indent: 2em;     /*首行缩进2字符*/      }#shi{   /*id选择器*/color: red;              }span{color: blue;padding: 0px;}h2,p,span{/*并集选择器*/font-style: italic;}body>.content{ /*直接子元素会被设置，像非直接子元素的就没有框了。（落霞与孤鹜齐飞.......）*/border: thin black solid;}</style></head><body><h2>滕王阁序</h2>   <p class="slogan">“文言文”</p><p class="content">豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。</p><p class="content">时维九月，序属三秋。<span id="shi">潦水尽而寒潭清，烟光凝而暮山紫。</span>俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。<span class="content">落霞与孤鹜齐飞，秋水共长天一色。</span>渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。</p><p class="content">呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</p><p class="content">滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p class="content">画栋朝飞南浦云，珠帘暮卷西山雨。</p><p class="content">闲云潭影日悠悠，物换星移几度秋。</p><p class="content">阁中帝子今何在？槛外长江空自流。</p>      <img src="tu1.jpg" /><img src="tu2.jpg" /><img src="tu3.jpg" /></body>
</html>

5.相邻兄弟选择器

相邻兄弟选择器，选择具有相同父元素且同级的element1相邻的element2 。即在element1后面紧挨着的element2会被匹配到。

语法：

element1 + element2

{

css样式;

}

.slogan+p{color: pink;
}
/*在slogan后面紧挨着的p，会被匹配到 */

例08：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>滕王阁序</title><style type="text/css">*{padding: 10px;background-color: lightyellow;}h2{text-align: center;}span{color: blue;padding: 0px;}img{height:100px;}.slogan{  /*类选择器*/text-align: center;color:green;          }.slogan+p{  /*相邻兄弟选择器*/color:pink;          }.content{ /*类选择器*/text-indent: 2em;     /*首行缩进2字符*/      }#shi{   /*id选择器*/color: red;              }span{color: blue;padding: 0px;}h2,p,span{/*并集选择器*/font-style: italic;}body>.content{ /*子元素选择器*/border: thin black solid;}</style></head><body><h2>滕王阁序</h2>    <p class="slogan">“文言文”</p><p class="content">豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。</p><p class="content">时维九月，序属三秋。<span id="shi">潦水尽而寒潭清，烟光凝而暮山紫。</span>俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。<span class="content">落霞与孤鹜齐飞，秋水共长天一色。</span>渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。</p><p class="content">呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</p><p class="content">滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p class="content">画栋朝飞南浦云，珠帘暮卷西山雨。</p><p class="content">闲云潭影日悠悠，物换星移几度秋。</p><p class="content">阁中帝子今何在？槛外长江空自流。</p>      <img src="tu1.jpg" /><img src="tu2.jpg" /><img src="tu3.jpg" /></body>
</html>

6.通用兄弟选择器

通用兄弟选择器，选择具有相同父元素且同级的element1之后的element2。注：通用兄弟选择器，选择具有相同父元素且同级的element1之后的element2。

语法：

element1 ~ element2

{

css样式;

}

.slogan~p{color: green;
}

例子09：slogan后面所有的p

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>滕王阁序</title><style type="text/css">*{padding: 10px;background-color: lightyellow;}h2{text-align: center;}span{color: blue;padding: 0px;}img{height:100px;}.slogan{  /*类选择器*/text-align: center;color:green;          }.slogan~p{  /*相邻兄弟选择器*/color:green;          }.content{ /*类选择器*/text-indent: 2em;     /*首行缩进2字符*/      }#shi{   /*id选择器*/color: red;              }span{color: blue;padding: 0px;}h2,p,span{/*并集选择器*/font-style: italic;}body>.content{ /*子元素选择器*/border: thin black solid;}</style></head><body><h2>滕王阁序</h2>    <p class="slogan">“文言文”</p><p class="content">豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。</p><p class="content">时维九月，序属三秋。<span id="shi">潦水尽而寒潭清，烟光凝而暮山紫。</span>俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。<span class="content">落霞与孤鹜齐飞，秋水共长天一色。</span>渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。</p><p class="content">呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</p><p class="content">滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p><p class="content">画栋朝飞南浦云，珠帘暮卷西山雨。</p><p class="content">闲云潭影日悠悠，物换星移几度秋。</p><p class="content">阁中帝子今何在？槛外长江空自流。</p>      <img src="tu1.jpg" /><img src="tu2.jpg" /><img src="tu3.jpg" /></body>
</html>

第三类：伪元素选择器

1.  ::first-line 选择器

::first-line 选择器用于选取指定选择器的首行。设置文本块第一行样式。只对块级元素第一行有用，对行内元素没有用。

语法：

element::first-line

{

CSS 样式

}

例子10-1：设置body，div块级元素的第一行，对a这种行内元素没用。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用::first-line选择器</title><style type="text/css">/*文本第一行样式*/::first-line{background-color: red;color: white;}</style></head><body><div>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</div><p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</p><a href="https://www.badu.com" target="_blank">百度</a></body>
</html>

p::first-line{}

p::first-line{

background-color: red;

color: white;

}

例10-2：p::first-line

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用::first-line选择器</title><style type="text/css">/*文本第一行样式*/p::first-line{background-color: red;color: white;}</style></head><body><div>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</div><p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</p><a href="https://www.badu.com" target="_blank">百度</a></body></html>

2.  ::first-letter选择器

::first-letter 选择器用于选取指定选择器的首字母。设置文本块第一个字符的样式。对块级元素有作用。请使用 content 属性来指定要插入的内容。

语法：

element::first-letter

{

CSS 样式

}

例子11-1：（::first-letter）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用::first-letter选择器</title><style type="text/css">/*设置文本块第一字符样式*/::first-letter{background-color: red;color:white;}</style></head><body><div>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</div><p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</p><a href="http://www.baidu.com" target="_blank">百度</a></body>
</html>

div::first-letter{ }

div::first-letter{

background-color: red;

color: white;

}

例子11-2：div::first-letter

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">/*设置文本块第一字符样式*/div::first-letter{background-color: red;color:white;}</style></head><body><div>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</div><p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</p><a href="http://www.baidu.com" target="_blank">百度</a></body>
</html>

3.  ::before 和::after 选择器

::before 选择器在被选元素的内容前面插入内容。

::after 选择器在被选元素的内容后面插入内容。

例子12-1：插入文字

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">/*在a元素前后插入文本*/a::before{content: "开头：";}a::after{content: "......结尾";}</style></head><body><div>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</div><p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</p><a href="http://www.baidu.com" target="_blank">百度</a></body></html>

例子12-2：插入图片

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">/*在a元素前插入图片，在后插入文本*/a::before{content: url(tu西瓜.jpg);}a::after{content: "......结尾";}</style></head><body><div>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</div><p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</p><a href="http://www.baidu.com" target="_blank">百度</a></body>
</html>

4.  ::selection选择器

设置后鼠标选中的会变色。

例子13：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">/*设置用户选中的部分文本样式*/::selection{background-color: red;color:white;}</style></head><body><div>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</div><p>豫章故郡，洪都新府。星bai分翼轸，地接衡庐。du襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。</p><a href="http://www.baidu.com" target="_blank">百度</a></body>
</html>

第四类：伪类选择器

1.动态伪类选择器:

请使用 :link选择器对指向未被访问页面的链接设置样式，:visited用于设置指向已访问页面的链接的样式，:hover选择器用于设置鼠标指针浮动到链接上时的样式。:active选择器设置当你点击链接时的样式。

设置时需要按顺序：link- visited- hover- active

（1）:link、:visited、:hover、:active

例子14-1：:link、:visited、:hover、:active设置链接

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*链接未访问*/a:link{background-color:pink;}/*链接被访问的时候*/a:visited{color: green;}/*鼠标悬停在链接上方的时候*/a:hover{color: red;}/*鼠标摁下链接的那一刻*/a:active{color: yellow;}</style></head><body><a href="https://www.baidu.com" target="_blank">百度 百度 百度</a></body>
</html>

例14-2：:hover、:active设置div

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态伪类选择器设置div</title><style type="text/css">div{background-color: red;color: white;padding: 25px;text-align: center;}/*d鼠标移到div元素上的样子*/div:hover {background-color: green;}/*设置当前元素被激活后的样子*/:active{background-color: yellow;}</style></head><body><div>来，把鼠标移过来。</div><p>点一下变黄</p><button>试试</button></body>
</html>

（2）:focus焦点选择器

例15：光标放在哪里，哪里就会变成设置的样子。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置当元素获得焦点时的样式*/input#boy:focus{background-color:lightblue;}input#girl:focus{ /*  #是id选择器*/background-color: pink;}</style></head><body><form><label>他的名字：</label><input type="text" name="name" id="boy" /><br><br><label>她的名字：</label><input type="text" name="name" id="girl" /></form></body>
</html>

2.Ul伪类选择器:

:enabled、:disabled、:checked、:required、:optional:default、:valid、:invalid、:in-range、:out-of-range:read-only、:read-write、:indeterminate。

（1）:enabled—可用，:disabled—禁用

:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。

:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。

例16：设置文本框样式，禁用的文本框无法选中。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>可以和禁用</title><style type="text/css">/*设置表单元素的可用和禁用*/:enabled{outline: 2px solid greenyellow;}:disabled{background-color: lightgray;}</style></head><body><form><p><label for="enabled">可用：</label><input type="text" name="enabled" /></p><p><label for="disabled">禁用：</label><input type="text" name="disabled" disabled /></p><button>可以按钮</button><button disabled>不可用按钮</button></form></body>
</html>

（2）:checked伪类选择器（按钮、复选框、下拉框之类）

:checked 选择器用于表示选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或select元素中的option HTML元素(“option”)。用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。

例子17-1：选中按钮或者复选框后，会按照CSS设置变大。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">:checked{height: 50px;width: 50px;}</style></head><body><form><input type="radio" name="gender" value="male" /><span>男人</span><br><input type="radio" name="gender" value="female" /><span>女人</span><br><hr> <!--水平线--><input type="checkbox" name="ftuit" value="sugarcane" /><span>甘蔗</span><br><input type="checkbox" name="ftuit" value="banana" /><span>香蕉</span><br><input type="checkbox" name="ftuit" value="egg" /><span>鸡蛋</span><br><input type="checkbox" name="ftuit" value="mango" /><span>芒果</span><br><input type="checkbox" name="ftuit" value="peach" /><span>水蜜桃</span><br></form></body>
</html>

例子17-2：

<style type="text/css">:checked+span{background-color: red;color: white;}
</style>

（3）:required和:optional选择器,必选和可选 

:required 选择器在表单元素是必填项时设置指定样式。:required 选择器只适用于表单元素: input, select 和 textarea。

:optional 选择器在表单元素是可选项时设置指定样式。:optional 选择器只适用于表单元素: input, select 和 textarea。表单元素中如果没有特别设置 required 属性即为 optional 属性。

例子18：设置按钮文本框样式，required属性的为必选，其余为可选，必选属性的文本框不填无法提交。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">   :required{outline: 3px solid red;}:optional{outline: 3px solid green;}</style></head><body><form><p><label for="required">必填：</label><input type="text" name="required" required>  <!--此处required功能是不填无法提交,提示“请填写此字段”。CSS只负责设置边框样式。--><p><label for="optional">可选：</label><input type="text" name="optianal" ></p><button type="submit">提交</button></form></body>
</html>

 

（4）:default伪类选择器

:default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。

:default 伪类选择器作用设计的作用是让用户在选择一组数据的时候，依然知道默认选项是什么，否则其他选项一多，选着选着就不知道默认提供的是哪个了，算是一种体验增强策略。作用不是很强烈，但是关键时刻却很有用。

:default 选择可用于以下元素：

  • <button>
  • <input type="checkbox">
  • <input type="radio">
  • <option>

举个例子，一个下拉框，可能有多个选项，我们默认会让某个 <option> 处于 selected 状态，此时这个 <option> 可以看成是处于默认状态的表单元素（例如下面示意代码的“选项4”），理论上可以应用 :default 伪类选择器。

例子19-1：下拉框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">option:default {color: red;}}</style></head><body><form><select multiple><option>选项1</option><option>选项2</option><option>选项3</option><option selected>选项4</option><option>选项5</option><option>选项6</option></select></form></body>
</html>

  

默认是选项4的，但当我们选择其他选项，选项4依旧标红，有助于我们知道原来的默认选项是什么。

例子19-1：checked为设置默认选择

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>input:default {box-shadow: 0 0 1px 1px green;}</style></head><body><form action=""><input type="radio" value="fake" name="same" /> 小田鱼<br><input type="radio" value="star" checked="checked" name="same" /> 小甲鱼<br><input type="checkbox" checked="checked" value="Bike"/> 我爱C语言<br><input type="checkbox" value="Car"/> 我爱Web<br><button type="submit">提交</button></form></body>
</html>

例子19-2：设置<button>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">:default{outline: 3px solid red;}</style></head><body><form><p><label for="required">必填：</label><input type="text" name="required" required></p><p><label for="optional">可选：</label><input type="text" name="optianal" ></p><button type="submit">提交</button></form></body>
</html>

（5）:valid和:invalid伪类选择器，合法和非法

例子：输入合法邮箱地址，边框为绿色，不合法边框为红色。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置输入的合法和非法*/input:valid{border:2px solid green;}input:invalid{border: 2px solid red;}</style></head><body><form><input type="email" placeholder="请输入您的邮箱" /><button type="submit">提交</button></form></body>
</html>

（6）:in-range在输入范围内:out-of-range在输入范围外

:in-range选择器用于标签的值在指定区间值时显示的样式。只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。

:out-of-range 选择器用于标签的值在指定区间之外时显示的样式。:out-of-range 选择器只作用于能指定区间之外值的元素，例如 input 元素中的 min 和 max 属性。

例子：值设置在0-99之间，显示绿色，超出这个值则显示红色。默认值66.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置用户输入“在范围内”与“不在范围内”这两种情况对应的CSS样式*/input:in-range{border:2px solid green;}input:out-of-range{border: 2px solid red;}</style></head><body><form><input type="number" min="0" max="99" value="66" /><button type="submit">提交</button></form></body>
</html>

  

（7）:read-only 和:read-write只读和可读

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置输入在“只读”和“可读可写”属性对应的样式*/input:-moz-read-only{    /*火狐浏览器不兼容，需要加上-moz- */background-color: pink;}input:-moz-read-write{background-color: lightblue;}input:read-only{background-color: pink;}input:read-write{background-color: lightblue;}</style></head><body><p>普通的input输入框：<input type="text"> </p><p>只读的input输入框：<input readonly type="text" /> </p></body>
</html>

只读的文本框选中不了。

3.结构伪类选择器:

:root、:nth-child、:nth-last-child、:nth-of-type、
:nth-last-of-type、:first-child、:last-child、:first-of-type:last-of-type、:only-child、:only-of-type、:empty

（1）:root根元素伪类选择器

:root 选择器匹配文档根元素。在 HTML 中，根元素始终是 html 元素。

例子：全部页面都是紫色的

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">:root{background-color: lavender; /*淡紫色*/}</style></head><body><p>为中华之崛起而读书！！！</p></body>
</html>

（2）:empty选择器

例子：设置空元素样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置空元素的样式*/:empty{width: 200px;height: 20px;background-color: lavender;  }       </style></head><body><p></p><p>不忘初心，牢记使命</p><p></p></body>
</html>

（3）:first-child和:last-child选择器（子元素选择器）

:first-child 选择器用于匹配父元素下第一个子元素。

比如:以下p:first-child就是设置body下的第一个<p>标签

<head>
        <style>
                p:first-child
                {
                        background-color:green;

}
        </style>

</head>

<body>

<p>这个段落P是其父元素（body）的首个子元素。</p>

<p>2</p>

<p>3</p>

</body>

例子：p的第一个子元素设置边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">html{background:url(tu4.jpg) no-repeat; /* no-repeat是针对背景图来说的。当你设置了no-repeat这个属性后，你的背景图将不会被重复，再换一种说法，你在网站上所看见的背景图就是你所增加的图， 不会出现平铺或重复的现象。*/padding: 50px; /*内边距*/}/*设置第一个作为子元素的p元素样式*/p:first-child{border: 5px solid red;}p:last-child{border: 5px solid blue;}.shezhi{font-size: 50px;color: green;}</style></head><body><p class="shezhi">四字真言:</p><p class="shezhi">1、<span>good</span>  好 </p><p class="shezhi">2、<span>good</span>  好 </p><p class="shezhi">3、<span>study</span>  学 </p><p class="shezhi">4、<span>learning</span>  习 </p></body>
</html>

图1：

图2：

图1是没有设置no-repeat，图2是设置了no-repeat。

no-repeat的作用：是针对背景图来说的。当你设置了no-repeat这个属性后，你的背景图将不会被重复，再换一种说法，你在网站上所看见的背景图就是你所增加的图， 不会出现平铺或重复的现象。

例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>p:first-child{background-color:green;}</style></head><body><p>这个段落是其父元素（body）的首个子元素。</p><h1>h1标题</h1><p>这个段落不是其父元素的首个子元素。</p><div><p>这个段落是其父元素（div）的首个子元素。</p><p>这个段落不是其父元素的首个子元素。</p></div></body>
</html>

（4）:only-child——父元素中的唯一子元素（子元素选择器）

:only-child 选择器匹配父元素下唯一子元素，父元素中的唯一子元素。

例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>鱼C-零基础入门学习Web（Html5+Css3）</title><style>p:only-child{color:red;}</style></head><body><div style="border:1px solid;width: 222px"><span>div1 中span</span><p>div1 中唯一一个段落。</p></div><br><div style="border:1px solid;width: 222px"><p>div2 中唯一一个段落。</p></div></body>
</html>

（5）:only-of-type——父元素下唯一一个类型的子元素（子元素选择器）

:only-of-type 选择器匹配父元素下唯一类型的子元素

例子26：

<strong><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>p:only-of-type{color:green;}</style></head><body><div style="border:1px solid;width: 222px"><span>div1 中span</span><p>div1 中唯一一个段落。</p></div><br><div style="border:1px solid;width: 222px"><p>div2 中唯一一个段落。</p></div></body>
</html>

（6）:first-of-type和:last-of-type（子元素选择器）

:first-of-type 选择器匹配父元素下相同类型的子元素中的第一个。

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p:first-of-type{border:2px solid green;}p:last-of-type{border:2px solid red;}</style></head><body><span>DEMO</span><p>i love html</p><p>i love css</p><p>i love js</p></body>
</html>

（7）:nth-child(3) ——第三个子元素

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置body 的第三个子元素样式*/p:nth-child(3){border: 2px solid green;}</style></head><body><p>四字真言:</p><p>1、<span>good</span>  好 </p><p>2、<span>good</span>  好 </p><p>3、<span>study</span>  学 </p><p>4、<span>learning</span>  习 </p></body>
</html>

（8）:nth-last-child

:nth-last-child(n)：选中某个元素，该元素必须是某个父元素下的倒数第n个子元素；

p:nth-last-child(n) ：选中p元素，且该p元素必须是某个父元素下的倒数第n个子元素

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置body 的第三个子元素样式*/p:nth-last-child(2){border: 2px solid green;}</style></head><body><p>四字真言:</p><p>1、<span>good</span>  好 </p><p>2、<span>good</span>  好 </p><p>3、<span>study</span>  学 </p><p>4、<span>learning</span>  习 </p></body>
</html>

（9）:nth-of-type和:nth-last-of-type

因为某些浏览器底下会生成几个脚本，所以会导致倒着数的时候从最底下的脚本开始数，如何避免上述问题，:nth-of-type和:nth-last-of-type可以。

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*设置body 的正数和倒数第1个子元素样式*/p:nth-of-type(1){border: 2px solid green;}p:nth-last-of-type(1){border: 2px solid red;}</style></head><body><p>四字真言:</p><p>1、<span>good</span>  好 </p><p>2、<span>good</span>  好 </p><p>3、<span>study</span>  学 </p><p>4、<span>learning</span>  习 </p></body>
</html>

4.其他伪类选择器:target、:lang、:not

（1）:target 实现跳转，跳转到改行文字上，该行文字出现CSS样式

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

例子：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>业内锚点</title><style>:target{border: 2px solid #D4D4D4;background-color: #e5eecc;}</style>
</head>
<body><h1>这是标题</h1><p><a href="#test1">跳转至内容 1</a></p><p><a href="#test2">跳转至内容 2</a></p><p><a href="#test3">跳转至内容 3</a></p><p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p><p id="test1"><b>内容 1...</b></p><p id="test2"><b>内容 2...</b></p><p id="test3"><b>内容 3...</b></p>
</body>
</html>

（2）:lang——语言

例子：为不同语言设置不同背景色

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>不同语言设置不同风格</title><style type="text/css">/*为不同语言设置不同背景色*/:lang(zh){background-color: red;}:lang(en){background-color: green;}</style></head><body><p lang="zh">我爱中国！</p><p lang="en">i love china.</p></body>
</html>

（3）:not（selecter）除……外

例子31：设置span样式，颜色为绿，not(span)即除了span之外的样式，颜色为红。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>否定选择器</title><style type="text/css">span{color: green;}:not(span){color: red;}</style></head><body><span>demo</span><p lang="zh">我爱中国！</p><p lang="en">i love china.</p></body>
</html>

第五类：属性选择器

1.  [attribute] 选择器用于选取带有指定属性的元素

语法：

[attribute]

{

CSS 样式

}

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a[target]{background-color:yellow;}</style></head><body><p>带有 target 属性的链接会得到黄色背景：</p><a href="http://www.baidu.com" target="_blank">百度</a><a href="http://mp.csdn.net">CSDN</a></body>
</html>

2.  [attribute=value]选择器用于选择带有指定值属性的元素

语法：

[attribute=value]

{

CSS 样式

}

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>[title=shezhi]{background-color:yellow;}</style></head><body><p>带有 title 属性且值为 shezhi 的链接会得到黄色背景：</p><a href="http://www.baidu.com" target="_blank" title="shezhi">百度</a><a href="http://mp.csdn.net">CSDN</a><a href="https://www.bilibili.com" title="shezhi">B站</a></body>
</html>

3.  [attribute~=value]选择器用于选取属性值中包含指定词汇的元素

语法：

[attribute~=value]

{

CSS 样式

}

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>[title~=learning]{border:5px solid green;}</style></head><body><p>title 属性中包含单词 "learning" 的图片会获得绿色边框.</p><img src="tu1.jpg" width="120" title="happy learning" /><img src="tu2.jpg" width="120" title="two cats" /></body>
</html>

4.  [attribute|=value]选择器用于选取带有以指定值开头的属性值的元素

该值必须是整个单词！！

选择 lang 属性值以 "en" 开头的元素，并设置其样式：

[lang|=en]
{
background-color:yellow;
}

注：该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>[class|=top]{background:yellow;}</style></head><body><p>class属性值以top开头的元素，设置背景色为黄色：</p><h1 class="top-header">Welcome</h1><p class="top-text">Hello world!</p><p class="content">Are you learning CSS?</p></body>
</html>

5.  [attribute^=value]选择器匹配属性值中且以value开头的元素

语法:

[attribute^=value]

{

CSS 样式

}

例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>[class^="test"]{width: 222px;background:pink;}</style></head><body><p>设置 class 属性值以 "test" 开头的所有 div 元素的背景色：</p><div class="first_test">第一个 div 元素。</div><div class="second">第二个 div 元素。</div><div class="test">第三个 div 元素。</div><p class="test">这是段落中的文本。</p></body>
</html>

6.  [attribute$=value]选择器用于选取属性值中且以value结尾的元素

[attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。

语法：

[attribute$=value]

{

CSS 样式

}

例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>[title$=learning]{border:5px solid green;}</style></head><body><p>title 属性中末尾包含单词 "learning" 的图片会获得绿色边框。</p><img src="tu1.jpg" width="150"  title="happy learning" /><img src="tu2.jpg" width="150"  title="two cats" /></body>
</html>

7. [attribute*=value]选择器匹配属性值包含指定值的每个元素

语法：

[attribute*=value]

{

CSS 样式

}

例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>鱼C-零基础入门学习Web（Html5+Css3）</title><style>div[class*="test"]{width: 222px;background:pink;}.second{background-color: lightblue;}</style></head><body><p>将class里面包含“test”的所有元素背景设置成粉红色，宽度设置为222px，将class的值是second的设置为浅蓝色背景：</p><div class="first_test">第一个div元素。</div><div class="second" >第二个div元素。</div><div class="test">第三个div元素。</div><div class="last_test"><p class="test">第四个div元素</p></div><p class="test">最后一个元素</p><!--可以发现，div有"test"，里面的p也有"test"时，按照p的格式来。--></body>
</html>

Web前端开发CSS学习笔记2—五大类选择器相关推荐

  1. Web前端 html css学习笔记（更新）

    HTML CSS学习笔记 2021/9/29 网页简介 HTML简介 第一个网页 自结束标签和注释 文档声明 进制 字符编码 完整的文档结构 2021/9/30 VScode安装及使用 实体 meta ...

  2. web前端开发怎么样学习？看这份web前端学习路线

    前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.它从网页制作演变而 ...

  3. 好程序员web前端分享Nodejs学习笔记之Stream模块

    好程序员web前端分享Nodejs学习笔记之Stream模块 一,开篇分析 流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...

  4. web前端开发——HTML学习

    WEB前端开发 W3C学习网站 MDN学习网站 HTML 从语义角度,描述页面结构 语言不区分大小写,特殊字符要求全小写 html5文件结构 快速编辑:Tab键 <!DOCTYPE html&g ...

  5. Web前端开发入门学习分享

    Web前端开发入门学习分享 1:如何开始学习Web前端 首先你需要学习html的各个标签,掌握其用法和规范,明白其作用. 开始学习css的使用,你先学习在html页面中为标签增加css样式,其次是将c ...

  6. 入门Web前端开发需要学习哪些技术？薪资高吗？

    [此文章转自乐字节] 今天来和大家讲讲Web前端开发需要学习什么?前端开发又需要用到哪些开发工具? 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学 ...

  7. web前端开发需要学习什么?需要哪些开发工具?

    web前端开发需要学习什么?需要哪些开发工具? web前端工程师其实在不同的公司,有不同的职能,但是称呼都是类似的 1.做网站设计.网页界面开发 2.做网页界面开发 3.做网页界面开发.前台数据绑定和 ...

  8. 学web前端开发和学习其他编程语言一样吗?

    前言: web前端是编程中门槛较低,较易入门的,对年龄和学历要求也不是特别高,但如果学历过低,年龄比较大,又完全没有基础,会在学习时感到吃力,另外也会因为用人公司对学历和年龄的限制很难找工作,因此学历 ...

  9. 入门web前端开发需要学习什么?

    随着互联网的发展,越来越多的人看好web前端开发,因此有很多人投入到web前端开发的学习中去,那么到底web前端开发学什么?今天分享一下关于web前端开发需要学习的内容知识. 第一,基础部分的学习 主 ...

  10. web前端开发入门学习线路图详解-2019升级版

    现如今,Web前端工程师已经成为各大互联网公司不可或缺的热门职位,从业者队伍日渐庞大,这其中不乏零基础学习者和转行人士.为了方便大家系统而全面的掌握前端基础知识,千锋小编特意整理了web前端开发入门学 ...

最新文章

  1. windows 域环境应用－－－VNC远程协助工具的使用
  2. hibernate之Configuration对象
  3. 无限循环的ViewPager
  4. 八、Linux 常用 Shell 命令，控制台的快捷键以及 Shell 编程（中）
  5. 笔记本内置扬声器三强PK
  6. 夸计算机老师的成语,夸赞老师的成语
  7. android没有界面app,Android离线打包 app处于原生界面 切换到桌面再点击app 原生界面被关闭...
  8. Linux中级之负载均衡（lvs,nginx,haproxy）、中间件
  9. (一)洞悉linux下的Netfilteriptables：什么是Netfilter？
  10. 路由器和交换机的作用及区别，不再为路由器的选择而烦恼
  11. ie主页被劫持怎么办 解决浏览器主页劫持方法
  12. 【吐血整理】数据库的完整性
  13. iOS 图片裁剪(用户头像裁剪)
  14. 让我们愉快的切割吧 - 4：如何在无特定间隔符下拆分字母和数字
  15. ccd坏点测试软件,如何检测CCDLCD坏点
  16. FaceNet使用简介
  17. selenium抓取斗鱼直播平台数据
  18. hBuilder调试
  19. 深度学习绘图模板.pptx
  20. 极客爱情 2.0.1| 从你的编程世界路过

热门文章

  1. 英语单词词性顺口溜_英语单词速记顺口溜背诵技巧
  2. 在Octane中提升渲染速度的技巧（第2部分）
  3. Tidabie Tidal Music 潮汐音乐下载转换器
  4. NNDL 实验六 卷积神经网络（4）ResNet18实现MNIST
  5. java转Js原生,Java到JavaScript的转换
  6. DVD-R、DVD+R以及DVD-RW和DVD+RW的功能区别
  7. zip压缩文件加密码以及Office文件打开需要密码
  8. 2018/9/27---高质量SCI论文撰写方法以及ESI引用经验交流 韩光洁教授（大连理工）
  9. 博士伦-SCI论文撰写培训
  10. 【机器翻译machine translation】