#今日说码栏目#第六集 CSS选择器

常用选择器:

" * "其含义就是所有的元素

1、通配选择器(为所有的元素进行设置)

一般的用法是消除块元素的外边距和内边距 

*{

margin: 0px;

padding: 0px;

}

2、属性选择器:

p[id] { 属性:属性值;

属性:属性值;

属性:属性值;

}

 1:属性选择器

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

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

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

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

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

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>Document</title>
		<style>
			div {
				background-color: chocolate;
			}
		</style>
	</head>
	<body>
		<div>AAAAAAAAAA</div>
	</body>
</html>

4、id选择器

语法:#id属性值{}

注意:①id属性名不能数字开头;

           ②不建议使用汉字;

           ③不能重复;

只要标签里面有id的,就会给你选中

5、class选择器(通配选择器)

语法:.class{属性:属性值;

属性:属性值;

属性:属性值;

}

6、复合选择器

div.h1{ 属性:属性值;

属性:属性值;

属性:属性值;

}

同时使用两个选择器来选中对应的语句

7、交集选择器(功能如其名)

语法:

选择器1选择器2选择器3{属性:属性值;

属性:属性值;

属性:属性值;

}

8、并集选择器(功能如其名)

语法:

h1,h3{ 属性:属性值;

属性:属性值;

属性:属性值;

}

9、关系选择器

①父子选择器:直接包含与被包含的两者之间关系;能用子元素选择器的不要用后代选择器

父元素>子元素{属性:属性值;

属性:属性值;

属性:属性值;

}

②后代选择器:直接或间接包含与被包含的两者之间关系;

祖先元素 ol后代元素{ 属性:属性值;

属性:属性值;

属性:属性值;

}

③兄弟关系:拥有共同的粑粑

选择下一个紧挨着的兄弟元素

语法:兄+紧挨着的兄弟{ 属性:属性值;

属性:属性值;

}

④选择所有的兄弟元素:

兄元素~弟元素 { 属性:属性值;

属性:属性值;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值