CSS的选择器(标签、类、id、通配符、后代、子元素、并集、链接伪类、focus伪类)

1. 基础选择器 1.1 标签选择器

    
    test title
    

        p {
            font-family: 宋体, sans-serif, Arial, "Times New Roman", 微软雅黑, "Microsoft YaHei UI", serif;
        }

    



段落一
段落二
盒子一

• font-family可以选择多个, 如果前面的没有, 则会选择后面的字体

显示效果如下：

1.2 class类选择器

    
    test title
    

        .box-size {
            width: 100px;
            height: 100px;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

    



盒子一
盒二
盒子三

显示效果如下：

1.3 id选择器

    
    test title
    

        #font-set {
            color: yellow;
            font-size: 50px;
        }
        
    



段落一
段落二

• 通常说id只能被调用一次, 这是因为javascript的dom编程是使用getElementById来获取这个id的, 如果有多个, 就获取不到, 所以需要保证html的标签只调用id一次, 但是css中可以调用多次, 为了统一, 还是保证html的标签只调用id一次

显示效果如下：

1.4 通配符选择器

    
    test title
    

        * {
            font-size: 50px;
        }

    



段落一
盒子一

显示效果如下：

2. 复合选择器 2.1 后代选择器

    
    test title

    

        ul a {
            color: red;
        }

    




    
链接一

• 格式为：元素1 元素2 {}，元素2只要是元素1的后代就可以

显示效果如下：

2.2 子元素选择器

    
    test title

    

        li>a {
            color: red;
        }

    




    
链接一

• 格式为：元素1>元素2 {}，元素2只能元素1的儿子

显示效果如下：

2.3 并集选择器

    
    test title

    

        div,p {
            color:red;
        }

    



盒子一

段落一

• 同时给多个选择器设置样式

显示效果如下：

2.4 链接伪类选择器

    
    test title

    

        a:link {
            color:blue;
            text-decoration: none;
        }

        a:visited {
            color:gray;
        }

        a:hover {
            color:black;
        }

        a:active {
            color:yellow;
        }

    



百度 
未知的链接

• a:link表示所有未选择的链接
• a:visited表示访问过的链接
• a:hover表示鼠标移动到的链接
• a:active表示鼠标左键选中但未松开时的链接
• 遵循LVHA的顺序

显示效果如下：

2.5 focus伪类选择器

    
    test title

    

        input:focus {
            background: red;
        }

    



 

• 一般用于input这种输入型的表单元素

当鼠标移到第一个输入框，点击左键，此时光标选中第一个输入框，显示效果如下：