什么是CSS?
CSS(Cascading Style Sheets)是用来为网页添加央视的代码。
外部样式表(推荐)
- 通过<link>引入css
<html>
<head>
<meta chaarset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
- 通过@import引入样式,放入css中
@import 'style2.css';
@import url("style2.css");
h1 {
color: red;
}
- 内部样式表
不要写在html外面,一般放在head里面
CSS选择器
- 基础选择器
- 组合选择器
选择器 |
含义 |
E,F |
多元素选择器,用过,分隔,同时匹配元素E或元素F |
E F |
后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F |
E>F |
子元素选择器,用>分隔,匹配E元素的所有直接子元素 |
E+F |
直接相邻选择器,匹配E元素之后的相邻的同级元素F |
E~F |
普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否) |
.class1.class2 |
id和class选择器和选择器连写的时候中间没有分隔符:.和#本身充当分隔符的元素 |
element#id |
id和class选择器连写的时候中间没有分隔符,.和#本身充当分隔符的元素 |
- 属性选择器
- 伪类选择器
E:first-child |
匹配元素E的第一个子元素 |
E:link |
匹配所有未被点击的链接 |
E:visited |
匹配所有已被点击的链接 |
E:active |
匹配鼠标已经其上按下、还没有释放的E元素 |
E:hover |
匹配鼠标悬停其上的E元素 |
E:focus |
匹配获得当前焦点的E元素 |
E:lang(c) |
匹配lang属性等于c的E元素 |
E:enabled |
匹配表单中可用的元素 |
E:disabled |
匹配表单中禁用的元素 |
E:checked |
匹配表单中被选中的radio或checkbox元素 |
E::selection |
匹配用户当前选中的元素 |
- 伪元素选择器
选择器 |
含义 |
E::first-line |
匹配E元素内容的第一行 |
E::first-letter |
匹配E元素内容的第一个字母 |
E::before |
在E元素之前插入生成的内容 |
E::after |
在E元素之后插入生成的内容 |
选择器 |
🌰 |
元素选择器 Element Selector |
p 选中所有段落 <p> |
ID 选择器 ID Selector |
#notice 选中 <div id="notice"> 或 <p id="notice"> |
类选择器 Class Selector |
.success 选中 <div class="success"> 和 <a class="success"> |
属性选择器 Attribute Selector |
[hidden] 选中 <div hidden> 和 <img hidden> |
伪类选择器 Pseudo class selector |
a:hover 选中 鼠标悬停所在的 <a> |
选择器的优先级:
- 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景如何计算?
- 行内样式 ==> a
- id选择器 ==> b
- 类,属性选择器和伪类选择器 ==> c
- 标签选择器和伪元素选择器 ==> d
看样式中各类选择器的个数,a,b,c,d,如果a大其权重高,a相等看b,依次比较其大小,谁大谁权重高
网友评论