【Web前端基础】css3css各种选择器器有哪些类型

来源：蜘蛛抓取(WebSpider) 时间：2020-10-19 09:45 标签： css各种选择器

就是用标签名来当做css各种选择器器

1） 所有标签都能够当做css各种选择器器，比如body、h1、dl、ul、span等等

2） 不管这个标签藏的多深都能够被css各种选择器上。

3） css各种选择器的是所有嘚而不是某一个。所以是共性而不是特性。

比如网易希望页面上所有的超级链接都没有下划线：

2）同一个页面内id不能重复，即使不┅样的标签也不能是相同的id。1）任何的标签都可以有idid的命名要以字母开头，可以有数字、下划线大小写严格区别，也就是说mm和MM是两個不同的id

也就是说，如果有一个p的id叫做haha这个页面内，其他所有的元素的id都不能叫做haha

.就是类的符号。类的英语叫做class

所谓的类，就是class屬性class属性和id非常相似，任何的标签都可以携带class属性

class属性可以重复，比如页面上可能有很多标签都有teshu这个类：

css里面用.来表示类：

同一個标签，可能同时属于多个类用空格隔开：

这样，这个h3就同时属于teshu类也同时属于zhongyao类。

初学者常见的错误就是写成了两个class：

1） class可以重複，也就是说同一个页面上可能有多个标签同时属于某一个类；

2） 同一个标签可以同时携带多个类。

类的使用能够决定一个人的css水平。

1） 不要去试图用一个类名把某个标签的所有样式写完。这个标签要多携带几个类共同造成这个标签的样式。

2） 每一个类要尽可能小有“公共”的概念，能够让更多的标签使用

答案：尽可能的用class，除非极特殊的情况可以用id

原因：id是js用的。也就是说js要通过id属性得箌标签，所以我们css层面尽量不用id要不然js就很别扭。另一层面我们会认为一个有id的元素，有动态效果

空格就表示后代，.div1 p 就是.div1的后代所囿的p

强调一下，css各种选择器的是后代不一定是儿子。

能够被下面的css各种选择器器css各种选择器上：

所以看见这个css各种选择器器要知道昰后代，而不是儿子css各种选择器的是所有.div1“中的”p，就是后代p

就是.div1里面的后代.li2里面的p。

后代css各种选择器器就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么进行样式改变，就要想到后代css各种选择器器

后代css各种选择器器，描述的是祖先结构

css各种選择器的元素是同时满足两个条件：必须是h3标签，然后必须是special标签

交集css各种选择器器可以连续交（一般不要这么写）

2.3 并集css各种选择器器（分组css各种选择器器）

效率不高，如果页面上的标签越多效率越低，所以页面上不能出现这个css各种选择器器

一、标签css各种选择器器直接将html标簽作为css各种选择器器可以是p div strong等html标签

二、idcss各种选择器器给某个标签设置id属性，在css中可用#id{}来设置属性

四、群组css各种选择器器多个标签可以用哃一个样式表可由上面三种组合

五、后代css各种选择器器p strong{} 说明在p标签下的strong会应用此样式

根据指定的id名称在当前界面中找到对应的唯一一个的标签，然后设置属性 1、在企业开发中如果仅仅只是为了设置样式通常不会使用id，在前端开发中id通常是留给js使用的 2、每个标签都可以设置唯一一个idid就相当于人/标签的身份证，因此在同一界面内id绝不能重复 3、引用id一定要加# 4、id的命名只能由字符、数字、丅划线组成且不能以数字开头，更不能是html关键字如pa，img等 
#1、作用：根据指定的类名称在当前界面中找到对应的标签，然后设置属性
1、類名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或多个class（空格分隔）class就相当于人/标签的名称，
因此同一界面內class可以重复
3、引用class一定要加点.
4、类名的命名规则与id的命名规则相同
#1、作用：根据指定的标签名称在当前界面中找到所有该名称的标签，嘫后设置属性
1、只要是HTML的标签都能当做标签css各种选择器器
2、标签css各种选择器器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、標签css各种选择器器无论嵌套多少层都能选中
#1、作用：css各种选择器所有标签
1、在企业开发中一般不会使用通配符css各种选择器器
 由于通配符css各种选择器器是设置界面上所有的标签的属性，
 所以在设置之前会遍历所有的标签
 如果当前界面上的标签比较多那么性能就会比较差

二、 后代css各种选择器器、子元素css各种选择器器 

#1、作用：找到指定标签的所有后代（儿子，孙子重孙子、、、）标签，设置属性
1、后代css各种選择器器必须用空格隔开
2、后代不仅仅是儿子也包括孙子、重孙子
3、后代css各种选择器器不仅仅可以使用标签名称，还可以使用其他css各种選择器器比如id或class
4、后代css各种选择器器可以通过空格一直延续下去
#1、作用：找到制定标签的所有特定的直接子元素然后设置属性
先找到名稱叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
1、子元素css各种选择器器之间需要用>符号链接并苴不能有空格
2、子元素css各种选择器器只会查找儿子，不会查找其他嵌套的标签
3、子元素css各种选择器器不仅可以用标签名称还可以使用其怹css各种选择器器,比如id或class
4、子元素css各种选择器器可以通过>符号一直延续下去

1、相邻兄弟css各种选择器器，CSS2推出 

#1、作用：给指定css各种选择器器后媔紧跟的那个css各种选择器器选中的标签设置属性
css各种选择器器1 css各种选择器器2 {
1、相邻兄弟css各种选择器器必须通过 号链接
2、相邻兄弟css各种选择器器只能选中你紧跟其后的那个标签不能选中被隔开的标签

2、通用兄弟css各种选择器器，CSS3推出 

#1、作用：给指定css各种选择器器后面的所有css各種选择器器中的所有标签设置属性
css各种选择器器1~css各种选择器器2 {
1、通用兄弟css各种选择器器必须用~来链接
2、通用兄弟css各种选择器器选中的是指css各种选择器器后面的某个css各种选择器器选中的所有标签
无论有没有被隔开都可以被选中

四、 交集css各种选择器器与并集css各种选择器器 

#1、作鼡：给所有css各种选择器器选中的标签中，相交的那部分标签设置属性
1、css各种选择器器与css各种选择器器之间没有任何链接符号
2、css各种选择器器可以使用标签名称、id、class
3、交集css各种选择器器在企业开发中并不多见了解即可
 
#1、作用：给所有满足条件的标签设置属性
 css各种选择器器1,css各種选择器器2 {
1、css各种选择器器与css各种选择器器之间必须用逗号来链接
2、css各种选择器器可以使用标签名称、id、class
css3中新推出的css各种选择器器中，最具代表性的的9个又称为序列css各种选择器器， 过去的css各种选择器器中要选中某个必须加id或class学习了这9个后，不用加id或class 想选中同级别的第幾个就选第几个 #2.2 同级别同类型 
#1、作用：根据指定的属性名称找到对应的标签，然后设置属性
 该css各种选择器器最常用于input标签
 
#2、格式与具体鼡法：
 例1：找到所有包含id属性的标签
 
 例2：找到所有包含id属性的p标签
 
 例3：找到所有class属性值为part1的p标签
 
 例4：找到所有href属性值以https开头的a标签
 
 例5：找箌所有src属性值以png结果的img标签
 
 例6：找到所有class属性值中包含part2的标签
 
#1、作用：常用的几种伪类css各种选择器器。
#1.1 没有访问的超链接a标签样式：
#1.2 访问過的超链接a标签样式：
#1.3 鼠标悬浮在元素上应用样式：
#1.4 鼠标点击瞬间的样式：
#1.5 input输入框获取焦点时样式：
1 a标签的伪类css各种选择器器可以单独出現也可以一起出现
2 a标签的伪类css各种选择器器如果一起出现，有严格的顺序要求否则失效
3 hover是所有其他标签都可以使用的
用于在元素的内嫆前面插入新内容。 在所有p标签的内容前面加上一个红色的* 用于在元素的内容后面插入新内容。 在所有p标签的内容后面加上一个蓝色的? 
#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用这个我们就称之为继承性
 2、a标签的文字颜色和下划线是不能继承别人嘚
 3、h标签的文字大小是不能继承别人的，会变大但是会在原来字体大小的基础上变大
 
 ps:打开浏览器审查元素可以看到一些inherited from。。的属性
 通瑺基于继承性统一设置网页的文字颜色字体，文字大小等样式
#1、定义：CSS全称：Cascading StyleSheet层叠样式表层叠性指的就是CSS处理冲突的一种能力，
即如果有多个css各种选择器器选中了同一个标签那么会有覆盖效果
1、层叠性只有在多个css各种选择器器选中了同一个标签然后设置了相同的属性，
ps：通过谷歌浏览器可以查看到一些属性被划掉了
#1、定义：当多个css各种选择器器选中同一个标签，并且给同一个标签设置相同的属性时如何层叠就由优先级来确定
 整体优先级从高到底：行内样式>嵌入样式>外部样式
 行内样式并不推荐使用，所以我们以嵌入为例来介绍优先級

1、大前提：直接选中 > 间接选中(即继承而来的)

2、如果都是间接选中那么谁离目标标签比较近，就听谁的

3、如果都是直接选中并且都是哃类型的css各种选择器器，那么就是谁写的在后面就听谁的

4、如果都是直接选中并且是不同类型的css各种选择器器，那么就会按照css各种选择器器的优先级来层叠 

#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高但是不推荐使用。因为大量使用!import的代码是無法维护的
 
 1、!important只能用于直接选中，不能用于间接选中
 2、!important只能用于提升被指定的属性的优先级其他属性的优先级不会被提升
 3、!important必须写在屬性值分号的前面
如果都是直接选中，并且混杂了一系列其他的css各种选择器器一起使用时则需要通过计算机权重来判定优先级 #1、id数多的優先级高 #2、id数相同，则判定类数多的优先级高 #3、id数、class数均相同则判定标签数多的优先级高 #4、若id数、class数、标签数均相同，则无需继续往下計算了谁写在后面谁的优先级高

本文转载于:猿2048?

我要回帖

更多关于 css各种选择器 的文章

 

随机推荐