目录
- CSS常用选择器
- 1.推荐软件
- 2.CSS
- 2.1使用CSS
- 2.2常用CSS选择器
- 1. 元素选择器
- 2. id选择器
- 3. 类选择器
- 4. 选择器分组(并集选择器)
- 5. 通配选择器
- 6. 复合选择器（交集选择器）
- 7. 后代元素选择器
- 8. 子元素选择器
- 9. 元素之间的关系
- 10.属性选择器
- 11.伪类选择器
- 12.兄弟元素选择器
- 13.选择器的优先级
CSS常用选择器
- HTML:展示网页
- CSS:美化网页
- JS:动态展示网页
1.推荐软件
- HBuilder
官网下载
使用教程
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。
2.CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
2.1使用CSS
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
- 内部样式表 -在HTML文档头部
<head>区域使用<style>元素 来包含CSS
<head>
<style type="text/css">
/* css代码 */
</style>
</head>
- 外部引用 - 使用外部 CSS 文件
<head>
<!-- Link标签有两个作用 一是定义文档与外部资源的关系、二是链接样式表 -->
<!-- rel 该属性规定当前文档与被链接文档之间的关系。 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.2常用CSS选择器
1. 元素选择器
- 作用：通过元素选择器可以选则页面中的所有指定元素
- 语法：标签名 {}
p{
color: red;
}
h1{
color: red;
}
2. id选择器
- 作用：通过元素的id属性值选中唯一的一个元素
- 语法：#id属性值 {}
#p1{
font-size: 20px;
}
3. 类选择器
- 作用：通过元素的class属性值选中一组元素
- 语法：.class属性值{}
.p2{
color: red;
}
.hello{
font-size: 50px;
}
4. 选择器分组(并集选择器)
- 作用：通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器1,选择器2,选择器N{}
#p1 , .p2 , h1{
background-color: yellow;
}
5. 通配选择器
- 作用：他可以用来选中页面中的所有的元素
- 语法：*{}
*{
color: red;
}
6. 复合选择器（交集选择器）
- 作用：可以选中同时满足多个选择器的元素
- 语法：选择器1选择器2选择器N{}
span.p3{
background-color: yellow;
}
/* 对于id选择器来说，不建议使用复合选择器 */
p#p1{
background-color: red;
}
7. 后代元素选择器
- 作用：选中指定元素的指定后代元素
- 语法：祖先元素 后代元素{}
/* 选中id为d1的div中的p元素中的span元素 */
#d1 span{
color: greenyellow;
}
8. 子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法：父元素 > 子元素
/* IE6及以下的浏览器不支持子元素选择器 */
div > span{
background-color: yellow;
}
9. 元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
10.属性选择器
- 作用：可以根据元素中的属性或属性值来选取指定元素
- 语法：
- [属性名] 选取含有指定属性的元素
- [属性名=“属性值”] 选取含有指定属性值的元素
- [属性名^=“属性值”] 选取属性值以指定内容开头的元素
- [属性名$=“属性值”] 选取属性值以指定内容结尾的元素
- [属性名*=“属性值”] 选取属性值以包含指定内容的元素
p[title]{
background-color: yellow;
}
/* 为title属性值是hello的元素设置一个背景颜色为黄色 */
p[title="hello"]{
background-color: yellow;
}
/* 为title属性值以ab开头的元素设置一个背景颜色为黄色 */
p[title^="ab"]{
background-color: yellow;
}
11.伪类选择器
伪类专门用来表示元素的一种的特殊的状态
-
语法：
- ：属性名
/* 为没访问过的链接设置一个颜色为绿色 */
a:link{
color: yellowgreen;
}
/* 为访问过的链接设置一个颜色为红色 */
a:visited{
color: red;
}
/* :hover伪类表示鼠标移入的状态 */
a:hover{
color: skyblue;
}
/* :active表示的是超链接被点击的状态 */
a:active{
color: black;
}
/* 文本框获取焦点以后，修改背景颜色为黄色 */
input:focus{
background-color: yellow;
12.兄弟元素选择器
- 作用：可以选中一个元素后紧挨着的指定的兄弟元素
- 语法：前一个 + 后一个|前一个 ~ 后边所有
/* 为span后的一个p元素设置一个背景颜色为黄色 */
span + p{
background-color: yellow;
}
/* 选中后边的所有兄弟元素 */
span ~ p{
background-color: yellow;
}
13.选择器的优先级
- 优先级的规则
* 内联样式 ， 优先级 1000
* id选择器，优先级 100
* 类和伪类， 优先级 10
* 元素选择器，优先级 1
* 通配* ， 优先级 0
* 继承的样式，没有优先级
更多推荐
CSS常用选择器
发布评论