CSS选择器与样式调节

今日内容概要

• 组合选择器
• 伪类选择器
• 伪元素选择器
• 选择器优先级
• html样式调节

今日内容详细

组合选择器

1.儿子选择器(大于号)
	div>p {}

2.后代选择器(空格)
	div p {}

3.毗邻选择器(加号):同级别紧挨着的下一个
	div+p {}

4.弟弟选择器(数字1左边的键)
	div~p {}

属性选择器

#前提
HTML标签除了可以有自带的属性之外还支持自定义属性

eg:
<p id='d1' class='c1' name='小明' age=20 xxx=yyy></p>

# 关键性的符号就是中括号
[name] {color:red}  
	查找含有属性名name的标签

[name='jason'] {color:red}
	查找含有属性名name并且属性值是jason的标签

p[name='jason'] {color:red}
	查找含有书名name并且属性值是jason的p标签

分组与嵌套

1.分组(逗号隔开 同级别)  
#找p标签、div标签、span标签
    
    p,div,span {
                color:yellowgreen;
            }

2.嵌套(不同的选择器可以混合使用)  
#找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选择器  > 类选择器 > 标签选择器

    
"""优先级也可以打破 需要借助于关键字"""
eg:!important

字体属性相关

1.长宽
width
height

#行内标签无法设置长宽 完全取决于内部文本

2.字体大小
font-size


2.字体颜色
color:red
color:#xxxxxx
color:RGB(0,0,0)
    
#取色
1.借助微信/QQ截图自带的三基色取色
2.利用浏览器自带的取色器取色

文字属性

1.文字对齐
text-align:center
    
2.文字装饰
text-decoration:none
    
3.首行缩进
text-indet:32px

背景属性

#背景色
#背景图片

引入方式:
1.background-color:RGB(0,0,0);
2.background-image:url('111.png');

位置方式： 
background-repeat:no-repeat;
background-position:center
    
#如果多个参数都是相同的前缀
那么可以简写为background:#xxxxxx url('111.png') no-repeat center;