CSS常见选择器的用法

目录

1.CSS引入方式

1.内部样式

2.内联样式

3.外部样式

 2.选择器

1.标签选择器

 2.类选择器

3. id选择器

 4.通配符选择器

5.后代选择器

 

 6.子选择器

7.并集选择器

8.伪类选择器

1.hover

2.active


1.CSS引入方式

1.内部样式




    
    
    
    Document


        


可以在html内部使用style标签来引入

2.内联样式

使用style属性,每个标签




    
    
    
    Document


    
哈哈哈

都可以由style属性,里面可以直接写CSS

3.外部样式

把CSS写道一个单独的.css文件中,然后通过link标签引入刀heml




    
    
    
    Document
    


    
hahaa

新建一个css文件,然后用link引入CSS常见选择器的用法_第1张图片

 2.选择器

1.标签选择器




    
    
    
    Document
    


    
    

我是p标签

我是div标签

这里我们通过标签选择器,来进行对我们相应的标签进行操作

得到的结果是

CSS常见选择器的用法_第2张图片

 2.类选择器

我们可以标签中使用class属性来引用对应的类




    
    
    
    Document
    


    
    
我是a类
我是b类

CSS常见选择器的用法_第3张图片

3. id选择器

每一个元素都有一个唯一的id,可以使用id选择器来选中对应的元素




    
    
    
    Document
    


    
    
偶吼吼

CSS常见选择器的用法_第4张图片

 4.通配符选择器

这个可以作为初始化的选择,可以让所有的元素都被选中




    
    
    
    Document
    


    
    
偶吼吼

CSS常见选择器的用法_第5张图片

这个选择器的优先级很低,适合用于初始化

5.后代选择器

在指定的元素中区筛选后代的元素




    
    
    
    Document


    
    
  1. 哈哈哈
  2. 哈哈
  • 呵呵呵
  • 呵呵

 CSS常见选择器的用法_第6张图片

 

这就会设置ol中的li标签,而ul中的li就不会被设置

 

 6.子选择器

和后代选择器类似,但是这个不会选中孙子元素




    
    
    
    Document


    
    
  1. 哈哈哈
  2. 哈哈
  • 呵呵呵
  • 呵呵

CSS常见选择器的用法_第7张图片

可以看到,仍然是被选中的

7.并集选择器




    
    
    
    Document


    
    
  1. 哈哈哈
  2. 哈哈
  • 呵呵呵
  • 呵呵

 CSS常见选择器的用法_第8张图片

用,来分隔,就可以多选几个

8.伪类选择器

1.hover

鼠标放上去会产生效果

 




    
    
    
    Document


    
    
  1. 哈哈哈
  2. 哈哈

CSS常见选择器的用法_第9张图片

这里我们鼠标放到上面,才会出现红色

2.active

鼠标按住会产生变化




    
    
    
    Document


    
    
  1. 哈哈哈
  2. 哈哈
  • 呵呵呵
  • 呵呵

 CSS常见选择器的用法_第10张图片

 

你可能感兴趣的:(css,html,前端)