8_选择器

一、
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 继承 父级的这条样式是怎样的元素的这条样式就是怎样的

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

时间: 2024-08-01 21:25:49

8_选择器的相关文章

CSS3选择器:nth-child和:nth-of-type之间的差异

对于p:nth-child选择器,选择一个元素如果: 这是个段落元素 这是父标签的第二个子元素 对于p:nth-of-type选择器,选择一个元素如果: 选择父标签的第二个段落子元素 :nth-of-type选择器,限制条件少

CSS3选择器 ::selection选择器

"::selection"伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本).浏览器默认情况下,用鼠标选择网页文本是以"深蓝的背景,白色的字体"显示的,效果如下图所示: 从上图中可以看出,用鼠标选中"专注IT.互联网技术"."纯干货.学以致用"."没错.这是免费的"这三行文本中,默认显示样式为:蓝色背景.白色文本. 有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时

jQuery选择器补充

------------------------------------------------------------------------------------------------------------ --------------------------- 简单选择器(使用频率最高) ---------------------------- ----------------------- 进阶选择器(使用频率不如简单选择器) ----------------------- 高级选

微信小程序组件解读和分析:十二、picker滚动选择器

picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date), 默认是普通选择器. picker滚动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

CSS3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 选择器的使用 通过选择器的使用,可以不再需要在编辑任何多余的无语义的class属性. 属性选择器: 在使用属性选择器时,需要声明属性和属性值. 声明方法:[att=val],其中att代表属性,val代表属性值. E[att=val]:前面的E表示在何种标签如:div[id=momo],a[he

jQuery 选择器2

jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class=&qu

优化jQuery选择器

优化jQuery选择器 选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任.记住这些小技巧可以让你轻松突破学习选择器时的瓶颈. jQuery 扩展 如果可能的话,避免使用jQuery扩展选择器.这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧. 1 2 3 4 5 // Slower (the zero-based :even sele

Test_赋值多个class选择器

ZC: 元素属性"class"中,可以赋值 多个 class选择器 ZC: 多个选择器,相同的属性设置,哪个起作用:晚定义的起作用 1.代码 <!--内联 HTML5--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .bgc01 { width :500px; he

jQuary学习-什么是jquary? Js与jquary之间的关系 Jquary选择器

1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQuery提供给我们的方法 2.jQuery的使用步骤 1)引入jQuary包 2)写进入口函数 入口函数的两种书写方式: 方式一: $(document).ready(function(){ }); 方式二: $(function(){ }); 3) 写入需要实现的功能 例: <script src