8_选择器

Posted 2020-09-09

一、
css selector (选择器，选择符)
   　　1. id selector 通过查找具有某个id属性的元素来添加样式
    　　　　id = "idName"

    #idName {
        样式……
    }

    *注意：同一个页面中id不能重名
    　　2. tag selector(类型选择器，标签选择器，元素选择器) 通过标签的名字找到某一类型标签添加样式
  

 tagName {
        样式……
    }    

    　　3. class selector(类选择器) 通过查找具有某类class属性的元素来添加样式
   

class = "className"
    .className {
    }

　　　　*注意： 1） class可以重复调用
   　　　　　　   2） 元素可以具有多个className,每个名字中间以空格隔开,每个名字添加的样式，元素都会识别

　　　4.* 通配符 (通配选择器),代表所有的元素 (不推荐使用)

　　　5.包含选择器 （后代选择器）
　　　　如：

a:hover span {
        color: yellow;
}

#box span {
}

找到box中包含的span标签

　　　　1. 层级数目不要过多 一般不超过三层

　　　　2. 子级是id话，一般不用包含选择器

　　　　3. 包含选择器的优先级是其中用到的所有选择器的累加

二、
　　元素可以同时使用多种选择器,每种选择器添加的样式，元素都会识别
    　　　　当我们在不同的选择器中，添加了同一条样式,这种情况下，元素最终显示
    　　　　那个选择器下的样式，我们就叫做这个选择器的优先级高
　　选择器优先级一致的情况下，后边的覆盖前边的   
    　　id选择器的优先级高于class
    　　class选择器的优先级高于tag选择器
   　　 tag选择器的优先级高于*
   　　 style 行间样式优先级最高

    　　style > id > class > tag > *


三、inherit 继承
　　　　父级的这条样式是怎样的元素的这条样式就是怎样的
　　　　文本样式，自己没有设置这条样式，就会继承父级，如果子元素设置就显示子元素自己的样式
　　　　文本样式，子极会继承父级

 

 

一、

css selector (选择器，选择符)

1. id selector 通过查找具有某个id属性的元素来添加样式

id = "idName"

#idName {

样式……

}

** 同一个页面中id不能重名

2. tag selector(类型选择器，标签选择器，元素选择器) 通过标签的名字找到某一类型标签添加样式

tagName {

样式……

}

3. class selector(类选择器) 通过查找具有某类class属性的元素来添加样式

class = "className"

.className {

}

 

 

** 1） class可以重复调用

   2） 元素可以具有多个className,每个名字中间以空格隔开,每个名字添加的样式，元素都会识别

 

4. * 通配符 (通配选择器),代表所有的元素 (不推荐使用)

 

 

 

二、

元素可以同时使用多种选择器,每种选择器添加的样式，元素都会识别

    当我们在不同的选择器中，添加了同一条样式,这种情况下，元素最终显示

那个选择器下的样式，我们就叫做这个选择器的优先级高

 

id选择器的优先级高于class

class选择器的优先级高于tag选择器

tag选择器的优先级高于*

style 行间样式优先级最高

 

style > id > class > tag > *

 

 

 

 

三、

 

inherit 继承

父级的这条样式是怎样的元素的这条样式就是怎样的

文本样式，自己没有设置这条样式，就会继承父级，如果子元素设置就显示子元素自己的样式

文本样式，子极会继承父级

inherit 继承 父级的这条样式是怎样的元素的这条样式就是怎样的

选择器优先级一致的情况下，后边的覆盖前边的