学习笔记一】选择器"/>
【CSS学习笔记一】选择器
本文的笔记总结自b站【狂神说Java】，感谢up。
什么是CSS？
CSS是Cascading Style Sheet的缩写，层叠样式表。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
第一个css程序
优先级（就近原则）：谁离元素更近，就用哪个样式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--内部样式--><style>h1{color: blue;}</style><!--外部样式--><link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: aquamarine">标题</h1>
</body>
</html>
选择器
作用：选择器用于选择html页面上你想选择的某一个或者某一类元素
基本选择器
优先级： id选择器 > class选择器 > 标签选择器
- 标签选择器: 会选择到页面上所有这个标签的元素
- 类选择器：.class{}
好处：可以多个标签归类，可以跨标签
<head><meta charset="UTF-8"><title>Title</title><style>.linlin{color: aquamarine;}.rainie{color: blueviolet;}</style>
</head>
<body>
<p class="rainie">Hello world</p>
<p class="linlin">Hello world</p>
</body>
- id选择器：
格式：#id名称{}
例子：#firstname 选择所有id="firstname"的元素
id必须保证全局为1
层次选择器
把菜鸟教程中各类选择器都打一遍，看看效果就大致有印象了：CSS选择器
- 后代选择器：在某个元素的后面
div p{background: chartreuse;
}
- 子选择器:只有一代，儿子
div > p{background: chartreuse;
}
-
相邻兄弟选择器：只有p3变色了，只有1个
-
通用选择器,对比相邻兄弟选择器，他是选中后面的所有同类的，并不是只有一个
#a ~ p{background: chartreuse;
}
构造伪类选择器
什么是伪类：
伪类用于定义元素的特殊状态。
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
<style>/*选中ul的第一个li*/ul li:first-child{background: chartreuse;}/*选中ul的最后一个li*/ul li:last-child{background: #ff008c;}/*选中p11. nth: 选中父元素2. type: p类型下的第2个*/p:nth-of-type(2){background: #ffbf00;}/*选中p11. nth: 选中父元素2. child: 父元素下的第1个子元素3. 并且父元素下的第一个子元素是p才会生效，如果不是p则不会生效，局限比较多*/p:nth-child(1){background: #00ffcc;}</style>
/* 未访问的链接 */
a:link {color: #FF0000;
}/* 已访问的链接 */
a:visited {color: #00FF00;
}/* 鼠标悬停链接 */
a:hover {color: #FF00FF;
}/* 已选择的链接 */
a:active {color: #0000FF;
}
属性选择器（常用）
/*属性选择器1. a标签中，带有id属性的*/a[id]{background: #ff008c;}/*2. a标签中，id = id2的*/a[id = id2]{background: #ff008c;}/*3. a标签，属性class中，含有class1的*=：包含这个额元素*/a[class *= class1]{background: #ff008c;}/*4. a标签，选中herf中，以http开头的元素^=: 以这个为开头$=: 以这个为结尾*/a[href $=pdf]{background: yellow;}
更多推荐
【CSS学习笔记一】选择器
发布评论