CSS入门 二
2020-12-03 本文已影响0人
码农修行之路
选择器
- 通过一定的语法规则选取到对应的HTML标记 然后给这个对应的HTML标记设置样式
- 基本选择器
- 复合选择器
- 伪类选择器
- 属性选择器
基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<!-- 嵌入式 -->
<style type="text/css">
/* 通用选择器 */
/*
格式：
* {
属性：值；
属性：值；
}
*/
*{
color: #0000ff;
}
/* 1. 通用选择器不建议使用 IE6不支持 大型网站使用增加负担
2. 给HTML页面中所有的标签设置样式
*/
/* 标签选择器 */
/*
格式：
标签名 {
属性：值；
属性：值；
}
*/
p {
color: #ff0000;
}
/* 1. 匹配对应的HTML标签 */
/* 类选择器 */
/*
格式：
.class属性值 {
属性：值；
属性：值；
}
*/
.d {
color: #00ff00;
}
/* 标签名.class属性值 的HTML的所有标签设置样式 重点 */
div.dd {
color: #e1e1e1;
}
/* 1. 给拥有指定相同class属性值的元素设置样式 */
/* id选择器 */
/*
格式：
#id属性值 {
属性：值；
属性：值；
}
*/
#s {
color: #6f8864;
}
/* 1. 给指定id值的HTML元素设置样式 id属性值必须是唯一的 */
</style>
</head>
<body>
<!-- 通用选择器 设置 -->
<h3>班级成员</h3>
<ol>
<li>小黄</li>
<li>小张</li>
<li>小飞</li>
<li>小王</li>
</ol>
<p>段落</p>
<div class="d">div盒子</div>
<div class="dd">div盒子</div>
<span id="s">span盒子</span>
</body>
</html>
- 通用选择器
- 通用选择器不建议使用 IE6不支持 大型网站使用增加负担
- 给HTML页面中所有的标签设置样式
- 标签选择器
- 匹配对应的HTML标签样式
- 类选择器 *
- 给拥有指定相同class属性值的元素设置样式
- id选择器
-
给指定id值的HTML元素设置样式 id属性值必须是唯一的
基本选择器.png
复合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器</title>
<style type="text/css">
/* 嵌入式 */
/* 多元素选择器 */
/* 1. 同时匹配多个选择器 选择器1和选择器2，多个选择器之间逗号隔开 */
/*
格式：
选择器1,选择器2,n {
属性：值；
}
*/
h4,.d,#s {
color: #ff0000;
}
/* 后代元素选择器 */
/* 1. 同时匹配.dd盒子里面所有的p后代元素样式 不管后代是几级元素 */
/*
格式：
子标签的类、id、标签选择器 子标签的类、id、标签选择器 {
属性：值；
}
*/
.dd p {
color: #00f
}
.dd .ss {
color: #f00;
}
.dd #i {
color: #0f0;
}
/* 子元素选择器 */
/* 1. 同时匹配#dd盒子里面的p后代元素样式 只匹配一级元素 */
/*
格式：
子标签的类、id、标签选择器 > 子标签的类、id、标签选择器 {
属性：值；
}
*/
#dd > p {
color: #00f
}
#dd > .ss {
color: #f00;
}
#dd > #i {
color: #0f0;
}
/* 相邻选择器 需要同时满足下面三个条件*/
/* 1. 元素A与元素B必须在同一级 兄弟关系
2. 元素A与元素B必须是紧挨着的 它们之间没有任何元素阻挡
3. 元素B一定要在元素A元素的下面
*/
/*
格式：
子标签的类、id、标签选择器 + 子标签的类、标签选择器 {
属性：值；
}
*/
.dv + .p {
color: #f00;
}
</style>
</head>
<body>
<h4>标题</h4>
<p>段落</p>
<div class="d">div盒子</div>
<span id="s">span盒子</span>
<div class="dd">
<p>div的大儿子</p>
<div>
<p>div的孙子</p>
</div>
<p>div的小儿子</p>
<span class="ss">div的野儿子</span>
<span id="i">div的野儿子</span>
</div>
<hr />
<div id="dd">
<p>div的大儿子</p>
<div>
<p>div的孙子</p>
</div>
<p>div的小儿子</p>
<span class="ss">div的野儿子</span>
<span id="i">div的野儿子</span>
</div>
<p class="p">上面段落1</p>
<div class="dv">
<p>dv的段落1</p>
<p>dv的段落2</p>
</div>
<!-- <span>阻隔元素</span> -->
<p class="p">下面段落2</p>
</body>
</html>
- 多元素选择器
- 同时匹配多个选择器 选择器1和选择器2，多个选择器之间逗号隔开
- 后代元素选择器
- 同时匹配.dd盒子里面所有的p后代元素样式 不管后代是几级元素
- 子元素选择器
- 同时匹配#dd盒子里面的p后代元素样式 只匹配一级元素
- 相邻选择器 需要同时满足下面三个条件
- 元素A与元素B必须在同一级 兄弟关系
- 元素A与元素B必须是紧挨着的 它们之间没有任何元素阻挡
-
元素B一定要在元素A元素的下面
复合选择器.png
伪类选择器
- 给超级链接的不同状态设置样式
- :link 向未被访问的链接添加样式 正常状态
- :visited 向已被访问过的链接添加样式 访问状态
- :hover 当鼠标悬浮在元素上方时 向元素添加样式 鼠标放上状态
- :active 鼠标放在元素上面时 点击的一瞬间 激活状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
/* 嵌入式 */
/* 伪类选择器 给超级链接的不同状态设置样式 */
/* :link 向未被访问的链接添加样式 正常状态*/
/* :visited 向已被访问过的链接添加样式 访问状态*/
/* :hover 当鼠标悬浮在元素上方时 向元素添加样式 鼠标放上状态*/
/* :active 鼠标放在元素上面时 点击的一瞬间 激活状态*/
/*默认状态颜色*/
a:link {
color: #00f;
}
/*访问后状态颜色*/
a:visited {
color: #666;
}
/*鼠标悬浮上状态颜色*/
a:hover {
color: red;
}
/*点击瞬间状态颜色*/
a:active {
color: #000;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://ww.sina.com">新浪</a>
<a href="http://www.xiaohuang.com">小黄空间</a>
</body>
</html>
注意：伪类选择器必须遵守顺序 被叫做爱恨准则 lv ha 乱序样式会失效
伪类选择器1.png
伪类选择器2.png
属性选择器
- 与它的属性和属性值有关
- 通过属性和属性值来匹配元素
有以下几种格式：
格式一：[attr] 匹配所有有attr属性的元素
格式二：[attr = "val"] 匹配所有有attr属性并且属性值等于val的元素
格式三：[attr^="val"] 匹配元素中attr属性并且属性值以val开头的所有元素
格式四：[attr$="val"] 匹配元素中attr属性并且属性值以val结尾的所有元素
格式五：[attr*="val"] 匹配元素中attr属性并且包含属性值val的所有元素 不区分包含属性值的大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/* 格式一 [属性] */
[align] {
color: #00f;
}
p[align] {
color: #0f0;
}
/* 格式二 [属性="属性值"] */
p[align="center"] {
color: #000;
}
/* 格式三 [属性^="属性值"] */
p[align^=ri] {
color: #666;
}
/* 格式四 [属性$="属性值"] */
p[align$=ft] {
color: #00f;
}
/* 格式五 [属性*="属性值"] */
[color*="ff"] {
border: 2px solid #000;
}
</style>
</head>
<body>
<div align="center">我是div盒子</div>
<p align="center">我是段落</p>
<p align="center" style="width: 300px;background-color: red">我是段落2</p>
<p align="right" style="width: 300px;background-color: red">我是段落3</p>
<p align="left" style="width: 300px;background-color: red">我是段落4</p>
<font color="#00ff00">我是段落5</font>
</body>
</html>
属性选择器.png
后续继续更新
