css之子元素选择器、属性选择器、伪元素选择器

本文链接：https://blog.csdn.net/weixin_44046450/article/details/94056199

css之子元素选择器、属性选择器、伪元素选择器

**子元素选择器：**这个选择器是只能选择自己的下一代，不能是下一代的下一代的下一代…。
代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		.menu li { 
			color: red;
		}
		.menu > li {
			color: pink;
		}
        </style>
    </head>
    <body>
    <ul class="menu">
    	<li>一级菜单
    		<ul>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    		</ul>
    	</li>
    	<li>一级菜单
    		<ul>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    		</ul>
    	</li>
    	<li>一级菜单
    		<ul>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    			<li>二级菜单</li>
    		</ul>
    	</li>
    </ul>
    </body>
</html>

效果如下：
在这里插入图片描述
**属性选择器：*就是指通过标签里面的属性来控制标签的样式。a[属性]，input[属性=？？]，div[class^=sdks]:指的是只要是开头是sdks就可以被控制样式了，div[class$=fsas]:指的是只要是fsas结尾的就可以被控制样式了，div[class=jkjh]:指的是只要有jkjh就可以被控制样式了。
代码如下：

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
			a[title] {   /* 属性选择器用中括号 来表示 */
				color: red;
			}
			input[type=text] {
				color: red;
			}
			input[type=submit] {
				color: blue;
			}
			input[type=reset] {
				color: green;
			}
			div[class^=sdks]{
				color: purple;
			}
			div[class$=fsas]{
				color: goldenrod;
			}
			div[class*=jkjh]{
				color: skyblue;
			}
        </style>
    </head>
    <body>
    <a href="#" title="We are a group of climbers.">我们是勇于攀爬的人</a>
    <a href="#" title="We are a group of climbers.">我们是勇于攀爬的人</a>
    <a href="#">我们是勇于攀爬的人</a>
    <a href="#">我们是勇于攀爬的人</a>
    <a href="#">我们是勇于攀爬的人</a>
	<input type="text" value="我们是勇于攀爬的人">
	<input type="text" value="我们是勇于攀爬的人">
	<input type="text" value="我们是勇于攀爬的人">
	<input type="submit">
	<input type="submit">
	<input type="submit">
	<input type="reset">
	<input type="reset">
	<input type="reset">
	<div class="sdkskjkk">只要是前面是sdks就可以被控制样式。</div>
	<div class="kssdksks">如果前面不是以sdks就不可以被控制。</div>
	<div class="hjhfsas">只要后面是fsas就可以被控制。</div>
	<div class="fsasjhjhjh">如果后面不是fsas的话，就不可以被控制。</div>
	<div class="sdajkjhfsd">只要拥有jkjh就可以被控制。</div>
	<div class="lglkflddfdjkjh">只要拥有jkjh就可以被控制。</div>
	<div class="jkjhlglkflddfd">只要拥有jkjh就可以被控制。</div>
    </body>
</html>

效果如下：
在这里插入图片描述
**伪类选择器：**通过伪类选择器可以进行对标签里面里面特定一个字或者一行进行样式的修改，这样就不会把标签里面所有的样式修改。例如我们已经通过样式改变了一个标签里面的样式，但是又想把第一个字或者第一行字修改成别的样式，那么我们就要使用伪类选择器。
p::first-letter：代表第一个字。
p::first-line：代表第一行。
p::selection：代表的是当我们选中文字的文字的时候，样式会改变，改变的只能是背景颜色和文字颜色。
div::before：代表的是在盒子div 的内部前面插入。
div::after:代表的是在盒子div的内部后面插入。
代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
			p::first-letter {  
				color: pink;
				font-size: 50px;
			}
			p::first-line {   
				color: green;

			}
			p::selection {  
				color: pink;
				font-size: 50px;
				background-color: blue;
			}
			div::before {
				content: "唐";
				color:red;
			}
			div::after {
				content: "唐";
				color:red;
			}
        </style>
    </head>
    <body>
   	<h1>琵琶行</h1>
	<div>白居易</div>
    <p> 浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
		忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。
		千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。
		低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。
		嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。
		别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。
		东船西舫悄无言，唯见江心秋月白。沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。
		十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。
		钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。
		门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。
		夜深忽梦少年事，梦啼妆泪红阑干。我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！
		我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。
		其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。
		今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。
		凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。
	</p>
    </body>
</html>