css之选择器

人称小小贩      2022-02-13     471

关键词:

  选择器:选择一个元素(标签)的方法。有以下6种选择器

  一、选择器的类型

  1、id选择器

      定义:通过id选择元素(选择到的是一个元素)。id在页面上具有唯一性。

      语法:#id名称{要添加的样式}

  2、class选择器

      定义:通过class选择元素(选择到的是一组元素)

      定义:.class名称{要添加的样式}

      注意:页面中的class是可以重名的,一个元素可以有多个class,每个用逗号隔开,如果后面class的样式与前面有重复的,那后面会覆盖前面的样式。

  3、标签选择器

      定义:通过标签名字选择元素(选择到的是一组元素)

      语法:标签名{要添加的样式}

      注意:标签选择器会给所有的标签都添加上相同的样式,会影响其它的标签

  4、群组选择器

      定义:通过逗号的方式选择元素(选择到的是一组元素)

      语法:#id名称,.class名称,标签名{要添加的样式}

  5、包含选择器

      定义:通过范围选择元素(选择到的有可能是一个也又可能是多个元素)

      语法:父级 目标元素{要添加的样式}

      注意:父级与目标元素都可以是任意一种选择器选择到的元素

  6、通配符选择器

      *    通配符:用来获取页面中的所有元素。

  二、选择器的优先级

  优先级关系到代码执行的顺序:选择器优先级一致的情况下,谁在后面谁的优先级高,但当选择器优先级不一致的情况下,会选择优先级高的。

  一般来说:

    1、行间样式>id选择器>class选择器>标签选择器>通配符选择器(*)

    2、包含选择器的优先级是一种累加的关系,加起来的值越大优先级越高,值越小,优先级越低。

        行间样式:1000

        id选择器:100

        类选择器:10

        标签选择器:1

    3、群组选择器的优先级取决于位置,哪个靠后哪个的优先级就高,会把前面的样式给覆盖。

 

前端之css的属性引入方式选择器选择器优先级

目录1011前端之CSS的属性引入方式、选择器、选择器优先级一、CSS介绍二、CSS语法2.1CSS实例2.2CSS注释三、css属性的引入方式3.1行内样式3.2内部样式3.3外部样式四、CSS选择器4.1元素(标签)选择器4.2id选择器4.3类选择器4.4通用选择器4.5... 查看详情

html之css选择器语法学习笔记

相关内容:css选择器的用法:选择器的语法标签选择器类选择器id选择器选择器的分组嵌套选择属性选择器子标签选择器相邻兄弟选择器 参考资料:w3school 首发时间:2018-03-0223:54 css选择器的用法:css选择器的语法:cs... 查看详情

css之选择器

  选择器:选择一个元素(标签)的方法。有以下6种选择器  一、选择器的类型  1、id选择器      定义:通过id选择元素(选择到的是一个元素)。id在页面上具有唯一性。      语法:#id名称{要添加的样... 查看详情

css之选择器

选择器(selector)是CSS中的重要概念,用于对HTML元素的查找和控制。由于Selenium学习需求特对选择器相关知识进行学习和总结,方便以后查阅。基本选择器  基本选择器是jQuery中最常用的选择器,通过元素id、class和标签名等来查... 查看详情

html之css标签

 1.CSS选择器1)、id选择器 2)、class选择器3)、标签选择器 4)、层级选择器(空格)  (1)id层级选择器     (2)class层级选择器5)、组合选择器(逗号)  (1)id组合选择器(2)class组合选择器6)、... 查看详情

css之标签选择器

标签(空格分隔):标签选择器选择器定义:在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们... 查看详情

css之选择器2

交集选择器与并集选择器交集选择器1、作用:给所有选择器选中的标签中,相交的那部分标签设置属性2、格式:选择器1选择器2{属性:值;}3、注意:1、选择器与选择器之间没有任何链接符号2、选择器可以使用标签名称、id、cla... 查看详情

css之选择器的运用

CSS选择器和规则:在css声明块前添加一个选择器,用来指明将css声明应用在哪些元素上。如图所示:标签选择器标签选择器又叫元素选择器,换句话说,文档的元素就是最基本的选择器,使用元素名称直接选中元素即可。演示代... 查看详情

css之选择器的运用

CSS选择器和规则:在css声明块前添加一个选择器,用来指明将css声明应用在哪些元素上。如图所示:标签选择器标签选择器又叫元素选择器,换句话说,文档的元素就是最基本的选择器,使用元素名称直接选中元素即可。演示代... 查看详情

前端之css样式(选择器)。。。

前端之css样式(选择器)。。。一、css概述CSS是CascadingStyleSheets的简称,中文称为层叠样式表,对html标签的渲染和布局CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。 例如 二、css的四种引入方式1.行内式&... 查看详情

css的选择器之基本选择器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>/*标签选择器*//*p{*//*color:red;*//*}*//*id选择器*/#s1{color:yellow;fo 查看详情

静态页面架构css之选择器

CSS架构基本选择器元素选择器:通过元素名称定位页面元素类选择器:通过元素的class属性定位页面元素ID选择器:通过元素的ID属性定位页面元素;id属性必须是唯一的通配符选择器:匹配当前页面中所有元素<style>p{color:#2196f3;}/*元... 查看详情

静态页面架构css之选择器

CSS架构基本选择器元素选择器:通过元素名称定位页面元素类选择器:通过元素的class属性定位页面元素ID选择器:通过元素的ID属性定位页面元素;id属性必须是唯一的通配符选择器:匹配当前页面中所有元素<style>p{color:#2196f3;}/*元... 查看详情

css常用属性之选择器

css选择器序号选择器例子例子描述1.class.intro选择class="intro"的所有元素2#id#firstname选择id="firstname"的元素3elementp选择所有<p>元素4element,elementdiv,p选择所有<div>元素和所有<p>元素5elementelementdivp选择<div>元素内部的所... 查看详情

css选择器之兄弟选择器(~和+)

... 今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清‘+’跟‘~’的区别,虽然我知道他们都是兄弟选择器。  后来网上查了下,也许是我查找的方式不对,... 查看详情

jq基础之选择器

JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器。ID选择器$(‘#one‘)      (‘#‘代表ID)CLASS选择器$(‘.two‘)       (‘.‘代表类)元素选择器$(‘ul‘)... 查看详情

css选择器之符号

jQuery、CSS常用选择器符号描述示例说明紧接无符号相当于”并且“关系input.k-textbox{  ...}选出input并且包含k-textbox类的元素,(逗号)选择器分格符,选择多种元素h1,h2{  ...}选出h1和h2的所有元素.(圆点)类选择... 查看详情

前端之css

一、初识Css1、概念用于修饰标签。使用css选择器需要关注两点:1、选择哪个选择器2、如何选择需要使用css样式的标签。在head中添加style标签,在style标签中添加css选择器,就可以将css样式附着到body中的标签上了。二、选择器1... 查看详情