扩展选择器：
1. 选择所有元素：
语法： *{}
2. 并集选择器：
选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
语法： 选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
语法： 选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
语法： 元素名称[属性名="属性值"]{}
6.伪类选择器：选择一些元素具有的状态
语法： 元素:状态{}
如： <a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
6种选择器案例演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ /*基本选择器*/ color: red; } div{ color: blue; } .class01{ color: chartreuse; } </style> <style> div p{ /*元素选择器*/ color: gray; } div > p { /*累选择器*/ border: 1px solid; } </style> <style> div p{ /*子选择器*/ color: gray; } div > p { /*父选择器*/ border: 1px solid; } input[type='text']{ /*属性选择器*/ border: 5px solid; } /*伪类选择器*/ a:link{ /*初始化的状态*/ color: red; } a:hover{ /*鼠标悬浮状态*/ color: yellow; } a:active{ /*正在访问状态*/ color:blue; } a:visited{ /*被访问过的状态*/ color: green; } </style> </head> <body> <!--用于基本选择器--> <div id ="div1">哈嗨</div> <div>哈嗨</div> <p class="class01"></p> <!--用于扩展选择器--> <div> <p>你好你好</p> </div> <!--用于元素选择器--> <p>我很好你你好嘛</p> <!--用于类选择器--> <p>我很好，你好嘛</p> <!--用于子选择器--> <div> <p>你好你好</p> </div> <!--用于父选择器--> <p>我很好，你好嘛</p> <!--用属性选择器--> <input type="text"> <input type="password"> <br><br><br><br><br> <!--用于伪类选择器--> <a href="#">你好吗</a> </body> </body> </html>
CSS的属性
常见属性：
1.字体、文本
font-sizr:字体大小
color:文本颜色
text-aling:对其方式
line-height:行高
2.背景
background
3.边框
4.尺寸
width:宽度
height:高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
/*文本颜色 */
color: red;
/*字体大小*/
font-size: 30px;
/*对齐方式*/
text-align: center;
/*行高*/
line-height: 100px;
}
div{
/*边框线1px 颜色为红色*/
border: 1px solid red;
/*尺寸*/
height: 450px;
width: 450px;
/* 背景导入图片 不重复显示 居中 */
background:url("img/login_bg.png") no-repeat center;
}
</style>
</head>
<body>
<p>我丢脑瓜子嗡嗡的哦</p>
<div>
vwl4ufhdsfgb
</div>
</body>
</html>
标签：597,color,598,元素,div,你好,选择器,属性
From： https://www.cnblogs.com/agzq/p/16816293.html