css-选择器类型

一、元素选择器

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

p{
           color: #00CCFF;
       }

css选择器示例

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

二、id选择器

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

#red {
   color:red;
  }


水果种类

      苹果
      
香蕉
      
李子

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

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

三、类选择器

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

.fo{
            color: #00AA88;
        }

食品

    
锅巴
    
方便面

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

 

更多：

• 结合元素选择器

p.important {color:red;}

 这个字体颜色为红色
该字体颜色不为红色

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

• 多类选择器

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}


该字体显示为加粗、斜体以及背景色为银色的效果

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

四、属性选择器

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

[title]
{
color:red;
}


Hello world

字体颜色改变

更多

• 根据具体属性值选择

p[class="important warning"] {color:red}

字体颜色为红色

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

• 根据部分属性值选择

p[class="important"] {color:red}

字体颜色为红色

 

五、派生选择器

• 后代选择器

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

li strong {
    font-style: italic;
    font-weight: normal;
  }


水果种类

      
苹果
      
香蕉
      
李子

可解释为strong为li的后代

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

 

• 子元素选择器

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

h1 > strong {color:red;}

This is very very important.
This is really very important.

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

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

• 相邻兄弟选择器

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

h1 + p {margin-top:50px;}

This is a heading.
和h1有距离
This is paragraph.

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

 

五、选择器关系

选择器之间可以相互结合

• id选择器和派生选择器

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

#top li {
            font-style: italic;
            font-weight: normal;
        }

食品

    
锅巴
    
方便面

水果种类

    
苹果
    
香蕉
    
李子

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

• id选择器和类选择器

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

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