您的位置: 首页  >  文章  >  【修真院WEB小课堂】css有哪些选择器

【修真院WEB小课堂】css有哪些选择器

分类: 文章 • 2025-01-16 11:01:11

1.背景介绍

       在HTML页面中,如果我们想要去改变一个元素的字体大小、尺寸、颜色、样式等 ,就需要用到css选择器来进行对修改元素一对一或者多对一的进行匹配并改变其样式,这就是css选择器。选择器是一种模式，它能在页面上匹配一些元素，使相关的声明仅被应用到被选择的元素上。

2.知识剖析

     1、命名

    W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上， 再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。

 

1.1 字符采用

实际项目中，建议只采用字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）。避免使用中文。

1.2 慎用数字

以字母开头，避免纯数字，避免数字开头，以保证兼容。以数字开始的类名、ID名仅在IE6/IE7/IE8下被识别，而其它浏览器下则不识别（忽略该规则）。

1.3 区分ID和class

一个ID名在文档中只使用一次，class类名可在文档中多次使用。

1.4 语义化标签

语义化标签是个很大的话题，简单点说，语义化标签就是让css选择器的命名能够反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然，另外一个好处是提高网页对一些特殊浏览设备的友好性。

 

15 区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

 

 2、择器的类型

选择器的类型有元素选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器、组合选择器

下面会挨个为大家简单介绍一下

1.元素选择器：

元素选择器通常会是选择某个HTML元素，如p、a甚至可以是html本身。

而且元素选择器会匹配到HTML页面中被选择器选中元素的页面中的全部元素。

2.类选择器：

通过给样式前面加一个点号"."来进行表示。

类选择器可以应用样式而不用考虑其他被涉及的原色.

3.ID选择器:

 ID选择器通常是由一个#字符表示

 

4.属性选择器[attr]: 

它可以根据元素的属性和属性值来选择元素 , 比如要选择HTML页面中有class属性(值不限)的div元素,使其margin-left:10px.

5.伪类选择器: 

CSS  伪类（pseudo-class） 是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。

6. 伪元素选择器：

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。

::after ::before ::first-letter ::first-line ::selection ::backdrop

7. 组合选择器：

一次使用一个选择器是很有用的，但在某些情况下却可能效率低下。 CSS选择器变得更加有用,当你开始结合他们进行细粒度的选择。CSS有几种方法可以选择元素基于它们如何彼此相关。这些关系与组合子表示如下(A和B代表任何选择器):

【修真院WEB小课堂】css有哪些选择器

 

        3、优先级

 

        CSS三大特性—— 继承、 优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

 

        CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：

  1. 重要性（Importance）
  2. 专用性（Specificity）
  3. 源代码次序（Source order）

        有一个特别的语法可以让一条规则总是优先于其他规则：!important。

        一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

  1. 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
  2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
  3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
  4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

        CSS选择器是从右往左解析的。浏览器专门建立了一个反常规思维的从右往左的匹配规则就是为了避免对所有元素进行遍历。

 

 

3.常见问题

【修真院WEB小课堂】css有哪些选择器

有趣：256个class选择器可以干掉1个id选择器

4.解决方案

WebKit内核浏览器所有的类名(classes)都是以8字节字符串存储的。对字节稍稍了解的人都知道，8字节最大值就是255. 当同时出现256个class, 势必会越过其边缘，溢出到id区域。选择器的权值不能进位，并不是id选择器权值失效。

5.编码实战

6.扩展思考

    @-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。

@media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；

    @font-face 允许网页开发者为其网页指定在线字体。

7.参考文献

 

1、MDN选择器

2、CSS选择器命名规则

3、CSS选择器优先级总结

4、为什么CSS选择器是从右往左解析

 

8.更多讨论

 

问：使用Bootstrap框架，再引入自己的外链CSS文件，会有效果吗，是否会和框架原样式冲突？

答：外部CSS文件都是使用link引入，两个文件的优先级是后面的大于前面，选择器权值相同的情况下后面的覆盖前面的样式，除非使用！important

问：元素选择器是什么?

答：元素选择器是标签名，块级元素的div、p，内联元素的a、span、img

 

问：有没有什么选择器，能选择上级或者父级

答：选择器只能向下选择，没有选择器选定父级。

 

         技能树.IT修真院   
        “我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

       这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

 

        快来与我一起学习吧~http://www.jnshu.com/login/1/23749727

 

 

相关推荐