一、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代码怎么写将在明天进行补充,如有写的不对的地方请伙伴们私信告诉我,还有很多做的不好的地方要加以改正。