index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS选择器[上]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- <b class="abc">这是一个加粗</b> <p id="abc">这是一个<b>段落</b></p> <b class="abc">这是一个加粗</b> <span class="abc def">这是一个什么都没有</span> <b class="abc">这是一个加粗</b> <i lang="en-us">HTML5</i> <a href="http://www.baidu.com">百度</a> <a href="javascript:void(0)">好搜</a> <a href="http://www.360.cn">360官网</a> <input type="text"> <input type="password"> <ul> <li>我是儿子 <ol> <li>我是孙子</li> <li>我是孙子</li> </ol> </li> <li>我是儿子</li> <li>我是儿子</li> </ul> --> <!-- <p>岁的老父空间岁的老父看似简单连反抗集散地发了看似简单连反抗三等奖联发科技送到路口附近送到路口附近三类贷款纠纷另外可减肥零售贷款纠纷绿色科技的法律看似简单连反抗四季的风</p> <div>岁的老父空间岁的老父看似简单连反抗集散地发了看似简单连反抗三等奖联发科技送到路口附近送到路口附近三类贷款纠纷另外可减肥零售贷款纠纷绿色科技的法律看似简单连反抗四季的风</div> --> <!-- <p>我ithis is ...</p> <span>this is ...</span> --> <a href="http://www.baidu.com">百度</a> </body> </html>
style.css
@charset "utf-8";
/** {
border: 1px solid red;
}*/
/*通用选择器还匹配到了html和body元素*/
/*p {
color: red;
}*/
/*#abc {
color: green;
}
.abc {
color: blue;
}*/
/*b.abc {
color: orange;
}*/
/*.abc {
color: red;
}
.def {
font-size: 30px;
}*/
/*[href] {
color: red;
}*/
/*[type="password"] {
border: 1px solid red;
}*/
/*[href^="http"] {
color: red;
}*/
/*[href$=".cn"] {
color: red;
}*/
/*[href*="baidu"] {
color: red;
}*/
/*[class~="def"] {
color: red;
}*/
/*[lang|="en"] {
color: red;
}*/
/*p,b,i,span {
color: red;
}*/
/*#abc,.abc,i,span {
color: blue;
}*/
/*p b {
color: red;
}*/
/*p > b {
color: red;
}*/
/*ul li {
border: 1px solid red;
}*/
/*ul > li {
border: 1px solid red;
}*/
/*p + b {
color: red;
}*/
/*p ~ b {
color: red;
}*/
/*p::first-line {
color: red;
}*/
p::first-letter {
color: red;
}
/*a::before {
content: '点击';
}*/
a::after {
content: '搜索';
}
相关推荐
理解并熟练掌握各种CSS选择器对于创建美观、响应式的网页至关重要。 一、通用选择器 通用选择器（*）可以应用于任何元素，为所有元素设置相同的样式。例如，`* {color: black;}` 将使页面上所有元素的文本颜色变为...
**CSS选择器笔记** CSS（层叠样式表）选择器是网页设计中用来选取HTML或XML文档中的元素的工具，从而应用相应的样式规则。选择器的种类多样，可以帮助开发者精确地定位到页面上的任何元素，实现精准的样式控制。...
CSS选择器是CSS语言的核心部分，它用于选取页面上的HTML或XML元素，并应用相应的样式规则。理解并熟练掌握各种选择器对于网页设计和前端开发至关重要。以下是对标题和描述中提到的知识点的详细说明： 一、基本选择...
第十三章选择器 第十四章使用选择器在页面中插入内容 第十五章文字与字体相关样式 第十六章盒相关样式 第十七章与背景和边框相关样式 第十八章CSS 3中的变形处理 第十九章CSS 3中的动画功能 第二十章布局相关样式 第...
"css3"是指层叠样式表的第三版，它引入了许多新特性，如媒体查询、伪类和伪元素、边框和背景的高级控制，以及前面提到的过渡、动画和变换等，这些都是实现仿iOS选择器的关键。 在实现"js css3 仿iso 选择器"的过程...
CSS3引入了更多的选择器，如类选择器、ID选择器、伪类和伪元素，使样式应用更加灵活。此外，CSS布局技术如Flexbox和Grid，极大地简化了网页的响应式设计，确保页面在不同设备和屏幕尺寸上的良好显示。 课堂练习通常...
本资料包"HTML第4章 课堂练习 PPT及答案 CSS.ACCP6.0"与"HTML第13章 课堂练习 PPT及答案 CSS.ACCP6.0"显然包含了HTML学习的两个重要阶段，分别是第四章和第十三章的内容，同时结合了CSS的学习，这通常是课程或培训的...
【CSS选择器笔记】 CSS（层叠样式表）选择器是用于选取网页中特定元素的工具，它们在定义页面样式时起着至关重要的作用。理解并熟练运用CSS选择器可以帮助我们更加精确地控制网页的布局和表现。下面将对各种CSS选择...
【CSS3选择器】是CSS（层叠样式表）中用于选取网页元素的重要工具，它在CSS2的基础上增加了更多的选择器类型，使样式定义更加精确和灵活。在教育领域，理解并熟练掌握CSS3选择器对于网页设计和前端开发至关重要。 ...
本章"精通CSS+DIV源码 第十三章"聚焦于深入理解和应用这两者，以创建美观、响应式的网页设计。以下是对这一章节内容的详细阐述。 首先，CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...
1.3 基本CSS选择器 1.3.1 标记选择器 1.3.2 类别选择器 1.3.3 ID选择器 1.4 复合选择器 1.4.1 “交集”选择器 1.4.2 “并集”选择器 1.4.3 后代选择器 1.5 CSS的继承...
- **第8章**：通常涉及CSS选择器的使用，如何有效地选取和应用样式。 - **第9章**：可能包含HTML5的新特性，如表单控件、离线存储等。 - **第11章**：可能介绍CSS3的布局技巧，如盒模型、Flexbox或Grid布局。 - ...
…… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 圆角设计 第12章 应用Spry制作高级网页组件 第13章 固定宽度布局剖析与制作 第14...
2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一：模拟Google公司Logo 3.3 文字实例二：制作页面的五彩标题 3.4 CSS...
1. CSS选择器：学习类选择器、ID选择器、标签选择器、后代选择器、子元素选择器等，以精确地选择和样式化元素。 2. 属性与值：掌握颜色、字体、尺寸、边距、边框等CSS属性及其使用方法。 3. 盒模型：理解内容、内...