css选择器

2024-02-04 22:53:28

组合选择器

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;

码农公寓