CSS学习
<h1 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">什么是CSS</span></h1><p class="md-end-block md-p"><span class="md-plain">如何学习</span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">css是什么</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">css怎么用</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-pair-s "><em><span class="md-pair-s "><strong><span class="md-plain">css选择器（重点）</span></strong></span></em></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">美化网页（文字美化，阴影，超链接，列表，渐变）</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">盒子模型</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">浮动</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">定位</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">网页动画（特效）w3c，菜鸟教程</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">仿网站</span></p>
</li>
</ol>
<h1 class="md-end-block md-heading"><span class="md-plain">1.1什么是CSS</span></h1>
<p class="md-end-block md-p"><span class="md-plain">Cascading Style Sheet 层叠级联样式表</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS：表现（美化网页）</span></p>
<p class="md-end-block md-p"><span class="md-plain">字体，颜色，边距，高宽....</span></p>
<h1 class="md-end-block md-heading"><span class="md-plain">1.2发展史</span></h1>
<p class="md-end-block md-p"><span class="md-plain">CSS1.0</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS2.0 DIV（自定义块）+CSS HTML与CSS结构分离思想，网页变简单</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS2.1浮动，定位</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS3.0圆角，阴影，动画....浏览器兼容性 </span></p>
<h1 class="md-end-block md-heading"><span class="md-plain">2快速入门</span></h1>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>第一个css<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br><span><span class="cm-comment"><!-- 规范，<style>可以编写css的代码<br><span><span class="cm-comment">语法：<br><span> <span class="cm-comment">选择器{<br><span> <span class="cm-comment">声明1;<br><span> <span class="cm-comment">声明2;<br><span> <span class="cm-comment">声明3;<br><span> <span class="cm-comment">}<br><span><span class="cm-comment">--><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"style.css"<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>我是标题<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br><span><br><span><br><span>style.css<br><span>h1{<br><span> color: aqua;<br><span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="C:\Users\GOD\AppData\Roaming\Typora\typora-user-images\image-20220809134247919.png"><img alt="image-20220809134247919" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"><span class="md-plain">css的优势：</span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">内容和表现分离</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">网页结构表现统一，可以实现复用</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">样式十分丰富</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">建议使用独立的html的css</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">利用SEO，容易被搜索引擎收录</span></p>
</li>
</ol>
<h1 class="md-end-block md-heading"><span class="md-plain">2.1CSS的三种导入方式</span></h1>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>导入方式<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br><span> <span class="cm-comment">/*内部样式*/<br><span> <span class="cm-tag">h1{<br><span> <span class="cm-property">color: <span class="cm-keyword">aqua;<br><span> }<br><span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"style.css"<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br><span><span class="cm-comment"><!--优先级：就近原则--><br><span><span class="cm-comment"><!--行内样式--><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">style=<span class="cm-string">"color: red;"<span class="cm-tag cm-bracket">>1<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">拓展：外部样式两种写法</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">链接式xtml</span></p>
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-operator"><<span class="cm-variable">link <span class="cm-variable">rel<span class="cm-operator">=<span class="cm-string">"stylesheet" <span class="cm-variable">href<span class="cm-operator">=<span class="cm-string">"style.css"<span class="cm-operator">></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">导入式CSS2.1特有的</span></p>
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span> <span class="cm-operator"><<span class="cm-variable">style<span class="cm-operator">><br><span> <span class="cm-meta">@import <span class="cm-string">"style.css";<br><span> <span class="cm-operator"></<span class="cm-variable">style<span class="cm-operator">></span></span></span></span></span></span></span></span></span></span></span></pre>
<h1 class="md-end-block md-heading"><span class="md-plain">3.选择器</span></h1>
<p class="md-end-block md-p"><span class="md-plain">作用：选择页面上的某一个或者某一类元素</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">3.1、基本选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、标签选择器：选择一类标签</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span> <span class="cm-operator"><<span class="cm-variable">style<span class="cm-operator">><br><span> <span class="cm-comment">/*标签选择器会选择到页面上所有的这个标签的元素*/<br><span> <span class="cm-variable">h1{<br><span> <span class="cm-variable">color: <span class="cm-variable">aqua;<br><span> <span class="cm-variable">background: <span class="cm-variable">red;<br><span> <span class="cm-variable">border<span class="cm-operator">-<span class="cm-variable">radius: <span class="cm-number">30<span class="cm-variable">px;<br><span> }<br><span> <span class="cm-variable">p{<br><span> <span class="cm-variable">font<span class="cm-operator">-<span class="cm-variable">size: <span class="cm-number">40<span class="cm-variable">px;<br><span> }<br><span> <span class="cm-operator"></<span class="cm-variable">style<span class="cm-operator">><br><span><span class="cm-operator"></<span class="cm-variable">head<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">body<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1<span class="cm-operator">><span class="cm-variable">学java<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">p<span class="cm-operator">><span class="cm-variable">听狂神说<span class="cm-operator"></<span class="cm-variable">p<span class="cm-operator">><br><span><span class="cm-operator"></<span class="cm-variable">body<span class="cm-operator">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">2、类选择器 class:选择所有class属性一致的标签，跨标签</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span> <span class="cm-operator"><<span class="cm-variable">style<span class="cm-operator">><br><span> <span class="cm-comment">/*类选择器的格式.class的名称{}<br><span> <span class="cm-comment">好处：可以多个标签归类，是同一个class，可以复用<br><span> <span class="cm-comment">*/<br><span> .<span class="cm-variable">qingjiang{<br><span> <span class="cm-variable">color: <span class="cm-variable">aqua;<br><span> }<br><span> .<span class="cm-variable">kuanshen{<br><span> <span class="cm-variable">color: <span class="cm-variable">red;<br><span> }<br><span> <span class="cm-operator"></<span class="cm-variable">style<span class="cm-operator">><br><span><span class="cm-operator"></<span class="cm-variable">head<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">body<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1 <span class="cm-keyword">class<span class="cm-operator">=<span class="cm-string">"qingjiang"<span class="cm-operator">><span class="cm-variable">标题1<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1 <span class="cm-keyword">class<span class="cm-operator">=<span class="cm-string">"kuanshen"<span class="cm-operator">><span class="cm-variable">标题2<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1<span class="cm-operator">><span class="cm-variable">标题3<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">p <span class="cm-keyword">class<span class="cm-operator">=<span class="cm-string">"qingjiang"<span class="cm-operator">><span class="cm-variable">p标签<span class="cm-operator"></<span class="cm-variable">p<span class="cm-operator">><br><span><span class="cm-operator"></<span class="cm-variable">body<span class="cm-operator">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">3、id选择器：全局唯一</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span> <span class="cm-operator"><<span class="cm-variable">style<span class="cm-operator">><br><span> <span class="cm-comment">/*<br><span> <span class="cm-comment">id选择器 必须保证全局唯一！<br><span> <span class="cm-comment">#id名称{}<br><span> <span class="cm-comment">不遵循就近原则，固定的<br><span> <span class="cm-comment">id选择器>class 选择器>标签选择器<br><span> <span class="cm-comment">*/<br><span> <span class="cm-variable">#qingjiang{<br><span> <span class="cm-variable">color: <span class="cm-variable">aquamarine;<br><span> }<br><span> <span class="cm-operator"></<span class="cm-variable">style<span class="cm-operator">><br><span><span class="cm-operator"></<span class="cm-variable">head<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">body<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1 <span class="cm-variable">id<span class="cm-operator">=<span class="cm-string">"qingjiang"<span class="cm-operator">><span class="cm-variable">标题1<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1<span class="cm-operator">><span class="cm-variable">标题2<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1<span class="cm-operator">><span class="cm-variable">标题3<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"><<span class="cm-variable">h1<span class="cm-operator">><span class="cm-variable">标题4<span class="cm-operator"></<span class="cm-variable">h1<span class="cm-operator">><br><span><span class="cm-operator"></<span class="cm-variable">body<span class="cm-operator">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.2层次选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、后代选择器：在某个元素的后面 爷爷 爸爸 儿子</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br><span> <span class="cm-comment">/*后代选择器*/<br><span> <span class="cm-tag">body <span class="cm-tag">p{<br><span> <span class="cm-property">background: <span class="cm-keyword">aliceblue;<br><span> }<br><span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">2、子选择器 只有后面一代</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>/*子选择器*/<br><span> body>p{<br><span> background: bisque;<br><span> }</span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">3、相邻兄弟选择器 同辈</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span> /*兄弟选择器:只能有一个，向下*/<br><span> .active+p{<br><span> background: azure;<br><span> }<br><span><br><span><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p0<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"active"<span class="cm-tag cm-bracket">>p1<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p2<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">4、通用选择器</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>.active~p{<br><span> background: blueviolet;<br><span> }<br><span>当前选中元素的向下的所有兄弟元素</span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.2结构伪类选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">伪类：条件</span></p>
<p class="md-end-block md-p"><span class="md-plain">带冒号的一般是伪类</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br><span> <span class="cm-comment">/*ul的第一个子元素*/<br><span> <span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">first-child{<span class="cm-comment">/*ul li 选中其中的元素*/<br><span> <span class="cm-property">background: <span class="cm-keyword">blue;<br><span> }<br><span> <span class="cm-comment">/*ul的最后一个子元素*/<br><span> <span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">last-child{<br><span> <span class="cm-property">background: <span class="cm-keyword">blueviolet;<br><span> }<br><span> <span class="cm-comment">/*选中p1：定位到父元素，选择当前的第一个元素<br><span><span class="cm-comment"> 选择当前p元素的父级元素，选中父级元素的第一个,按顺序<br><span><span class="cm-comment"> */<br><span> <span class="cm-tag">p:<span class="cm-variable-3">nth-child(<span class="cm-number">2){<br><span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br><span> }<br><span> <span class="cm-comment">/*按类型 按类型*/<br><span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2){<br><span> <span class="cm-property">background: <span class="cm-keyword">burlywood;<br><span> }<br><span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain"> <span class="md-image md-img-loaded" data-src="C:\Users\GOD\AppData\Roaming\Typora\typora-user-images\image-20220809151733986.png"><img alt="image-20220809151733986" data-local-refresh="true"></span></span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">3.4属性选择器（常用）</span></h2>
<p class="md-end-block md-p"><span class="md-plain">id + class结合</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>= 绝对等于<br><span>*= 包含等于<br><span>^= （开头为什么什么的）等于<br><span>$= （结尾为什么什么的）等于</span></span></span></span></pre>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br><span> <span class="cm-qualifier">.demo <span class="cm-tag">a{<br><span> <span class="cm-property">float: <span class="cm-atom">left;<br><span> <span class="cm-property">display: <span class="cm-atom">block;<br><span> <span class="cm-property">height: <span class="cm-number">50px;<br><span> <span class="cm-property">width: <span class="cm-number">50px;<br><span> <span class="cm-property">border-radius: <span class="cm-number">10px;<br><span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br><span> <span class="cm-property">text-align: <span class="cm-atom">center;<br><span> <span class="cm-property">color: <span class="cm-keyword">blue;<br><span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br><span> <span class="cm-property">margin-right: <span class="cm-number">5px;<br><span> <span class="cm-property">font: <span class="cm-atom">bold <span class="cm-number">20px/<span class="cm-number">50px <span class="cm-variable">Arial;<br><span> }<br><span> <span class="cm-comment">/*存在id属性的元素 a[]{}*属性名，属性名=属性值（正则）*/<br><span> <span class="cm-tag">a[<span class="cm-tag">id]{<br><span> <span class="cm-property">background: <span class="cm-keyword">red;<br><span> }<br><span> <span class="cm-comment">/*id存在first的元素*/<br><span> <span class="cm-tag">a[<span class="cm-tag">id=<span class="cm-tag">first]{<br><span> <span class="cm-property">background: <span class="cm-keyword">pink;<br><span> }<br><span> <span class="cm-comment">/*class中有links item 1的元素*/<br><span> <span class="cm-tag">a[<span class="cm-tag">class=<span class="cm-string">"links item 1"]{<br><span> <span class="cm-property">background: <span class="cm-keyword">bisque;<br><span> }<br><span> <span class="cm-comment">/*class中有links的元素*/<br><span> <span class="cm-tag">a[<span class="cm-tag">class*=<span class="cm-string">"links"]{<br><span> <span class="cm-property">background: <span class="cm-keyword">blueviolet;<br><span> }<br><span> <span class="cm-comment">/*选中href中以http开头的元素*/<br><span> <span class="cm-tag">a[<span class="cm-tag">href^=<span class="cm-string">"http"]{<br><span> <span class="cm-property">background: <span class="cm-keyword">coral;<br><span> }<br><span> <span class="cm-comment">/*选中href中以png结尾的元素*/<br><span> <span class="cm-tag">a[<span class="cm-tag">href$=<span class="cm-string">"png"] {<br><span> <span class="cm-property">background: <span class="cm-keyword">greenyellow;<br><span> }<br><span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"demo"<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"http://www.baidu.com" <span class="cm-attribute">class=<span class="cm-string">" item first" <span class="cm-attribute">id=<span class="cm-string">"first"<span class="cm-tag cm-bracket">>1<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"" <span class="cm-attribute">class=<span class="cm-string">" item active" <span class="cm-attribute">target=<span class="cm-string">"_blank" <span class="cm-attribute">title=<span class="cm-string">"test"<span class="cm-tag cm-bracket">>2<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"image/123.html" <span class="cm-attribute">class=<span class="cm-string">"links item" <span class="cm-attribute">id=<span class="cm-string">""<span class="cm-tag cm-bracket">>3<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"image/123.png" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>4<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"" <span class="cm-attribute">class=<span class="cm-string">"links item 1"<span class="cm-tag cm-bracket">>5<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"" <span class="cm-attribute">class=<span class="cm-string">"links item 1"<span class="cm-tag cm-bracket">>6<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br><span><br><span><br><span><br><span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="C:\Users\GOD\AppData\Roaming\Typora\typora-user-images\image-20220809163317098.png"><img alt="image-20220809163317098" data-local-refresh="true"></span></p>
<br class="Apple-interchange-newline"><br><br><br>
来源：https://www.cnblogs.com/wm21/p/16566603.html
頁:
[1]