css-选择器类型

一、元素选择器

文档元素为最基本的选择器
示例：

<!--css-->
p{
           color: #00CCFF;
       }
<!--html-->
<p>css选择器示例</p>

p标签内的字体颜色改变了

二、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式;id 选择器以 "#" 来定义。
示例：

<!--css样式-->
#red {
   color:red;
  }

<!--html代码-->
水果种类
<ul>
      <il><strong>苹果</strong></li>
      <li id="red">香蕉</li>
      <li>李子</li>
</ul>

只有“香蕉”字体颜色为红色

id 属性只能在每个 HTML 文档中出现一次，并且区分大小写

三、类选择器

类选择器以一个点号显示，使用class设置类名
示例：

<!--css-->
.fo{
            color: #00AA88;
        }
<!--html-->
食品
<ul class="fo">
    <li>锅巴</li>
    <li>方便面</li>
</ul>

类为fo的列表文字颜色改变

 

更多：

• 结合元素选择器

<!--css-->
p.important {color:red;}
<!--html-->
<p class="important"> 这个字体颜色为红色</p>
<p>该字体颜色不为红色</p>

只有类为important的文本字体将会改变
 

• 多类选择器

<!--css-->
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<!--html-->
<p class="important warning">
该字体显示为加粗、斜体以及背景色为银色的效果
</p>

样式显示为所有类的样式效果
 

四、属性选择器

为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性

<!--css-->
[title]
{
color:red;
}
<!--html-->

<h2 title="Hello world">Hello world</h2>

字体颜色改变

更多

• 根据具体属性值选择

<!--css-->
p[class="important warning"] {color:red}
<!--html-->
<p class="important warning">字体颜色为红色</p>

属性与属性值必须完全匹配
 

• 根据部分属性值选择

<!--css-->
p[class="important"] {color:red}
<!--html-->
<p class="important warning">字体颜色为红色</p>

 

五、派生选择器

• 后代选择器

通过依据元素在其位置的上下文关系来定义样式
 
示例：

<!--css样式-->
li strong {
    font-style: italic;
    font-weight: normal;
  }

<!--html代码-->
水果种类
<ul>
      <li><strong>苹果</strong></li>
      <li>香蕉</li>
      <li>李子</li>
</ul>

可解释为strong为li的后代

只有strong标签内的字体为斜体

 

• 子元素选择器

只能选择作为某元素子元素的元素。
 
示例：

<!--css-->
h1 > strong {color:red;}
<!--html-->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

只有h内子标签为strong的元素内容样式发生改变

选择作为 h1 元素子元素的所有 strong 元素
子结合符两边可以有空白符
 

• 相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素
 
示例：

<!--css-->
h1 + p {margin-top:50px;}
<!--html-->
<h1>This is a heading.</h1>
<p>和h1有距离</p>
<p>This is paragraph.</p>

选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

 

五、选择器关系

选择器之间可以相互结合

• id选择器和派生选择器

id选择器常用于建立于派生选择器

<!--css样式-->
#top li {
            font-style: italic;
            font-weight: normal;
        }
<!--html代码-->
食品
<ul id="food">
    <li>锅巴</li>
    <li>方便面</li>
</ul>
水果种类
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>李子</li>
</ul>

只有id为food中的li标签内的字体为斜体

• id选择器和类选择器

• 区别 1：id选择器在文档中使用一次
   与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

• 区别 2：不能使用 ID 词列表
   不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
• 区别 3：ID 能包含更多含义
   类似于类，可以独立于元素来选择 ID。