#今日说码栏目#第四集各类选择器

常用选择器

1、元素选择器

作用：选中对应的标签

语法：标签名{}

例如：h1{ },h3{ },p{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>元素选择器</title><link rel="stylesheet" href="./测试.css"><style>h1{color: brown;}</style></head><body><div><h1>将进酒</h1></div></body>
</html>

2、id选择器

作用：选中对应的id属性值的内容,id属性值不能复用

语法：#id属性值{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>id选择器</title><link rel="stylesheet" href="./测试.css" /><style>#title {background-color: cyan;}</style></head><body><div id="title"><h1>将进酒</h1></div></body>
</html>

3、class选择器

作用：选中对应的class属性值的内容，可以复用属性值

语法：.class属性值 { }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>class选择器</title><link rel="stylesheet" href="./测试.css" /><style>.title {background-color: rgb(231, 203, 19);}</style></head><body><div class="title"><h1>将进酒</h1></div></body>
</html>

4、通配选择器

作用：通配选择器一般情况下，用来消除根元素(html)的margin、padding的默认值。

作用范围：作用于网页界面，作用于一面网页的所有元素。

语法：*{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>通配选择器</title><link rel="stylesheet" href="./测试.css" /><style>* {margin: 0;padding: 0;}</style></head><body><div class="title"><h1>将进酒</h1></div></body>
</html>

复合选择器

1、交集选择器

作用：选中符合多个选择器条件的内容

语法：选择器1选择器2选择器3···{ }

例如：div.red{},#div2.red{ }

注意：如果选择器中有元素选择器，必须把元素选择器放在前面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>交集选择器</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求：将class为red的诗句变为红色，同时将class为red的div字体变为24px */.red {color: red;}/* class为red的元素有两个，但这时class为red并且元素是div的只有一个，交集选择器便是增加了筛选条件 */div.red {font-size: 24px;}</style></head><body><p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p><div class="red">抬望眼，仰天长啸，壮怀激烈。</div></body>
</html>

2、并集选择器

作用：同时选中多个选择器，赋予这些选择器元素相同的CSS样式。

语法：选择器1,选择器2,选择器3····{ }

例如：.red,#p2,h1{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>并集选择器</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求：将h1,h3,class为third,id为fourth的元素中的字体颜色变为红色*/h1,h3,.third,#fourth {color: red;}</style></head><body><h1>满江红·写怀</h1><h3>岳飞·宋</h3><div class="third">怒发冲冠，凭栏处、潇潇雨歇。</div><div id="fourth">抬望眼，仰天长啸，壮怀激烈。</div></body>
</html>

关系选择器

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>关系选择器-子元素选择器</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求：选中class名为son的语句，将其字体颜色变为红色*/.parent>.son {color: red;}</style></head><body><div class="parent"><div class="son">满江红·写怀</h1></div></body>
</html>

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>关系选择器-后代选择器</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求三：将所有的span中的字，更改为黄色 */#school span{color: yellow;}</style></head><body><div id="school">学校<p class="p1">前端<span>web2208 </span><span>web2209</span></p><p class="p2">后端<span>java2214</span><span>java2215</span></p><p>设计</p></div></div></body>
</html>

3、兄弟选择器--选择指定元素的下一个兄弟元素

作用：通过指定元素选中下一个兄弟元素

语法：兄+弟{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>关系选择器-兄弟选择器-选中该元素下一个兄弟元素</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求：将"贝吉塔"三个字，更改为黄色 */#first+li{color: yellow;}</style></head><body><div id="longzhu"><ul><li id="first">孙悟空</li><li >贝吉塔</li><li>特南克斯</li><li>弗利沙</li></ul></div></div></body>
</html>

4、兄弟们选择器--选择下面所有的兄弟(前面指定的这个元素，不会被选中)

语法：兄～弟弟们{ }

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>关系选择器-兄弟们选择器-选择指定元素后面所有的兄弟元素</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求：将"孙悟空"后面的三个人物姓名，字体更改为黄色 */#first~li{color: yellow;}</style></head><body><div id="longzhu"><ul><li id="first">孙悟空</li><li >贝吉塔</li><li>特南克斯</li><li>弗利沙</li></ul></div></div></body>
</html>

属性选择器

1、属性选择器

语法：[属性名] { } 选择含有指定属性的元素

[属性名=属性值]{ } 选择含有指定属性和属性值的元素

[属性名^=属性值]{ } 选择属性值以指定值开头的元素

[属性名$=属性值]{ } 选择属性值以指定值结尾的元素

[属性名*=属性值]{ } 选择属性值含有某值的元素

需求一：有title属性名的p标签,将其中的字体颜色变为橘红色；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性选择器-语法一</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求一：有title属性名的p标签,将其中的字体颜色变为橘红色 */p[title] {color: orangered;}</style></head><body><p>种豆南山下</p><p>草盛豆苗稀</p><p>晨兴理荒秽</p><p title="abc">带月荷锄归</p><p title="abcda">道狭草木长</p><p title="tukbcda">夕露沾我衣</p><div title="abc">衣沾不足惜</div><p class="abc">但使愿无违</p></body>
</html>

需求二：选中属性名为title,属性值为abc，字体颜色变为蓝色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性选择器-语法二</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求二：选中属性名为title,属性值为abc，字体颜色变为蓝色 */[title=abc]{color: blue;}</style></head><body><p>种豆南山下</p><p>草盛豆苗稀</p><p class="ybm">晨兴理荒秽</p><p title="abc">带月荷锄归</p><p title="abcda">道狭草木长</p><p title="tukbcda">夕露沾我衣</p><div title="abc">衣沾不足惜</div><p class="abc">但使愿无违</p></body>
</html>

需求三：选中属性值以"abc"开头的那一段元素，改变其字体大小为32px

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性选择器-语法三</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求三：选中属性值以"abc"开头的那一段元素，改变其字体大小为32px */[title^='abc'] {font-size: 32px;}</style></head><body><p>种豆南山下</p><p>草盛豆苗稀</p><p class="ybm">晨兴理荒秽</p><p title="abc">带月荷锄归</p><p title="abcda">道狭草木长</p><p title="tukbcda">夕露沾我衣</p><div title="abc">衣沾不足惜</div><p class="abc">但使愿无违</p></body>
</html>

需求四：选中属性名为title且属性值以"da"结尾的那一段元素，改变其字体颜色为紫色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性选择器-语法四</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求四：选中属性名为title且属性值以"da"结尾的那一段元素，改变其字体颜色为紫色 */[title$='da'] {color: rgb(178, 9, 239);}</style></head><body><p>种豆南山下</p><p>草盛豆苗稀</p><p class="ybm">晨兴理荒秽</p><p title="abc">带月荷锄归</p><p title="abcda">道狭草木长</p><p title="tukbcda">夕露沾我衣</p><div title="abc">衣沾不足惜</div><p class="abc">但使愿无违</p></body>
</html>

需求五：选中属性名为title且属性值中含有"b"结尾的那一段元素，改变其字体颜色为黄色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性选择器-语法五</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求五：选中属性名为title且属性值中含有"b"结尾的那一段元素，改变其字体颜色为黄色 */[class*='b'] {color: yellow;}</style></head><body><p>种豆南山下</p><p>草盛豆苗稀</p><p class="ybm">晨兴理荒秽</p><p title="abc">带月荷锄归</p><p title="abcda">道狭草木长</p><p title="tukbcda">夕露沾我衣</p><div title="abc">衣沾不足惜</div><p class="abc">但使愿无违</p></body>
</html>

伪类选择器

1、伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态

-比如：第一个元素，被点击的元素，鼠标移入的元素

-特点：一般请情况下，使用：开头

①、 :first-child 选中第一个子元素

②、 :last-child 选中最后一个子元素

③、 :nth-child() 选中选中第n个子元素

-特殊值： n 选中所有的子元素

2n或even 选中偶数

2n+1或odd 选中奇数

-（以上这些伪类都是根据所有的子元素进行排序）

①、:first-of-type 选中第一个子元素

②、:last-of-type 选中最后一个子元素

③、:nth-of-type() 选中第n个子元素

(功能跟上面相似，不同的是，这是在同类型的子元素中去选择）

2、否定伪类类名:not( ) 如：li:not( )

作用： -将符合条件的元素从选择器中去除，选中剩下的所有的元素

需求一：将ul里的第一个li一直设置为红色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器- :first-of-type</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求一：将ul里的第一个li一直设置为红色*/li:first-of-type {color: red;}</style></head><body><h1>沁园春·雪</h1><ul><span>测试</span><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>北国风光，千里冰封，万里雪飘。</li><li>山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>

需求二：将ul里的最后一个元素一直设置为橙色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器- :last-child</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求二：将ul里的最后一个元素一直设置为橙色*/li:last-child {color: rgb(254, 110, 7);}</style></head><body><h1>沁园春·雪</h1><ul><span>测试</span><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>北国风光，千里冰封，万里雪飘。</li><li>山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>

需求三：将ul里的偶数个元素设置为黄色(以ul里面所有的元素为基准)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器-:nth-child(even)</title><link rel="stylesheet" href="./测试.css"/><style>/* 需求三：将ul里的偶数个元素设置为黄色(以ul里面所有的元素为基准) */li:nth-child(even) {color: yellow;}</style></head><body><h1>沁园春·雪</h1><ul><span>测试</span><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>北国风光，千里冰封，万里雪飘。</li><li>山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>

需求四：除了第三个li元素，其他元素全部设置为紫色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器-:nth-child(even)</title><link rel="stylesheet" href="./测试.css"/><style>/* 需求四：除了第三个li元素，其他元素全部设置为紫色 */li:not(.third) {color: rgb(137, 59, 246);}</style></head><body><h1>沁园春·雪</h1><ul><span>测试</span><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>北国风光，千里冰封，万里雪飘。</li><li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>

需求五：将第四个li元素一直设置为蓝色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器-:nth-of-type()</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求五：将第四个li元素一直设置为蓝色 */li:nth-of-type(4) {color: blue;}</style></head><body><h1>沁园春·雪</h1><ul><span>测试</span><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>北国风光，千里冰封，万里雪飘。</li><li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>

需求六：选中所有元素,将其元素设置为粉色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器-:nth-child(n)</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求六：选中所有元素,将其元素设置为粉色 */ul:nth-child(n){color: pink;}</style></head><body><h1>沁园春·雪</h1><ul><span>测试</span><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>北国风光，千里冰封，万里雪飘。</li><li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>

需求七：选中li中的奇数元素,将其元素设置为粉色(以ul中的li所有的元素为基准)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器-:nth-of-type(odd)</title><link rel="stylesheet" href="./测试.css" /><style>/* 需求七：选中li中的奇数元素,将其元素设置为粉色(以ul中的li所有的元素为基准)*/li:nth-of-type(odd) {color: pink;}</style></head><body><h1>沁园春·雪</h1><ul><span>测试</span><li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li><li>北国风光，千里冰封，万里雪飘。</li><li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li><li>须晴日，看红装素裹，分外妖娆。</li><li>江山如此多娇，引无数英雄竞折腰。</li><li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li><li>一代天骄，成吉思汗，只识弯弓射大雕。</li></ul></body>
</html>