CSS选择符

1、通用选择符（通配符）：*

CSS样式

*{ color: #000000; }

p{color: #0000FF; }

p *{color: #FF0000;}

HTML代码

<p>蓝色</p>
<div>黑色</div>
<p>蓝色，<span>红色，</span><em>红色，</em><strong>红色，</strong>很神奇！</p>

效果图

2、类选择符：.类名

使用之前

使用之前
使用之后
使用类区分之后
源码

<p>CSS很强大，可以控制页面中任何元素的表现形式</p>
<p class="second">与众不同，突出个性</p>
<p>与世界同步，做一个成功的页面</p>

CSS样式

3、包含选择符（派生/后代选择符）：元素 子元素（div p）

作用于某个元素中的子元素
示例效果：

包含选择符例子
源码：

• CSS

  p strong{
    color: #FF0000;
    font-size: 18px;
    text-decoration: underline;
  }
  

• HTML

  <p>CSS很强大，<strong>可以控制页面中<span>任何元素</span>的表现形式</strong></p>
  <p class="second">与众不同，突出个性</p>
  <strong>与世界同步，做一个成功的页面</strong>
  

特别说明：

p span和p strong span的效果一样

p span & p strong span

4、子选择符（对象选择符）：>

定义子元素对象的样式，html同上。
效果图：

body > strong
CSS样式：
CSS样式

5、相邻选择符：+

匹配同一父级下某个元素之后的元素，HTML代码见包含选择符中
效果图：

p + strong

CSS样式：

CSS样式

6、属性选择符：是在标签中直接使用，不能在CSS文件中

模式

• E[atttr]：具有某个属性的所有标签
• E[atttr="value"]：属性值等于某个值的标签
• E[atttr~="value"]：属性的属性值用空格隔开的标签
• E[atttr|="value"]：属性的属性值必须以value开始及使用连字符“-”分割的标签E

E：表示任一标签
attr：标签E的任一属性
value：属性的属性值
注：当属性值没有空格只是一个单词时，“=”、“|=”和“~=”效果一样

示例效果图：

属性选择符

CSS样式：

HTML：

p class="paragraphs">带class属性的段落标签p</p>
<a href="http://www.baidu.com">没有class属性的标签a</a>
<p>这个没有class属性</p>
<a href="http://www.google.com" class="link">带class属性的链接标签a</a>

7、ID选择符：#

同一个页面中ID最好唯一
源码

• HTML代码：

  <p class="paragraphs">带class属性的段落标签p</p>
  <a href="http://www.baidu.com">没有class属性的标签a</a>
  <p id="paragraphs">这个没有class属性</p>
  <a href="http://www.google.com" class="link">带class属性的链接标签a</a>
  

• CSS样式：

  
  CSS样式

效果图：

8、选择符的组合关系

• 针对性使用类选择符或者ID选择符
• 选择符群组：使用英文逗号隔开多个选择符
• 选择符组合：选择符之间使用空格分割且为父子关系

个人感觉选择符组合的使用和包含选择符一样的

9、伪类

语法

选择符：伪类{属性：属性值；}

使用对象
    经常是a标签使用

a:link{}：链接默认状态
a:visited{}：链接访问后状态
a:hover{}：鼠标放在链接上状态
a:active{}：链接点击时状态

10、伪对象

在HTML文档指定的信息之外，创建了文档的额外信息。
语法

选择符：伪对象{属性：属性值；}

使用示例