w3cshool 笔记
1. 派生选择器
比如:
li strong {
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁
2.id 选择器
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：id 属性只能在每个 HTML 文档中出现一次
3. id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
4. 一个选择器，多种用法
即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。
5.单独的选择器
id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
7.CSS 类选择器
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
8.class 派生选择器：
.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）
9.元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">
10. CSS 属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
<style type="text/css">
[title]
{
color:red;
}
</style>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
亲自试一试
例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
11.属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
<img title="W3School" src="/i/w3school_logo_white.gif" />
<br />
<a title="W3School" href="http://w3school.com.cn">W3School</a>
12.属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
<head>
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />
<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
13.CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
14. 选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
15.通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
16.选择子元素
选择子元素
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
17.选择相邻兄弟
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
相关推荐
这篇学习笔记将引导我们深入了解CSS的基本概念、选择器、盒模型、布局方式以及样式优先级等核心知识点。 首先，我们从CSS的基本概念开始。CSS是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
这篇学习笔记主要讲解了 XHTML 和 CSS 在页面布局中的应用，涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型、块状元素和内联元素等内容。 一、基础知识 1. 什么是 W3C？ W3C 是 World Wide Web Consortium ...
它允许我们将设计与内容分离，通过选择器（如类名、ID或元素名）来指定样式规则，包括颜色、字体、布局等。在课程中，韩老师会深入讲述盒模型、定位、浮动、响应式设计等关键概念。 Div元素是HTML中的一个常用容器...
CSS选择器 选择器是CSS中的核心概念，它们用于匹配HTML或XML元素，以应用样式。常见的选择器有： - 类选择器（.class_name）：通过类名来选择元素，如`.myClass`。 - ID选择器 (#id_name)：通过ID来选择元素，如`...
在CSS中，我们通过选择器来指定要应用样式的元素。基本的选择器包括： 1. **元素选择器**：通过元素名，如`p`，选择所有`<p>`元素。 2. **类选择器**：使用`.`后跟类名，如`.myClass`，选择具有该类名的元素。 3. *...
CSS是实现网页美观的关键技术，通过选择器定位HTML元素，并应用样式规则。CSS的基本概念包括： - **选择器**：如`.classname`（类选择器）、`#idname`（ID选择器）、`element`（类型选择器），用于指定哪些HTML元素...
- CSS 选择器允许我们根据元素类型、类、ID 甚至属性来选择需要样式的元素。在案例中，`.style1 table` 和 `.style1 table td` 分别选择了 `div` 内的表格及表格中的单元格，并分别设置了它们的样式。 3. **CSS的...
#### 六、CSS选择器与属性 - **选择器**: - 类选择器：`.classname`。 - ID选择器：`#idname`。 - 元素选择器：`element`。 - **属性**: - `color`: 文本颜色。 - `background-color`: 背景颜色。 - `font-...
### CSS选择器 选择器用于选取HTML元素，包括： 1. **标签选择器**（Element Selectors）：如`p`选择所有的段落元素。 2. **类选择器**（Class Selectors）：使用`.`前缀，如`.class-name`选择所有类名为`class-name...
【CSS简介】 CSS，全称为层叠样式表...掌握选择器的用法、盒模型的理解、布局技巧和CSS3的新特性，能帮助开发者更好地控制网页的视觉呈现和用户体验。持续学习和实践CSS，将使你能够创建出更具吸引力和功能性的网站。
默认的W3C盒模型与IE盒模型有所不同，需注意处理。 ### 二、CSS布局 1. **流体布局**：CSS允许创建响应式设计，如使用百分比宽度使元素适应屏幕大小。 2. **Flexbox**：Flex布局（弹性盒子）提供了一种灵活的方式...
以上内容总结了DIV CSS学习笔记中的关键知识点，包括文档类型声明、CSS选择器、CSS引入方式、布局模型以及背景与边框设置。这些知识对于前端开发者来说至关重要，能够帮助他们创建结构良好、样式丰富的网页。
CSS的基础选择器包括： * `*`：通配符选择器 * `E`：类型选择器 * `.class`：类选择器 * `#id`：ID选择器 * `[attr]`：属性选择器 CSS 属性 CSS的属性包括： * `color`：文本颜色 * `background-color`：背景...
- **CSS选择器**：用于选择要设置样式的HTML元素。主要包括： - 类选择器：使用`.`表示，如`.classname`。 - ID选择器：使用`#`表示，如`#idname`。一个页面中ID应该是唯一的。 - 标签选择器：直接使用标签名，如...
在`CSS学习笔记-01.md`、`CSS学习笔记-02.md`和`CSS学习笔记-03.md`中，可能会深入讲解这些概念，包括更多选择器用法、布局技巧、CSS3特效和预处理器的使用，帮助读者逐步掌握这个强大的样式语言。
本文档主要介绍了 HTML、CSS、JS、JQuery、XML、JSP、Servlet 和 MVC 等前端和后端相关技术的笔记，涵盖了 HTML 基础标签、CSS 基础选择器、JS 基础语法、JQuery 选择器、XML 基础语法、JSP 和 Servlet 的基本概念、...
important`，合理使用CSS选择器，减少HTTP请求等。 以上就是CSS学习的一些基础知识点，通过这些知识，初学者可以逐步构建起对CSS的理解，并开始创建美观、功能完善的网页。随着实践经验的积累，可以进一步深入研究...
CSS（Cascading Style Sheets）是一种用于描述网页样式的语言，由W3C组织制定。CSS主要用于美化网页，提高用户体验，实现网页布局、样式、颜色、字体、背景等的控制。 CSS基础知识 CSS基础知识是学习CSS的基础，...