css选择器

一、基础选择器

1、标签（元素）选择器

就是通过标签名选择元素

h4{
    color: blue;
}

 

2、类（class）选择器

通过样式类选择元素

css中用 . 来标识类

熟练运用类选择器很重要，提炼出共有的部分作为一类

.类名{
    color: gray;
}

 

3、id（身份证号）选择器

通过元素的id值（id是唯一的）来选择元素

css中用 #  号标识id

#id名称{
    color:red;
}

 

二、高级选择器

1、后代选择器

因为html元素可以嵌套，所以可以从某个元素的后代查找特定元素，并设置样式

如只想设置div标签下的a标签的样式，这样一来只要是div下面的所有a标签该样式都会生效

注：div标签所在的位置既可以是标签选择器，也可以是类选择器，id选择器

div a{
    color:green;
}

 

2、子代选择器

即只从直接子元素所要修饰的元素，隔代不生效，如爷爷只找儿子，不找孙子

语法：用 > 号连接

div>a{
    color:pink;
}

 

3、组合选择器（并集选择器）

即不同元素有相同样式时，只需设置一套样式即可

语法：用 , 逗号隔开

h1,a,span,.wasp{
    font-size: 30px;
}

 

4、交集选择器（比较少用）

由两个选择器连接构成，选中两者范围的交集（即相同部门）

语法：选择器1选择器2{ }

注意：选择器之间不能有空格，第一个选择器必须是标签选择器，第二个选择器必须是类选择器或id选择器

 

5、伪类选择器

1）没有被访问过（没有被点击过）的超链接a标签样式

a:link {
  color: blue;
}

2）被访问过（被点击过）的超链接a标签样式

a:visited {
  color: gray;
}

3）鼠标悬浮在超链接a标签的样式

a:hover {
  background-color: #eee; 
}

4）鼠标捆住时（鼠标点击瞬间）超链接a标签的样式

a:active {
  color: green;
}

hover选择器在网页中非常好用，如果是我鼠标悬浮的是父盒子，想让父盒子的子盒子显示出来，这种效果其实也可以用hover选择器。但是我们要将hover选择器和后代选择器结合起来一起用,下面是个例子，大家copy看效果，瞬间就明白,鼠标悬浮alex上 会显示一张图片。

---

 

css选择器总结

语法：

选择器{

属性:值;

}

 

作用：选中页面上的元素（标签），设置对应的样式

基础选择器

1、标签选择器

对页面中相同的元素，设置共同的属性

2、ID选择器

任何的元素都可以设置id

id是唯一的，并且不能重复，表示选中的是有特性的元素

3、class选择器

任何的元素都可以设置类

一个元素中可以设置多个类

一定要有“归类的概念，公共类的想法”。选中的页面，设置相同的属性

高级选择器

1、后代（爸爸的儿子、孙子...）

div p{}

2、子代（亲儿子）

div>p{}

3、组合

选择器1,选择器2,选择器3{}

4、交集选择器（了解即可）

选择器1选择器2{}

5、伪类选择器

a标签

a:link{}

a:visited{}

a:hover{}

a:active{}

注意： :hover可以应用于任何的元素