详谈CSS选取器
<h3 style="color: black; text-align: left; margin-bottom: 10px;">什么是<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">每一条css样式声明由两部分<span style="color: black;">构成</span>：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">选取</span>器{
样式;
}</div><span style="color: black;">选取</span>器”指明了{}中的“样式”的<span style="color: black;">功效</span>对象，<span style="color: black;">亦</span><span style="color: black;">便是</span>“样式”<span style="color: black;">功效</span>于网页中的<span style="color: black;">那些</span>元素<h3 style="color: black; text-align: left; margin-bottom: 10px;">有哪几种<span style="color: black;">选取</span>器</h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">标签<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签<span style="color: black;">选取</span>器其实<span style="color: black;">便是</span>html代码中的标签：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">p</span><span style="color: black;">{</span><span style="color: black;">font-size</span><span style="color: black;">:</span><span style="color: black;">12</span><span style="color: black;">px</span><span style="color: black;">;</span><span style="color: black;">line-height</span><span style="color: black;">:</span><span style="color: black;">1.6</span><span style="color: black;">em</span><span style="color: black;">;}</span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面的css样式代码的<span style="color: black;">功效</span>：为p标签设置12px字号，行间距设置1.6em的样式。em并不等于固定的px，1em<span style="color: black;">暗示</span>父级元素的字体<span style="color: black;">体积</span>。各浏览器默认<span style="color: black;">状况</span>下1em=16px。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">类<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span> .类名{}设置元素样式：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></span>css<span style="color: black;">选取</span>器<span style="color: black;"></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">style</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span><span style="color: black;">></span>
<span style="color: black;">.</span><span style="color: black;">dv</span><span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">black</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"dv"</span><span style="color: black;">></span>
我是一个div
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、英文圆点开头</p>2、其中类选器名<span style="color: black;">叫作</span><span style="color: black;">能够</span>任意起名（但不要起中文）<h3 style="color: black; text-align: left; margin-bottom: 10px;">ID<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span> #ID名{}设置元素样式：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></span>css<span style="color: black;">选取</span>器<span style="color: black;"></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">style</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span><span style="color: black;">></span>
<span style="color: black;">#</span><span style="color: black;">dv</span><span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">black</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"dv"</span><span style="color: black;">></span>
我是一个div
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、<span style="color: black;">运用</span>ID<span style="color: black;">选取</span>器，<span style="color: black;">必要</span>给标签添加上id属性，为标签设置id="ID名<span style="color: black;">叫作</span>"，而不是class="类名<span style="color: black;">叫作</span>"</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、ID<span style="color: black;">选取</span>符的前面是井号（#）号，而不是英文圆点（.）</p>3、id属性的值既为当前标签的id，<span style="color: black;">尽可能</span>见名思意，语义化<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">类和ID<span style="color: black;">选取</span>器的区别</p>ID<span style="color: black;">选取</span>器只能在文档中<span style="color: black;">运用</span>一次，而类<span style="color: black;">选取</span>器<span style="color: black;">能够</span><span style="color: black;">运用</span>多次。<span style="color: black;">咱们</span><span style="color: black;">能够</span>为一个元素<span style="color: black;">同期</span>设多个样式，但只<span style="color: black;">能够</span>用类<span style="color: black;">选取</span>器的<span style="color: black;">办法</span>实现，ID<span style="color: black;">选取</span>器是不<span style="color: black;">能够</span>的（<span style="color: black;">不可</span><span style="color: black;">运用</span> ID 词列表）。<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">style</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span><span style="color: black;">></span>
<span style="color: black;">.</span><span style="color: black;">stress</span><span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;">.</span><span style="color: black;">bigsize</span><span style="color: black;">{</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span><span style="color: black;">25</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;">#</span><span style="color: black;">stressid</span><span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;">#</span><span style="color: black;">bigsizeid</span><span style="color: black;">{</span>
<span style="color: black;">font-size</span><span style="color: black;">:</span><span style="color: black;">25</span><span style="color: black;">px</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"stress bigsize"</span><span style="color: black;">></span><span style="color: black;">运用</span>类<span style="color: black;">选取</span>器样式设置成功<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"stressid bigsizeid"</span><span style="color: black;">></span><span style="color: black;">运用</span>ID<span style="color: black;">选取</span>器样式设置失败<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">子<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>> 语法，用于<span style="color: black;">选取</span>指定标签元素的<span style="color: black;">第1</span>代子元素：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">出于性能<span style="color: black;">思虑</span>少用。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">style</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span><span style="color: black;">></span>
<span style="color: black;">.</span><span style="color: black;">first</span><span style="color: black;">></span><span style="color: black;">span</span><span style="color: black;">{</span><span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</span> <span style="color: black;">red</span><span style="color: black;">;}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"first"</span><span style="color: black;">></span>类名为first下的
<span style="color: black;"><</span><span style="color: black;">span</span><span style="color: black;">></span>标签被设置红色边框样式<span style="color: black;"></</span><span style="color: black;">span</span><span style="color: black;">></span>
<span style="color: black;">这儿</span>不会有特殊样式<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">后代<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">语法为空格，用于<span style="color: black;">选取</span>指定标签元素下的后辈元素：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">出于性能<span style="color: black;">思虑</span>少用。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">style</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</span><span style="color: black;">></span>
<span style="color: black;">.</span><span style="color: black;">food</span> <span style="color: black;">li</span><span style="color: black;">{</span>
<span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</span> <span style="color: black;">red</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">ul</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"food"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span>川菜
<span style="color: black;"><</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span>水煮肉片<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span><span style="color: black;">夫妇</span>肺片<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span>新疆菜
<span style="color: black;"><</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span>大盘鸡<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">li</span><span style="color: black;">></span>烤全羊<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">li</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">ul</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">通用<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">通用<span style="color: black;">选取</span>器是功能最强大的<span style="color: black;">选取</span>器，它<span style="color: black;">运用</span>一个*号指定，<span style="color: black;">功效</span>是匹配html中所有标签元素，下面代码将html中任意标签元素字体颜色<span style="color: black;">所有</span>设置为红色：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">不<span style="color: black;">意见</span><span style="color: black;">运用</span>。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">*</span> <span style="color: black;">{</span><span style="color: black;">color</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;}</span></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">伪类<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">伪类<span style="color: black;">选取</span>符<span style="color: black;">准许</span><span style="color: black;">经过</span>:hover给html不存在的标签（标签的某种状态）设置样式，<span style="color: black;">例如</span>说<span style="color: black;">咱们</span>给html中一个标签元素的鼠标悬浮的状态来设置字体颜色：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">a</span><span style="color: black;">:</span><span style="color: black;">hover</span><span style="color: black;">{</span><span style="color: black;">color</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;}</span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">以上</span>css代码<span style="color: black;">暗示</span>a 标签中元素鼠标滑过的状态为字体颜色变红。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">不要被</p>
一看到楼主的气势，我就觉得楼主同在社区里灌水。
页:
[1]