【Web前端HTML5&CSS3】04-CSS语法与选择器
<blockquote><p>笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版</p>
</blockquote>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>CSS 语法与选择器<ul><li>1. CSS 简介<ul><li>层叠样式表</li><li>内联样式（行内样式）</li><li>内部样式表</li><li>外部样式表</li></ul></li><li>2. CSS 基本语法<ul><li>注释<ul><li>css 中的注释</li><li>html 中的注释</li><li>JS(JavaScript)和 JQuery 中的注释</li></ul></li><li>基本语法<ul><li>选择器</li><li>声明块</li></ul></li></ul></li><li>3. CSS 选择器<ul><li>通配选择器（Universal selector）</li><li>元素选择器（Type selector）</li><li>类选择器（Class selector）</li><li>ID 选择器（ID selector）</li><li>属性选择器（Attribute selector）</li></ul></li><li>4. 复合选择器<ul><li>交集选择器</li><li>并集选择器（选择器分组）</li></ul></li><li>5. 关系选择器<ul><li>子元素选择器（Child combinator）</li><li>后代元素选择器（Descendant combinator）</li><li>兄弟元素选择器（Sibling combinator）</li></ul></li><li>6. 伪类选择器</li><li>7. 伪元素选择器</li><li>8. CSS Dinner 游戏</li></ul></li></ul></div><p></p>
<h1 id="css-语法与选择器">CSS 语法与选择器</h1>
<h2 id="1-css-简介">1. CSS 简介</h2>
<h3 id="层叠样式表">层叠样式表</h3>
<p>网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层</p>
<p>总之一句话，CSS 用来设置网页中元素的样式</p>
<p>使用 CSS 来修改元素样式的方式大致可以分为 3 种</p>
<h3 id="内联样式行内样式">内联样式（行内样式）</h3>
<p>在标签内部通过<code>style</code>属性来设置元素的样式</p>
<pre><code class="language-html"><p style="color:red;font-size:60px;">内联样式（行内样式）</p>
</code></pre>
<p>问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）</p>
<h3 id="内部样式表">内部样式表</h3>
<p>将样式编写到<code>head</code>中的<code>style</code>标签里然后通过 css 的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用</p>
<pre><code class="language-css"><style>
p{
color:green;
font-size:50px;
}
</style>
</code></pre>
<p>问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用</p>
<h3 id="外部样式表">外部样式表</h3>
<p>可以将 css 样式编写到一个外部的 CSS 文件中，然后通过<code>link</code>标签来引入外部的 CSS 文件</p>
<pre><code class="language-html"><link rel="stylesheet" href="./style.css" />
</code></pre>
<p>外部样式表需要通过<code>link</code>标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行<mark>复用</mark></p>
<p>将样式编写到外部的 CSS 文件中，可以使用到浏览器的<mark>缓存机制，从而加快网页的加载速度</mark>，提高用户的体验。</p>
<h2 id="2-css-基本语法">2. CSS 基本语法</h2>
<h3 id="注释">注释</h3>
<h4 id="css-中的注释">css 中的注释</h4>
<p>只能使用<code>/*</code>和<code>*/</code>包裹。即不管是单行注释，还是多行注释，都是以<code>/*</code>开头，以<code>*/</code>结尾</p>
<pre><code class="language-css">/* css中的单行注释 */
/*
css中的多行注释
css中的多行注释
css中的多行注释
*/
</code></pre>
<p>我们对比下其他几种前端语言的注释</p>
<h4 id="html-中的注释">html 中的注释</h4>
<p>只能使用<code><!--</code>和<code>--></code>包裹。即不管是单行注释，还是多行注释，都是以<code><!--</code>开头，以<code>--></code>结尾</p>
<pre><code class="language-html"><!-- html中的单行注释 -->
<!--
html中的多行注释
html中的多行注释
html中的多行注释
-->
</code></pre>
<h4 id="jsjavascript和-jquery-中的注释">JS(JavaScript)和 JQuery 中的注释</h4>
<p>单行注释使用<code>//</code>。多行注释使用<code>/*</code>和<code>*/</code>包裹，以<code><!--</code>开头，以<code>--></code>结尾</p>
<pre><code class="language-js">/* JS(JavaScript)和JQuery中的单行注释*/
/*
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
*/
</code></pre>
<h3 id="基本语法">基本语法</h3>
<p><code>选择器 声明块</code></p>
<h4 id="选择器">选择器</h4>
<p>通过选择器可以选中页面中的指定元素</p>
<ul>
<li>比如<code>p</code>的作用就是选中页面中所有的<code>p</code>元素声明块</li>
</ul>
<h4 id="声明块">声明块</h4>
<p>通过声明块来指定要为元素设置的样式</p>
<ul>
<li>
<p>声明块由一个一个的声明组成，声明是一个名值对结构</p>
</li>
<li>
<p>一个样式名对应一个样式值，名和值之间以<code>:</code>连接，以<code>;</code>结尾</p>
</li>
</ul>
<pre><code class="language-css">h1 {
color: green;
}
</code></pre>
<h2 id="3-css-选择器">3. CSS 选择器</h2>
<h3 id="通配选择器universal-selector">通配选择器（Universal selector）</h3>
<ul>
<li>作用：选中页面中的所有元素</li>
<li>语法：<code>*</code></li>
<li>例子：<code>*{}</code></li>
</ul>
<pre><code class="language-css">* {
color: red;
}
</code></pre>
<h3 id="元素选择器type-selector">元素选择器（Type selector）</h3>
<p>也叫类型选择器、标签选择器</p>
<ul>
<li>作用：根据标签名来选中指定的元素</li>
<li>语法：<code>elementname{}</code></li>
<li>例子：<code>p{}</code> <code>h1{}</code> <code>div{}</code></li>
</ul>
<pre><code class="language-css">p {
color: red;
}
h1 {
color: green;
}
</code></pre>
<h3 id="类选择器class-selector">类选择器（Class selector）</h3>
<ul>
<li>作用：根据元素的 class 属性值选中一组元素</li>
<li>语法：<code>.classname</code></li>
<li>例子：<code>.blue{}</code></li>
</ul>
<pre><code class="language-css">.blue {
color: blue;
}
.size {
font-size: 20px;
}
</code></pre>
<p><code>class</code>是一个标签的属性，它和<code>id</code>类似，不同的是<code>class</code></p>
<ul>
<li>可以重复使用，</li>
<li>可以通过<code>class</code>属性来为元素分组，</li>
<li>可以同时为一个元素指定多个<code>class</code>属性</li>
</ul>
<pre><code class="language-html"><p class="blue size">类选择器（Class selector）</p>
</code></pre>
<h3 id="id-选择器id-selector">ID 选择器（ID selector）</h3>
<ul>
<li>作用：根据元素的<code>id</code>属性值选中一个元素</li>
<li>语法：<code>#idname{}</code></li>
<li>例子：<code>#box{}</code> <code>#red{}</code></li>
</ul>
<pre><code class="language-css">#red {
color: red;
}
</code></pre>
<h3 id="属性选择器attribute-selector">属性选择器（Attribute selector）</h3>
<ul>
<li>作用：根据元素的属性值选中一组元素</li>
<li>语法 1：<code>[属性名]</code> 选择含有指定属性的元素</li>
<li>语法 2：<code>[属性名=属性值]</code> 选择含有指定属性和属性值的元素</li>
<li>语法 3：<code>[属性名^=属性值]</code> 选择属性值以指定值开头的元素</li>
<li>语法 4：<code>[属性名$=属性值]</code> 选择属性值以指定值结尾的元素</li>
<li>语法 5：<code>[属性名*=属性值]</code> 选择属性值中含有某值的元素</li>
<li>例子：<code>p{}</code> <code>p{}</code> <code>p{}</code> <code>p{}</code> <code>p{}</code></li>
</ul>
<pre><code class="language-css">p {
color: orange;
}
p {
color: orange;
}
p {
color: orange;
}
p {
color: orange;
}
p {
color: orange;
}
</code></pre>
<h2 id="4-复合选择器">4. 复合选择器</h2>
<h3 id="交集选择器">交集选择器</h3>
<ul>
<li>作用：选中同时复合多个条件的元素</li>
<li>语法：<code>选择器1选择器2选择器3选择器n{}</code></li>
<li>注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头</li>
</ul>
<pre><code class="language-css">div.red {
font-size: 30px;
}
.a.b.c {
color: blue;
}
</code></pre>
<h3 id="并集选择器选择器分组">并集选择器（选择器分组）</h3>
<ul>
<li>作用：同时选择多个选择器对应的元素</li>
<li>语法：<code>选择器1,选择器2,选择器3,选择器n{}</code></li>
<li>例子：<code>#b1,.p1,h1,span,div.red{}</code></li>
</ul>
<pre><code class="language-css">h1,
span {
color: green;
}
</code></pre>
<h2 id="5-关系选择器">5. 关系选择器</h2>
<ul>
<li><mark>父元素</mark>：直接包含子元素的元素叫做父元素</li>
<li><mark>子元素</mark>：直接被父元素包含的元素是子元素</li>
<li><mark>祖先元素</mark>：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素</li>
<li><mark>后代元素</mark>：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素</li>
<li><mark>兄弟元素</mark>：拥有相同父元素的元素是兄弟元素</li>
</ul>
<h3 id="子元素选择器child-combinator">子元素选择器（Child combinator）</h3>
<ul>
<li>作用：选中指定父元素的指定子元素</li>
<li>语法：<code>父元素 > 子元素</code></li>
<li>例子：<code>A > B</code></li>
</ul>
<pre><code class="language-css">div.box > p > span {
color: orange;
}
</code></pre>
<h3 id="后代元素选择器descendant-combinator">后代元素选择器（Descendant combinator）</h3>
<ul>
<li>作用：选中指定元素内的指定后代元素</li>
<li>语法：<code>祖先 后代</code></li>
<li>例子：<code>A B</code></li>
</ul>
<pre><code class="language-css">div span {
color: skyblue;
}
</code></pre>
<h3 id="兄弟元素选择器sibling-combinator">兄弟元素选择器（Sibling combinator）</h3>
<ul>
<li>作用：选择下一个兄弟</li>
<li>语法：<code>前一个 + 下一个</code> <code>前一个 + 下一组</code></li>
<li>例子 1：<code>A1 + A2</code>（Adjacent sibling combinator）</li>
<li>例子 2： <code>A1 ~ An</code>（General sibling combinator）</li>
</ul>
<pre><code class="language-css">p + span {
color: red;
}
p ~ span {
color: red;
}
</code></pre>
<h2 id="6-伪类选择器">6. 伪类选择器</h2>
<p>伪类（不存在的类，特殊的类）</p>
<p>伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…</p>
<p>伪类一般情况下都是使用<code>:</code>开头</p>
<ul>
<li><mark><code>:first-child</code></mark> 第一个子元素</li>
<li><mark><code>:last-child</code></mark> 最后一个子元素</li>
<li><mark><code>:nth-child()</code></mark> 选中第 n 个子元素
<ul>
<li>n：第 n 个，n 的范围 0 到正无穷</li>
<li>2n 或 even：选中偶数位的元素</li>
<li>2n+1 或 odd：选中奇数位的元素</li>
</ul>
</li>
</ul>
<p>以上这些伪类都是根据所有的子元素进行排序的</p>
<ul>
<li><mark><code>:first-of-type</code></mark> 同类型中的第一个子元素</li>
<li><mark><code>:last-of-type</code></mark> 同类型中的最后一个子元素</li>
<li><mark><code>:nth-of-type()</code></mark> 选中同类型中的第 n 个子元素</li>
</ul>
<p>这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的</p>
<ul>
<li><mark><code>:not()</code></mark>否定伪类，将符合条件的元素从选择器中去除</li>
</ul>
<pre><code class="language-css">/* ul下所有li，黑色 */
ul > li {
color: black;
}
/* ul下第偶数个li，黄色 */
ul > li:nth-child(2n) {
color: yellow;
}
/* ul下第奇数个li，绿色 */
ul > li:nth-child(odd) {
color: green;
}
/* ul下第一个li，红色 */
ul > li:first-child {
color: red;
}
/* ul下最后一个li，黄色 */
ul > li:last-child {
color: orange;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/3373666820269df4830e7827c7b9623b.png" alt="image-20210516162703966" loading="lazy"></p>
<ul>
<li><mark><code>:link</code></mark> 未访问的链接</li>
<li><mark><code>:visited</code></mark> 已访问的链接
<ul>
<li>由于隐私的原因，所以<code>visited</code>这个伪类只能修改链接的颜色</li>
</ul>
</li>
<li><mark><code>:hover</code></mark> 鼠标悬停的链接</li>
<li><mark><code>:active</code></mark> 鼠标点击的链接</li>
</ul>
<pre><code class="language-css">/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: yellow;
}
/* mouse over link */
a:hover {
color: green;
}
/* selected link */
a:active {
color: blue;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/afda6908ddd6c7e9cab45751aabbcb5c.gif" alt="动画2021-5-8" loading="lazy"></p>
<h2 id="7-伪元素选择器">7. 伪元素选择器</h2>
<p>伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）</p>
<p>伪元素使用<code>::</code>开头</p>
<ul>
<li><mark><code>::first-letter</code></mark> 表示第一个字母</li>
<li><mark><code>::first-line</code></mark> 表示第一行</li>
<li><mark><code>::selection</code></mark> 表示选中的内容</li>
<li><mark><code>::before</code></mark> 元素的开始</li>
<li><mark><code>::after</code></mark> 元素的最后</li>
<li><mark><code>::before</code>和<code>::after</code></mark> 必须结合<code>content</code>属性来使用</li>
</ul>
<pre><code class="language-css">/* 段落首字母设置大小为30px */
p::first-letter {
font-size: 30px;
}
/* 段落第一行设置为黄色背景 */
p::first-line {
background-color: yellow;
}
/* 段落选中的部分变绿色 */
p::selection {
background-color: green；;
}
/* div前加上内容 */
div::before {
content: "BEFORE";
color: red;
}
/* div后加上内容 */
div::after {
content: "AFTER";
color: blue;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/d00bc5df427763fc326a624449e0eec2.gif" alt="动画2021-5-7" loading="lazy"></p>
<h2 id="8-css-dinner-游戏">8. CSS Dinner 游戏</h2>
<p>官方地址：CSS Diner - Where we feast on CSS Selectors!</p>
<p>CSS Dinner 是一个帮助初学者快速熟悉 css 各种选择器的网页游戏</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/3655328d85f103c4981afb3105ca3538.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/vectorx/p/14778447.html
頁:
[1]