CSS架构
- 基本选择器
- 元素选择器:通过元素名称定位页面元素
- 类选择器:通过元素的class属性定位页面元素
- ID选择器:通过元素的ID属性定位页面元素;id属性必须是唯一的
- 通配符选择器:匹配当前页面中所有元素
<style>
p{
color: #2196f3;
}
/*元素选择器
通过元素名称定位页面元素
* 定位页面中一类元素*/
#h2{
color: #e53935;
}
/*id选择器
通过元素的ID属性定位页面元素
* 特点 - 由于元素的id属性必须是唯一的,定位的元素也是唯一的*/
.div{
color: green;
}
/*类选择器 通过元素的class属性定位页面元素*/
*{
color: #ff6700;
}
/*通配符选择器
匹配当前页面中所有元素
* 用法 用于定义基础样式
* 问题 可能影响页面的加载速度*/
</style>
</head>
<body>
<p>爱新觉罗</p>
<h2 id="h2">呼延觉罗</h2>
<div class="div">犬夜叉</div>
</body>
- 层级选择器
- 后代选择器: 祖先 空格 后代 { 声明块 }后代元素包括父级元素
- 子选择器:父级 > 子级 { 声明块 }下一个子级元素一类
- 相邻兄弟选择器:匹配指定元素的下一个相邻兄弟元素
- 普通兄弟选择器:匹配指定元素的后面所有兄弟元素
<style>
#qyc h3{
color: green;
}
/*
后代选择器
* 用法 - 祖先 空格 后代 { 声明块 }
*/
div > h3{
color: #e53935;
}
/*
子选择器
* 用法 - 父级 > 子级 { 声明块 }
*/
#qyc + h3{
color: #2196f3;
}
/*
相邻兄弟选择器
* 作用 - 匹配指定元素的下一个相邻兄弟元素
*/
#qyc ~ h3{
color: yellow;
}
/*
普通兄弟选择器
* 作用 - 匹配指定元素的后面所有兄弟元素
*/
</style>
</head>
<body>
<h3>犬夜叉</h3>
<div id="qyc">
<h3>七龙珠</h3>
九龙珠
</div>
<h3>拳皇97</h3>
<h3>拳皇97</h3>
<h3>拳皇97</h3>
</body>
- 属性选择器:
[属性名称]通过属性名称来对属性值的筛选
<style>
[name] {
color: #2196f3;
}
/*属性选择器 - [属性名称]
* 注意 - 一般情况下属性选择器配合基本选择器使用*/
[name='p2'] {
color: yellow;
}
/* [属性名称=属性值] - 属性值与元素中指定属性的值完全一致*/
[name^='p'] {
color: #e53935;
}
/*[属性名称^=属性值] - 以属性值以什么开始*/
[name$='1'] {
color: green;
}
/*[属性名称$=属性值] - 以属性值是以什么结束的*/
[class*='l'] {
color: #ff6700;
}
/*[属性名称*=属性值] - 以属性值包含什么的*/
</style>
</head>
<body>
<p id="p1" class="cla" >犬夜叉</p>
<p name="p2" class="cla">九龙珠</p>
<p id="p3" name="p31">海贼王</p>
<p id="p4" name="p41" class="cla">木叶村</p>
<h1 class="cla mp cla1">七龙珠</h1>
</body>
- 组合选择器
- 并集选择器:中间要以逗号分开
结果是并集
- 交集选择器:
中间没有逗号分开
结果是交集
<style>
#p1, .cla {
color: #2196f3;
}
/*多个选择器并用,中间要以逗号分开
结果是并集*/
p[name] {
color: #e53935;
}
/*多个选择器并用,中间没有逗号分开
结果是交集*/
</style>
</head>
<body>
<p id="p1">犬夜叉</p>
<p name="p2">七龙珠</p>
<p class="cla">海贼王</p>
</body>
- 伪类:是以在属性名后面加上:hover进行鼠标悬停
<style>
h2 {
color: #2196f3;
}
/* 通过 :hover 伪类(鼠标悬停) */
h2:hover {
color: #e53935;
}
</style>
</head>
<body>
<h2>呼延觉罗</h2>
</body>
- 伪元素
- 经常用的几种伪元素:
- 是以p(选择器)::after(伪元素)
- before和after:
<style>
h2 {
color: #2196f3;
}
/* ::before 伪元素 - 为指定元素添加第一个子元素 */
h2::before {
content: "<<";/* 内容为 << */
}
/* ::after 伪元素 - 为指定元素添加最后一个子元素 */
h2::after {
/*
content属性 - 用于为::before和::after添加指定内容
* none值 - 表示不添加任何内容
* normal值 - 类似于none
* text值 - 表示普通文本内容
* url值 - 表示引入一个外部资源(比如图片等)
*/
content: ">>";
}
</style>
</head>
<body>
<h2>爱新觉罗</h2>
</body>
- first-letter:匹配指定元素文本内容中的第一个字母
<style>
/* ::first-letter 伪元素 - 匹配指定元素文本内容中的第一个字母(汉字) */
h2::first-letter {
/*color: #2196f3;*/
font-size: 48px;/*字体大小*/
}
</style>
</head>
<body>
<h2>I Love You.</h2>
<h2>爱新觉罗</h2>
</body>
- first-line:匹配指定元素文本内容的第一行文本内容
<style>
/* ::first-line 伪元素 - 匹配指定元素文本内容的第一行文本内容 */
p::first-line {
color: #2196f3;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium amet at consequatur dolorem eos iure laudantium modi nostrum obcaecati odit pariatur praesentium quisquam recusandae unde. Debitis iste nisi obcaecati!</p>
</body>
- selection:匹配指定元素被高亮的文本内容
<style>
/* ::selection 伪元素 - 匹配指定元素被高亮的文本内容 */
p::selection {
color: #e53935;
background-color: #00FFFF;<!--背景颜色设置-->
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, aspernatur consequatur consequuntur, dolorem doloremque facere id illo incidunt, magnam placeat provident sit suscipit! Cupiditate dolores earum fuga necessitatibus praesentium, ut!</p>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。