css选择器

css选择器

小结：

1.标签选择器 div{}
2.通配符 * {}
3.分组选择器 ol,li { }
4.类选择器 .classname {}
5.id选择器 #idname {}
6.关系选择器（后代，子代，同级）
  - 后代  li a
7.伪类选择器  a;houver
8.伪元素选择器 div::after 

1.什么是选择器？

每一条css样式声明(定义)由两部分组成，形式如下：

选择器 {
      样式； 
}

在{ }之前的部分就是“选择器”，“选择器” 指明了{ }中的样式的作用对象，也就样式作用于网页中的那些元素。

css2选择器

• 标签选择器
  标签选择器其实就是html代码中的标签。如右侧代码编辑器中的、、

  、

  、。例如下面代码：

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

• 类选择器
  类选择器在css样式编码中是最常用到的
  语法：
  .类选器名称{css样式代码;}

注意：

• 1、英文圆点开头

• 2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

胆小如鼠
第二步：使用class="类选择器名称"为标签设置一个类，如下：

胆小如鼠
第三步：设置类选器css样式，如下：

.stress{color:red;}/类前面要加入一个英文圆点/

• id选择器

类和id选择器的区别:

• 相同点：可以应用于任何元素
• 不同点：

1. ID选择器只能在文档中使用一次
2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。

• 属性选择器

• 关系选择器

  • 后代选择器
    .food li
  • 子代选择器

  子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。.food>li{border:1px solid red;}.

  • 同级选择器
  • 分组选择器
  • 通配符选择器

---

• 伪类选择器
• 伪元素选择器

总结：

1.标签选择器 div{}
2.通配符 * {}
3.分组选择器 ol,li { }
4.类选择器 .classname {}
5.id选择器 #idname {}
6.关系选择器（后代，子代，同级）
  - 后代  li a
7.伪类选择器  a;houver
8.伪元素选择器 div::after