QQ网名大全

css有哪些选择器,优先级如何计算

1、类别选择器
类别选择器根据类名来选择,前面以“.”来标志。
在HTML中,元素可以定义一个class的属性,并且多个元素都可以重复应用这个属性。
2、标签选择器
一个完整的HTML页面是有很多不同的标签组成,如:body,div,p,ul,li,而标签选择器,则是 决定哪些标签采用相应的css样式。
3、ID选择器
ID选择器可以为标有特定ID的HTML元素制定特定的样式。根据元素ID来选择元素,具有唯一性,这意味着同一ID在同一文档页面中只能出现一次。例如,你将一个元素的id取值为“name”,那么在同一页面你就不能再将其他元素id取名为“name”了。
前面以“#”号来标志,在样式里面可以这样定义:
4、通用选择器
用过“*”号来表示。如下代码表示所有元素的内外边距都为0,所有的字体都为微软雅黑。他可以清除不同浏览器的默认样式。
同时通用选择器还可以和后代选择器组合。如下表示所有p元素后代的所有元素都应用这个样式。
注意:但是如果你在p标签里嵌套了一个p标签,就会出现浏览器不能解析的情况,因此要避免这种情况发生。
5、后代选择器
后代选择器也称为包含选择汽车,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不仅仅只能有两个,对于多层子线后代关系,可以有多个空格加以分开。
如下例子定义了所有class属性为father的元素下面的class属性为child的颜色为红色。
6、子选择器
请注意这个选择器与后代选择器的区别,子选择器只是选择元素的直接后代,即仅仅作用于第一个后代。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
7、伪类选择器
即链接样式。a元素的伪类,存在4中不同的状态:link、visited、active、hover。如
8、群组选择器
具有相同样式的标签分组显示,将具有多个相同属性的元素,合并群组进行选择,定义同样的css属性,这大大的提高了编码效率,同时也减少了css文件的体积。
9、相邻同胞选择器
如一个标题h1元素后面紧跟了两个段落p元素,我们想定位第一个段落p元素,对它应用样式,就可以使用相邻同胞选择器。两个元素之间用“+”进行连接。如
三、常见问题
问题一:对多个选择器使用的优先级是怎么进行计算的?
问题二:当不同类别的多个选择器混合使用个怎么计算优先级?
四、解决方案
问题一:对多个选择器使用的优先级是怎么进行计算的?
对于不同类别的选择器,以以下原则进行排序:
1、在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
2、作为style属性写在元素内的样式
3、id选择器
4、类选择器
5、标签选择器
6、通配符选择器
7、浏览器自定义或子元素集成父类的样式
将上面的稍微总结一下就是:
!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
同一级别中后写的会覆盖先写的样式。
问题二:当不同类别的多个选择器混合使用个怎么计算优先级?
有一个简单的算法,设
a.内联样式表的权值为1000
b.ID选择器的权值为100
c.class类选择器的权值为10
d.HTML标签选择器的权值为1
我们可以把选择器中规则对应多加法,比较权值,如果权值相同那就后面的覆盖前面的。如图,div.test1.test3的权值是1+10+10=21,而.test1.test2.test3的权值是10+10+10=30,所以div会应用.test1.test2.test3变成绿色。
五、编码实战
六、扩展思考
问题一:如果是十一个class选择器和一个ID选择器,系统会以哪个优先?
由于视频中的例子不是特别好,所以我换了一个例子。如图
代码显示的结果是黄色正方形。实际上权值不是按上述数字表示的,数字只是为了简便地表达不同选择器之间的先后关系,再多的class也比不过一个id。
问题二:子选择器和后代选择器的区别?
这个在前面有讲到,子选择器只是选择元素的直接后代,即仅仅作用于第一个后代,后代选择器则可作用于孙子代、曾孙子代。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
佚名
2024-06-06 18:40:51
最佳回答
类似问题(10)
  • 佚名
    2024-06-06 10:20:16

    Css 优先级算法如何计算

    1、类别选择器类别选择器根据类名来选择,前面以“.”来标志。在HTML中,元素可以定义一个class的属性,并且多个元素都可以重复应用这个属性。2、标签选择器一...

  • 佚名
    2024-06-06 23:17:42

    CSS类名选择器,能不能通过类名的一部分来选择?

    有办法的,可以使用属性选择器的部分匹配功能来实现:[class^="re_"] { background-color: blue;}[abc^="def"] ...

  • 佚名
    2024-06-06 08:46:56

    拉卡拉POS机有哪些优点?为何要选择它?

    这款机器的有点包括:服务健全,除了刷卡收单外还可以进行充值、缴费、还款等服务;传输速度快,受理范围广;办理快捷,安装手续时间短;终身售后,机身永久免费维修。

  • 佚名
    2024-06-06 04:31:46

    如何选择与开水器连接的净水器

    净水器的选择目前市场上有两种净水器,超滤机额反渗透机。你首先要确定选择哪一个大类。超滤机的过滤孔径要比反渗透机高一个数量级。所以超滤的过滤没有反渗透精细。然后主...

  • 佚名
    2024-06-06 08:00:00

    如何选择会计师事务所

    首先是创办时间。做过的案子,办公环境和福利待遇

  • 佚名
    2024-06-06 08:00:00

    新号到50级拳师优先选择什么八卦牌

    那看你主要是PVP还是PVE。 如果PVE打副本的话盖世搭血鲨。有18000以上血就差不多了。如果你完全副本然后你的T够给力你操作也过关的话全血鲨暴击套。你气功...

  • 佚名
    2024-06-06 08:00:00

    css 选择器 中 加号 是干什么的?

    这个“+”是选择相邻兄弟,叫做“相邻兄弟选择器”  如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent si...

  • 佚名
    2024-06-06 08:00:00

    css选择器的类型及作用

    说几个常见的吧标签选择器(如:body,div,p,ul,li) 一个XHTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个C...

  • 佚名
    2024-06-06 08:00:00

    计算机一级选择题答案一份谢谢。

    原发布者:小磨叽660 1、计算机系统由(C)组成。A)主机和系统软件B)硬件系统和应用软件C)硬件系统和软件系统D)微处理器和软件系统2、冯·诺依曼式计算机硬...

  • 佚名
    2024-06-06 08:00:00

    北京会展公司有哪些?如何来选择?

    会展行业黑马卓诚会展公司是较多会展公司比较出色的一家,概括的讲,选择不同的会展公司,服务和收费有区别,根据自己的要求来选择。