CSS3<选择器/背景/圆角/阴影>-优快云博客

本文详细介绍了CSS中各种选择器的应用，包括兄弟选择器、通配兄弟选择器、属性选择器、UI元素状态选择器及结构类选择器等，并探讨了CSS3中的圆角、盒子阴影等样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css选择器。

+ 兄弟选择器 xxx>xxx+xxx

	<style>
		.d1>.d2+div{
			color: red;
		}
	</style>
	//之匹配第一个挨着的
复制代码

通配兄弟选择器 xxx>xxx~xxx

	<style>
		.d1>.d2~div{
			color: red;
		}
	</style>
	//匹配之后的所有的div
复制代码

属性选择器

	<style>
		a[href]{
			color: red;
		}
		a[href='#']{
			color:blue
		}
		//还有包含~=，以xx开头^=，以xx结尾$，还有*和|..
	</style>

复制代码

UI元素状态

		input:enabled{
			background-color: yellow;
			/*可以被输入的输入框会变成黄色*/
		}
		input[readonly]{
			background-color: red;
			/*不可以被输入但是会提交到后端的会变成红色*/
		}
		input[disabled]{
			background-color: #ff6700;
			/*不可以输入不可以提交的变为橘色*/
		}


复制代码

结构类选择器

		li:first-child{
			color: red;
			/*选择其父类的一个元素*/
		}
		li:nth-child(3){
			background-color: red;
			/*选择其父类的第三个元素*/
		}
		li:nth(2n+1){
			/*选择其父类里所有li的奇数*/
		}
		li:nth(2n){
			/*选择其父类里所有li的偶数*/
		}
		/*n在里面代表的就是一个表达式。如果计算结果小于等于0，计算无效。*/
		li:nth(4n){
			/*选择所有4的倍数li*/
		}
		li:nth(-1n+5){
			/*选择前5个*/
		}
		li:nth-last-child(-1n+5){
			/*选择后五个*/
		}

复制代码

CSS3圆角

border-radius 可以指定最多四个(border-left-top-radius/border-right-top-radius/border-right-bottom-radius/border-left-bottom-radius)，如果是百分比就是相当于他本身，长方形时候圆角会不一样，不够圆滑。

.box{
	border-radius:10px;
	/*指的就是四个角都是10px的弧度。*/
	border-radius:10px 20px;
	/* 当只有两个值的时候值得就是左上右下，右上左下。两个对角线。*/
	border-radius:10px 20px 30px;
	/* 当只有三个值的时候指的就是左上，右上左下，右下。*/
}

复制代码