复杂选择器

兄弟选择器

同级元素，叫兄弟
兄弟选择器只能往后找

相邻选择器
选择器+选择器{}
获取紧紧挨在某元素后面的兄弟元素
通用兄弟选择器
选择器~选择器{}
获取某元素后面所有符合要求的兄弟

使用场景
所有排除老大意外，其他兄弟都要写的样式

属性选择器

[attr]{}匹配有attr这个属性的元素
[attr1][attr2]{}匹配有attr1和attr2属性的元素
elem[attr]{} 匹配有attr属性的elem元素
[attr=val]{}匹配有attr属性并且值为val的元素
衍生出来的选择器有：elem[attr1][attr2]{} elem[attr1=val1][attr2=val2]{}
十分精确找到某个或某些元素

模糊属性值
[attr^=val] 匹配属性值，以val开头
[attr$=val] 匹配属性值，以val结尾
[attr*=val] 匹配属性值中有val
[attr~=val]匹配属性值中有val这个独立的单词

伪类选择器

目标伪类
匹配锚点被激活的状态:target{}
结构伪类
elem:first-child{ 匹配elem的父元素的第一个孩子,并且这个大哥还必须是elem} elem:last-child{} elem:nth-child(n){} n从1开始

01_ex 44的表格，400px40px
通过结构选择器
第一行背景色为#0ff 除了第一行，都为#f0f
最后一行背景色为#ff0
第三行第二列背景色为#f00 第三行除了第二列都为#ddd

<style>
	table{
	 width:400px;height:400px;
	 border:1px solid #000000;
	}
	td{
	 border:1px solid #000;
	}
	tr:not(:first-child){color:#0ff;}
	tr:last-child{color:#ff0;}
	tr:nth-child(3)>td:nth-child(2){
		background:#f00;
		}
</style>

:empty{ }匹配内部没有任何元素的标签
没有任何元素--------空格都不能有
:only-child{ }
匹配属于其父元素的唯一子元素
否定伪类
:not(seletor){} 符合seletor的元素，都不要

练习

<style>
div:empty{
	 width:200px;height:200px;
	 background:#ff0;
	}
	a:only-child{
	 color:#f00;
	}
	a:not(:only-child){color:#00f;}
	tr:nth-child(3) td:not(:nth-child(2)){background:#f00;}
	</style>
<body>
	<p>
		<a href="">111</a>
	</p>
	<p>
		<a href="">222</a>
		<a href="">333</a>
		<a href="">444</a>
	</p>
	<div></div>
</body>

伪元素选择器

:first-letter ::first-letter 匹配首字符
:first-line ::first-line 匹配首行
::selection 匹配用户选中的部分 (只能写背景色和字体颜色,对首字符无效)

内容生成

使用css代码，添加html的内容，叫做内容生成
::before 或者:before
在元素的内容区域的最前方，添加一个伪元素
我们可以设置这个元素的所有样式
但是，内容content:""只能添加文本或者图片
默认是行内元素，可以用display修改

::after 或者:after
在元素的内容区域的最后方，添加一个伪元素

练习

<style>
	#d1::before{
		content:"我说：";
		width:100px;height:100px;
		background:#0ff;
		border:2px solid #587576;
	 }
	#d2::after{
		content:"------蔡徐坤";
		display:block;
	}
	</style>
</head>
<body>
	<p id="d2">NBA形象大使</p>
	<p id="d1">我就是海王</p>
</body>

使用内容添加解决问题

外边距溢出

#parent:before{
content:"";
display:table;
}

在父元素内容区域的最前面，添加一个空的显示方式为table的元素

解决高度坍塌

#parent:after{
content:"";
display:block;
clear:both;
}

练习

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#parent{
	width:300px;height:300px;
	background:#006600;
	}
	#child{
	 width:100px;height:100px;
	 background:#cc9900;
	 margin-top:10px;
	}
	#parent{
	 content:"";
	 display:block;clear:both;
	}
	</style>
</head>
<body>
	<div id="parent">
		<div id="child"></div>
	</div>
</body>
</html>

真是敞亮

发布了20 篇原创文章 · 获赞 1 · 访问量 276

私信关注