02-CSS基础-CSS选择器

标签选择器

根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。
格式:

标签名称{
    属性:值;
}

    
    
    


    
标签选择器，我是一个小段落。 

id选择器

根据指定的id名称找到对应的标签, 然后设置属性。
格式:

#id名称{
    属性:值;
}

    
    
    



    
标签选择器，我是一个小段落。 

在同一个界面中id的名称是不可以重复。
id的名称只能由字母/数字/下划线(a-z 0-9 _)组成，且不能以数字开头。
注：
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的。

类选择器

根据指定的类名称找到对应的标签, 然后设置属性。
格式:

.类名{
    属性:值;
}

    
    
    



    
标签选择器，我是一个小段落。 

在同一个界面中class的名称是可以重复。
同一个标签可以有多个类名。
类名的名称只能由字母/数字/下划线(a-z 0-9 _)组成，且不能以数字开头。
类名就是专门用来给CSS设置样式的。
格式:

<标签名称 class="类名1 类名2 ...">

    
    
    



    
第一段文字
    
第二段文字
    
第三段文字

后代选择器

找到指定标签的所有特定的后代标签, 设置属性。

格式:
标签名称1 标签名称2{
属性:值;
}

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性。
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器。
后代选择器可以通过空格一直延续下去。

    



    

        
我是一个段落
        

            

                
我也会变色
            
        
    
    

        
class我是一个段落
    

子元素选择器

找到指定标签中所有特定的直接子元素, 然后设置属性。

格式:
标签名称1>标签名称2{
  属性:值;
}

先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素。
子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器。
子元素选择器可以通过>符号一直延续下去。

    



    

        
子元素选择器
        

            

                
子元素选择器 里面的不会变色
            
        
    

• 后代选择器和子元素选择器

1. 后代选择器会选中指定标签中, 所有的特定后代标签，只要是被放到指定标签中的特定标签都会被选中；
   子元素选择器只会选中指定标签中, 所有的特定的直接标签。
2. 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器。

交集选择器

给所有选择器选中的标签中, 相交的那部分标签设置属性。

格式:
选择器1选择器2{
属性: 值;

}

注意：选择器和选择器之间没有任何的连接符号。
企业开发中用的不多。

交集选择器变红

我也会变红

我是蓝色

并集选择器

给所有选择器选中的标签设置属性。

格式:
选择器1,选择器2{
属性:值;
}

注意: 并集选择器必须使用 "," 来连接。

    



    
并集选择器1
    
并集选择器2

兄弟选择器

• 相邻兄弟选择器
  给指定标签后面紧跟的那个标签设置属性。

格式:
选择器1+选择器2{
属性:值;
}

注意: 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签。

    



    
相邻兄弟选择器标题1
    
相邻兄弟选择器段落1
    
相邻兄弟选择器段落2
    
相邻兄弟选择器标题2
    百度
    
相邻兄弟选择器段落3

• 通用兄弟
  给指定选择器后面的所有选择器选中的所有标签设置属性。

格式:
选择器1~选择器2{
属性:值;
}

注意：通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中。

    



    
通用兄弟选择器标题1
    
通用兄弟选择器段落1
    
通用兄弟选择器段落2
    
通用兄弟选择器标题2
    百度
    
通用兄弟选择器段落3
    
通用兄弟选择器段落4

属性选择器

根据指定的属性名称找到对应的标签, 然后设置属性。

格式:
[attribute]

-作用: 根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]
-作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性

最常见的应用场景, 就是用于区分input属性。

input[type=password]{}

属性的取值是开头:
[attribute^=value] CSS3

属性的取值结尾:
[attribute$=value] CSS3

属性的取值是否包含某个特定的值:
[attribute*=value] CSS3

    


    
    
    
    
哈哈哈哈哈哈
    

通配符选择器

给当前界面上所有的标签设置属性。

格式:
*{
属性:值;
}

注意: 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 当界面上的标签比较多时, 性能会比较差, 所以在企业开发中一般不会使用通配符选择器。

伪类选择器

选中指定的任意标签然后设置属性。

格式:

1. 同级别的第几个()
   :first-child    选中同级别中的第一个标签
   :last-child     选中同级别中的最后一个标签
   :nth-child(n)   选中同级别中的第n个标签
   :nth-last-child(n)  选中同级别中的倒数第n个标签
   :only-child    选中父元素中唯一的标签

注意：不区分类型，如果选中的同级别中的标签与style中设置的标签不同，则没有效果。

    


    
伪类选择器标题
    
伪类选择器段落
    

        
我是段落一
        
我是段落二
    
    

        
我变红
    

2. 同级同类型的第几个
   :first-of-type    选中同级别中同类型的第一个标签
   :last-of-type     选中同级别中同类型的最后一个标签
   :nth-of-type(n)   选中同级别中同类型的第n个标签
   :nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
   :only-of-type    选中父元素中唯一类型的某个标签

    


    
伪类选择器标题
    
伪类选择器段落1
    
伪类选择器段落2

    

        
我是段落一
        
我是段落二
    
    

        
我变红
    
    

        
同类型唯一段落
        
同类型唯一
    

3. 其它用法
   :nth-child(odd)    选中同级别中的所有奇数
   :nth-child(even)   选中同级别中的所有偶数
   :nth-child(xn+y)   x和y是用户自定义的, 而n是一个计数器, 从0开始递增
   :nth-of-type(odd)   选中同级别中同类型的所有奇数
   :nth-of-type(even)  选中同级别中同类型的所有偶数
   :nth-of-type(xn+y)   x和y是用户自定义的, 而n是一个计数器, 从0开始递增

伪元素

表示页面中一些特殊的并不真实存在的元素（特殊的位置）。
伪元素使用 "::" 开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始位置
::after 表示结束位置

::before、::after结合content属性来使用

/*    伪元素*/
    p::first-letter{
        font-size: 50px;
    }
    p::first-line{
        color: red;
    }
    p::selection{
        background-color: yellow;
    }
    div::before{
        content: 'before添加';
        color: blue;
    }
    div::after{
        content: 'after添加';
        color: green;
    }

Hello Hello How are you
Xi Jinping, general secretary of the Communist Party of China (CPC) Central Committee, has underlined the importance to raise the governance capacity and level of modern socialist international metropolises.