转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/126558787
本文出自【赵彦军的博客】
选择器格式
选择器:{
样式;
}
标签选择器
h1 {
color : red;
font-weight : normal;
};
举例:对所有 P 标签做选择,字体颜色为 red
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>星期一</p>
<p>星期二</p>
</body>
</html>
效果如下:
id 选择器
语法格式 :#id { }
举例说明:
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
#one{
color: blue;
}
</style>
</head>
<body>
<p id="one">星期一</p>
<p>星期二</p>
</body>
效果如下:
类选择器
class 属性定义了元素的类名
class 和 id 有什么区别?
- id 不能重复,类似于身份证号
- class 可以重复,类型于班级
语法:
.类选择器名称{
css样式代码;
}
注意:
1.英文圆点开头
2.类选择器名称可以任意起名(但不要中文名)
举例说明:
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.red{
color: blue;
}
</style>
</head>
<body>
<p class="red">星期一</p>
<p class="red">星期二</p>
<p>星期三</p>
</body>
效果如下:
多 class 场景
一个标签可以指定多个 class 属性,多个 class 属性用空格符分割。
<p class="red blue">星期一</p>
举例:
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.red{
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p class="red blue">星期一</p>
<p class="red">星期二</p>
<p>星期三</p>
</body>
效果如下:
通配选择器
语法:*{}
含义:页面的所有元素都选中
举例:
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
*{
color: coral;
}
</style>
</head>
<body>
<p>星期一</p>
<p>星期二</p>
<p>星期三</p>
</body>
效果图:
交集选取器
- 作用:选中同时符合多个条件的元素
- 语法:选择器1选择器2选择器3选择器n{ }
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.red {
color: red;
}
div.red {
font-size: 40px;
}
</style>
</head>
<body>
<div class="red">div</div>
<p class="red">星期一</p>
<p>星期二</p>
</body>
选择器分组、并集选择器
- 作用:同时选择多个选择器对应的元素
- 语法:选择器1,选择器2,选择器3,选择器n { }
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.red,.blue {
font-size: 40px;
}
</style>
</head>
<body>
<p class="red">星期一</p>
<p class="blue">星期二</p>
</body>
关系选择器
- 祖先元素:直接或间接包含后代元素,叫祖先元素
- 后代元素:直接或间接被祖先元素包含的元素,叫后代元素
- 父元素:直接包含后代元素,叫父元素
- 子元素:直接被父元素包含的元素,叫子元素
- 兄弟元素:拥有相同父元素的元素,叫兄弟元素
子元素选择器
语法:父元素 > 子元素 { }
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div > p {
color: red;
}
</style>
</head>
<body>
<div>我是一个div
<p>我是一个div中的p</p>
</div>
</body>
后代元素
- 语法:祖先元素 后代元素{ }
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>我是一个div
<p>我是一个div中的p</p>
<p>我是一个div中的p</p>
<span>我是一个span</span>
</div>
</body>
下一个兄弟元素
- 语法:前一个元素 + 下一个元素{ }
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
p + span {
color: red;
}
</style>
</head>
<body>
<div>我是一个div
<p>我是一个div中的p</p>
<p>我是一个div中的p</p>
<span>我是一个span</span>
</div>
</body>
下边所有元素
语法:上一个元素 ~ 下一个元素 { }
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
p ~ span {
color: red;
}
</style>
</head>
<body>
<div>我是一个div
<p>我是一个div中的p</p>
<p>我是一个div中的p</p>
<span>我是一个span</span>
<span>我是一个span2</span>
</div>
</body>