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> <ul> <li>我是儿子</li> <li>我是儿子</li> <li>我是儿子</li> <li>我是儿子</li> </ul> <ul> <li>我是儿子</li> </ul> <div> <p>我是段落</p> <span>我不是段落</span> </div> <div> <p>我是段落</p> <p>我是段落</p> </div> <form> <input type="text" required> <input type="email"> <input type="checkbox"> <input type="checkbox" checked> <button>提交</button> </form> <a href="http://www.baidu.com">百度</a> <a href="http://www.google.com">谷歌</a> <a href="http://www.haosou.com">好搜</a> <b>加粗</b> <p lang="en-us">HTML5</p> <b id="mytarget">加粗</b> </body> </html>
style.css
@charset "utf-8";
/*:root {
border: 1px solid red;
}*/
/*ul > li {
color: red;
}*/
/*ul > li:first-child {
color: red;
}*/
/*li:first-child {
color: red;
}*/
/*:first-child {
color: red;
}*/
/*伪类都需要加上前置选择器来限制范围*/
/*ul > li:last-child {
color: red;
}*/
/*ul > li:only-child {
color: red;
}*/
/*div > p:only-child {
color: red;
}*/
/*div > p:only-of-type {
color: red;
}*/
/*ul > li:nth-child(2) {
color: red;
}*/
/*ul > li:nth-last-child(2) {
color: red;
}*/
/*div > p:nth-of-type(2) {
color: red;
}*/
/*div > p:nth-last-of-type(1) {
color: red;
}*/
/*input:enabled {
border: 1px solid red;
}
input:disabled {
border: 1px solid blue;
}*/
/*input:checked {
display: none;
}*/
/*input:default {
display: none;
}*/
/*input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}*/
/*input:required {
border: 1px solid red;
}
input:optional {
border: 1px solid blue;
}*/
/*a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: orange;
}
a:active {
color: green;
}*/
/*input:focus {
border: 1px solid red;
}*/
/*a:not([href*="baidu"]) {
color: red;
}*/
/*p:empty {
display:none;
}*/
/*p:lang(en) {
color: red;
}*/
b:target {
color: red;
}
::selection {
color: red;
}
相关推荐
本章主要关注CSS选择器，它是CSS中用于定位和选中HTML元素的关键概念。CSS选择器允许我们以精确的方式控制网页上的各个元素样式。 首先，我们要理解CSS选择器的基本类型。这些包括： 1. **类型选择器**：例如`h1`...
### CSS选择器深入解析 #### 一、基本选择器概览 **1. 通用元素选择器 (`*`)** 通用元素选择器是最基础的选择器之一，它匹配文档中的每一个元素，无论元素类型如何。例如，`* { margin: 0; padding: 0; }` 这样的...
CSS选择器是CSS语言的核心部分，它用于...熟练掌握这些CSS选择器可以让你更高效地定位和控制网页元素，实现精确的布局和样式设计。在实际工作中，结合使用不同的选择器，可以创建复杂的样式规则，实现丰富的视觉效果。
第十三章选择器 第十四章使用选择器在页面中插入内容 第十五章文字与字体相关样式 第十六章盒相关样式 第十七章与背景和边框相关样式 第十八章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选择...
三、CSS 2.1 属性选择器 9. `E[att]` 选择具有指定属性`att`的E元素。 10. `E[att=val]` 选择`att`属性值为`val`的E元素。 11. `E[att~=val]` 选择`att`属性值包含空格分隔的`val`的E元素。 12. `E[att|=val]` 选择`...
本章"精通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的继承...
…… 第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...
- **第8章**：通常涉及CSS选择器的使用，如何有效地选取和应用样式。 - **第9章**：可能包含HTML5的新特性，如表单控件、离线存储等。 - **第11章**：可能介绍CSS3的布局技巧，如盒模型、Flexbox或Grid布局。 - ...
1. CSS选择器：学习类选择器、ID选择器、标签选择器、后代选择器、子元素选择器等，以精确地选择和样式化元素。 2. 属性与值：掌握颜色、字体、尺寸、边距、边框等CSS属性及其使用方法。 3. 盒模型：理解内容、内...