选择器

1.标签选择器

内容：

       

标签选择器

css代码：

h1 {

     font-size: 50px;

     color: red

}

运行结果：

2,类(class)选择器：

（可以在文档中使用多次，且可以为一个元素设计多个样式。）

内容：

三年级时，我还是一个胆小如鼠的女孩子，上课从不敢回答问题，怕打错了老师批评我！

css代码如下：

.passage {

    text-indent: 4em;/*文本缩进*/

    letter-spacing： 1em  /*字间距*/

}

运行结果如下：

2.1，多样式：

学校举办的活动我也没勇气参加

.p { color: red }

.p2 { font-size: 20px }

运行如下：

3,id选择器

（在一个文档中只能使用一次，而且仅一次。）

内容：

胆小如鼠

css代码如下：

#span {

    color: #0f0

}

运行结果如下：

4,子选择器“>”

（用于选择元素的第一代子元素（直接后代））

   

• 茶

         

               

  • 红茶

               

  • 绿茶

         

     

css代码：

.food>li {

     border: 2px solid red

}

运行如下：

5，包含（后代）选择器“空格”

（指定标签的所有后代元素）

css代码：

food li {

     color： #0ff

}

运行结果：

6,通用选择器“*”

匹配html中的所有标签元素

* { color：red }

7,伪类选择器

它允许给html上不存在的标签设置样式。如：

a:hover { color:red } /*鼠标滑过字体颜色*/

运行效果：

原状态

鼠标滑过时

8，分组选择器“,”

多个元素拥有同一样式：

h1,p {color: green}

相当于：

h1 {color: green }

p {color: green}

9.属性选择器“【属性】”

它不局限于class属性，可以应用于任何属性

我环顾了四周，就我没有举手

css代码：

[text] {

      color: yellow

}

运行结果：

属性选择器，根据属性的值进行匹配

9.1 

[text = "top"]  text属性值是“top”的所有元素

9.2

[text~ = "top"]  text属性值包含“ top” 单词 的所有元素

9.3

[text^ = "def"]  text属性值以 "def" 开头的所有元素

9.4

[text$ = "def"]  text 属性值以 "def" 结尾的所有元素

9.5

[text* = "def"]  text 属性值中包含 "def" 的所有元素

9.6

[text |= "top"]  text属性值以"top"(单词)开头的所有元素

10,相邻兄弟选择器“+”

h1 + p {

    margin-top: 100px

}

运行前效果图

运行后效果图

11，选择器的优先级

11.1

id选择器权值为100

class、属性和伪类选择器的权值为10

标签选择器权值为1

11.2

权值越大优先级越高

权值相同，后定义的优先级较高

样式值含有！important，优先级最高