CSS中的选择器

最新推荐文章于 2024-07-18 14:12:41 发布

有园人

最新推荐文章于 2024-07-18 14:12:41 发布

阅读量300

点赞数 1

分类专栏：网页编程和设计不忘初心，方得始终文章标签： CSS中的选择器

本文链接：https://blog.csdn.net/qq_42031653/article/details/99441492

版权

不忘初心，方得始终同时被 2 个专栏收录

66 篇文章 0 订阅

订阅专栏

网页编程和设计

33 篇文章 0 订阅

订阅专栏

body标签：

    <body>
		<!--选择器的优先级：
			id选择器>class选择器>元素选择器>通用选择器
		-->
		<div id="d1">十一</div>
		<div class="dd">22</div>
		<div class="dd">33</div>
		<p>超出边界</p>
	</body>

通用选择器：对所有对象皆可使用 * 符号代替所有。不常用：

/*通用选择器*/
			*{
				color: red;
			}

元素选择器：对是用一个类型的表单的选择：

/*元素选择器*/
			div{
				width: 200px;
				height: 200px;
				background-color: aqua;
				border: 1px solid black;
			}

class 选择器：对于表单属性class命名相同的表单进行操作：

.dd{
				background-color: darkgoldenrod;
			}

id选择器：针对单个表单进行操作，表单内的id必须要唯一：


			#d1{
				background-color: cadetblue;
				font-family: 楷体;
			}

对于id命名的要求：

id的名称最好是唯一的。
id的命名：字母，数字，下划线，中划线。
不能以数字开头。

这几个表单选择器的优先级，id>class>元素>通用。

还有一些其他的选择器：

body：

<body>
		<div>
			<span>北京尚学堂</span>
			
			<p>
				<span>上海尚学堂</span>
			</p>
		</div>
			<span>
				北京尚学堂
			</span><br />
			<hr />
			<p id="p1">我们不一样</p>
			<p>我们不一样</p>
			<p>我们不一样</p>
			<p>我们不一样</p>
			
			<a href="http://www.baidu.com" target="_blank">去百度</a>
	</body>

后代选择器：

/*后代选择器*/
			div span{
				color: aqua;
				font-size: 25px;
				font-family: "楷体";
			}

后代选择器是针对所有是他后代的表单。

子类选择器：

/*子类选择器*/
			div>span{
				color: red;
				font-size: 50px;
				font-family: "楷体";
			}

子类选择器是针对父类下面的直系子类，不包含嵌套的。

伪类选择器：

/*伪类选择器*/
			a:hover{
				color: red;
			}

这是给a标签加上一个变色效果：当鼠标放在a标签上面就可以变色。

兄弟选择器：

兄弟选择器有俩种

1.选中本体，然后锁定接下来是本体兄弟的第一个表单，只改变这一个表单的样式。用“+”连接。

2.选中本体，然后锁定接下来只要是本体的兄弟，都恩改变他们的属性。用“~”连接

                    #p1+p{
				color: yellow;
				font-size: 50px;
				font-family: 黑体;
			}
			
			#p1~p{
				color: saddlebrown;
				font-size: 50px;
				font-family: 黑体;
			}

注释第二个兄弟表单的结果：