组合选择器
1.儿子选择器(大于号)
div>p {}
2.后代选择器(空格)
div p {}
3.毗邻选择器(加号):同级别紧挨着的下一个
div+p {}
4.弟弟选择器(数字1左边的键)
div~p {}
(上述的案例使用的都是标签选择器 其实也可以切换为任意选择器)
小练习
#d1>p {}
找id为d1标签内部所有的儿子p
.c1 .c2 {}
找class为c1标签内部所有class为c2的后代标签
div>.c1 {}
找div标签内部class为c1的儿子标签
.c1+#d1 {}
找class为c1标签同级别紧挨着的id为d1的标签
属性选择器
"""
HTML标签除了可以有自带的属性之外还支持自定义属性
<p id='d1' class='c1' name='jason' age=18 xxx=yyy></p>
"""
# 关键性的符号就是中括号
[name] {color:red}
查找含有属性名name的标签
[name='jason'] {color:red}
查找含有属性名name并且属性值是jason的标签
p[name='jason'] {color:red}
查找含有书名name并且属性值是jason的p标签
分组与嵌套
# 分组(逗号隔开 同级别) 找p标签、div标签、span标签
p,div,span {
color:yellowgreen;
}
# 嵌套(不同的选择器可以混合使用) 找id=d1、class=c1、div标签
#d1,.c1,div {
color:yellowgreen;
}
div.c1 {} # 找class=c1的div标签
伪类选择器
# 以链接标签为例
1.未点击状态(了解)
a:link {
color:blue;
}
2.悬浮状态(掌握)
a:hover {
color:red;
}
3.点击状态(不松开)(了解)
a:active {
color:green;
}
4.点击之后的状态(了解)
a:visited {
color:pink
}
# 以input为例 获取焦点状态(聚焦) (掌握)
input:focus {}
伪元素选择器
# 通过css代码给html标签添加文本内容或者修改
# 改变文本第一个字
p:first-letter {
font-size:48px;
color:red;
}
# 在文本开头添加内容
p:before {
content:'#';
color:red;
}
# 在文本末尾添加内容
p:after {
content:'?';
color:blue;
}
(该知识点在浮动中应用)
选择器优先级
1.相同选择器不同位置
就近原则(谁离我更近我就听谁的)
2.不同选择器不同位置(谁指定的目标更精确听谁的)
行内式(了解) > id选择器 > 类选择器 > 标签选择器
(优先级也可以打破 需要借助于关键字)
!important(尽量不要使用)
字体属性相关
1.长宽
width height
# 行内标签无法设置长宽 完全取决于内部文本
2.字体大小
font-size
3.字体颜色
第一种: color:red
第二种: color:#4d4d4d
第三种: color:RGB(128,128,128)
"""
如何利用常见软件取色
1.qq微信截图自带三基色取色(alt+a,鼠标下会显示鼠标指的颜色)
RGB(128,128,128)
2.利用浏览器自带的取色器取色(查看编码)
#4d4d4d
"""
文字属性
1.文字对齐(掌握)
text-align:center
2.文字装饰(重要)
text-decoration:none # 主要用于a标签取出自带的下划线
3.首行缩进(了解)
text-indet:32px
背景属性
1.背景色
background-color:RGB(255,160,0);
2.背景图片
background-image:url('111.png');
3.不自动填充(正常状态下背景大下大于图片大小会自动复制填充数张图片)
background-repeat:no-repeat;
4.图片居中
background-position:center
/*如果多个参数都是相同的前缀 那么可以简写*/
background:#336699 url('111.png') no-repeat center center;