组合选择器
1.儿子选择器
#d1>p{} 找id为d1标签内部所有的儿子p。
2.后代选择器
.c1 .c1 {} 找class为c1标签内部所有class为c2的后代标签。
3.毗邻选择器
div>.c1 {} 找div标签内部class为c1的儿子标签。
4.弟弟选择器
.c1+#d1 {} 找class为c1标签同级别紧挨着的id为d1的标签。
![image](https://img2020.cnblogs.com/blog/2453254/202108/2453254-20210804144649769-446408978.png)
属性选择器
HTML标签除了自带的属性之外还支持自定义属性。
<p id="dd" class="cc" name="jyb" age="12" xx="yy">
关键性符号就是中括号[]
[name] {color:red}
查找含有属性名name的标签。
[name='jyb'] {color:red}
查找含有属性名name并且属性值是jyb的标签。
p[name='jyb'] {color:red}
查找含有书名name并且属性值是jyb的p标签。
![image](https://img2020.cnblogs.com/blog/2453254/202108/2453254-20210804144849012-375339358.png)
分组与嵌套
分组:用逗号隔开同级别的标签,例如<p>,<span>,<div>
p,div,span{color:yellowgreen}
嵌套:可以混合使用不同级别的选择器
#d1,.c1,div{color:yellowgreen} 找id=d1、class=c1、div标签
div.c1 {} 找class=c1的div标签
![image](https://img2020.cnblogs.com/blog/2453254/202108/2453254-20210804145032639-1587881535.png)
伪类选择器
以链接标签为例
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:66px;
color:yellow;
}
在文本开头添加内容:
p:before{
content:"jyb";
color:"green";
}
在文本末尾添加内容:
p:after{
content:"zs";
color:"pink";
}
![image](https://img2020.cnblogs.com/blog/2453254/202108/2453254-20210804145602997-773880274.png)
选择器优先级
1.相同选择器不同位置
就近原则
2.不同选择器不同位置
行内式 > id选择器 > 类选择器 > 标签选择器
优先级也是可以打破的,需要借助关键字!important,但是尽量不要用。
css样式调节
字体属性相关
1.长宽
width height
行内标签无法设置长宽,完全取决于内部文本
2.字体大小
font-size
3.字体颜色
第一种: color:red
第二种: color:#4d4d4d
第三种: color:RGB(128,128,128)
如何利用常见软件取色
1.qq微信截图自带三基色取色
RGB(128,128,128)
2.利用浏览器自带的取色器取色
#4d4d4d
文字属性
1.文字对齐:掌握
text-align:center
2.文字装饰:重要
text-decoration:none # 主要用于a标签取出自带的下划线
3.首行缩进:了解
text-indet:32px
![image](https://img2020.cnblogs.com/blog/2453254/202108/2453254-20210804150208500-989178653.png)
背景属性
1.背景色
2.背景图片
background-color:RGB(255,160,0);
background-image:url('111.png');
background-repeat:no-repeat;
background-position:center
如果多个参数都是相同的前缀 那么可以简写
background:#336699 url('111.png') no-repeat center center;
![image](https://img2020.cnblogs.com/blog/2453254/202108/2453254-20210804150416793-152951516.png)