CSS选择器

CSS学习笔记

一、CSS选择器

0.通配符

通配符是全局的设定的CSS样式,也就是设置了之后整个界面都会采用的样式。





    
我是div标签

这就是一个典型的标签选择器,在style中设置div的标签的CSS样式。

2.类选择器

类选择器就是设置一个类名,然后通过.类名来进行设置。






  
我是div标签2

class里面输入的是类名,使用类选择器,要使用.跟上类名来定义这个类CSS。

3.id选择器

id选择器就是使用id=""来定义,但是设置CSS那边,要使用#来进行标记。

id选择器只能有一个,如果设置多个,就会无法使用






  
我是div标签2

4.并联选择器

并联选择器顾名思义就是或选择器,中间用,号进行隔开,表示只要满足相关的,都采用下面的CSS的样式。






  
我是div标签1
我是div标签2

我是段落标签

这边代码意思是只要是div标签或者是high类的都会执行相应的css样式。

5.复合选择器

复合选择相当于与运算,只有同时满足这2个条件,才会添加CSS样式。






  
我是div标签1
我是div标签2

我是段落标签

这段代码意思就是满足是div标签,同时满足class为high才会添加背景颜色这个CSS样式。

6.后台选择器

后代选择器的意思就是一个标签里面包含的其他标签就会采用这种CSS样式。用空格来划分。






    

我是div标签里面的p标签1

我是div标签里面的span标签里面的P标签

这段代码的意思是div标签里面的p标签就要采用CSS的样式。

7.直接继承标签

所谓的直接继承就是父与子的关系, 比方说div标签里面有一个p标签,那这个p标签就是div标签的直接继承标签,如果div标签里面有一个span标签,span标签里面有一个p标签,那么就不符合直接继承的关系。直接继承标签用>来连接

注意:如果div标签里面包含一个div标签,里面的div标签包含一个p标签,那么也满足直接继承关系






      

我是div标签里面的p标签1

我是div标签里面的span标签里面的P标签

我是div标签2

我是p标签2

8.相邻兄弟选择器

所谓的相邻兄弟选择器XX+YY,用+号来表示,表示与XX相邻的YY所使用的CSS样式。

注意点:如果XX里面包含YY则不会触发,YY无论是在XX上面还是XX下面都是相邻






    我是div的兄弟span

    
我是div
我是div的兄弟span

我是span的兄弟p

9.属性选择器

所谓的属性选择器,就是在标签中添加属性,通过属性来定位到该标签设置CSS的样式。






    我是属性选择器的span1
我是属性选择器span2 我是属性选择span3

10.伪类和伪元素

伪类和伪元素就是指在特定的事件触发的时候,调用的CSS的样式,用:号来表示。

CSS选择器_第1张图片
伪类.png

伪元素和伪类一样:

CSS选择器_第2张图片
伪元素.png




  


11.importtant

important的在任何选择器中使用!important进行标记,然后强制使用该css样式。

 


    
你好,世界

本来采用的CSS样式应该是div的css,但是因为上面color被important修饰了,因此颜色是红色。

二、CSS选择器的优先级

==选择器的针对性越强,优先级越高==

有关CSS选择器的优先级,这里需要知道权值这个概念,权值越高,优先级越高。

CSS选择器_第3张图片
选择器权值.jpeg

==选择器的权值进行相加,越大的越优先,如果权值相同,则使用就近原则。==

==优先级排序:
important > 行内css > id > 类 | 伪类 | 属性选择 | 伪元素 > 通配符 > 继承==

三、HTML标签的类型

HTML的标签分为3种类型:

  1. 块级标签:
    • 独占一行;
    • 可以改变宽度和高度;
  2. 行内标签
    • 多个标签能同时显示在同一行,不能改变宽度和高度;
  3. 行内-块级标签
    • 多个标签能同时显示在同一行;
    • 可以改变宽度和高度

为了满足开发需要,提供了一个属性来随时更改标签的类型->display,这个属性有3个值:block -> 块级标签,inline -> 行内标签,inline-block -> 行内-块级标签,none -> 隐藏标签。

通过设置display的值,可以随时改变标签类型,满足开发的需要。

四、CSS属性

1.CSS属性可继承和不可继承

CSS的属性分为可以继承和不可继承。继承就是父类标签的属性传递给子类属性,通常文字控制类的属性可以传递,区块控制的属性不可传递。

  • 可继承属性:



    
我是div标签

我是p标签

设置body的CSS样式,div和p都是继承自body,因此颜色和文字大小都得到了改变。

  • 不可继承属性:




    
我是内部的div标签

main里面的属性因为属于块控制的属性,因此没法继承给下面div标签。

你可能感兴趣的:(CSS选择器)