CSS的了解(三)

一、CSS权重问题(256进制)

! important Infinity(正无穷)
行间样式 1000
id 100
class/属性选择器/伪类选择器 10
标签选择器/伪元素 1
通配选择器 0

二、复杂选择器

1、父子选择器/派生选择器
只要两者存在直接或者父子级关系都可以使用,而且不一定要用标签写,也可用属性值来写,浏览器真正辨别父子选择器的顺序是自右向左

在lesson4.2.html中写

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson4.2.css"> 

</head>
<body>
	<div>
		<span>你好</span>
	</div>
	<span>新年好</span>
</body>
</html>

在lesson4.2.css中写(父+子

div span{
	background-color: blue
}

2、直接子元素选择器
和父子选择器差不多,父子关系比较直接的一级
在lesson4.2.html中写

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson4.2.css"> 
</head>
<body>
	<div>
		<em>恭喜发财</em>
		<strong>
			<em>红包拿来</em>
		</strong>
	</div>
</body>
</html>

在lesson4.2.css中写(父子之间加一个尖角号

div > em{
	background-color: blue;
}

3、并列选择器
用多个限制条件选中一个元素并且不加空格写在一起
判断优先级:把写在同一排的选择器的权重值相加,若权重值相等则后来先到
在lesson4.2.html中写

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson4.2.css"> 

</head>
<body>
	<div>1</div>
	<div class="demo">2</div>
	<p class="demo">3</p>
</body>
</html>

在lesson4.2.css中写(中间一定不要有空格

div.demo{
	background-color: yellow;
}

4、分组选择器
在lesson4.2.html中写

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson4.2.css"> 
</head>
<body>
	<em>你好</em>
	<strong>新年快乐</strong>
	<span>暴瘦暴富</span>
</body>
</html>

在lesson4.2.css中写(父子之间加一个尖角号

em,strong,span{
	background-color: red;
}

三、总结

以上的选择器都是一些简单的代码,CSS代码具体怎么写怎样才能更美观还需要好好学习不断补充,重点要弄懂该怎么使用选择器以及正确编写代码,有时候往往因为一个小的字母而久久不知错在哪,所以要非常细心。CSS代码怎么写将在明天进行补充,如有写的不对的地方请伙伴们私信告诉我,还有很多做的不好的地方要加以改正。

发布了8 篇原创文章 · 获赞 1 · 访问量 229

猜你喜欢

转载自blog.csdn.net/qq_46179838/article/details/104137557