5-CSS的选择器

选择器

属性
通过属性的复杂叠加才能做出漂亮的网页

创新互联公司-专业网站定制、快速模板网站建设、高性价比乐山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式乐山网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖乐山地区。费用合理售后完善，10余年实体公司更值得信赖。

选择器
通过选择器找到对应的标签设置样式

选择器的作用
选择对应的标签，为之添加样式

标签选择器
根据标签名找到标签

类选择器

    
    
    



    
22222222222
    
22222222222
    
22222222222
    
1111111111111111
    
1111111111111111
    
1111111111111111

代码：这是普通的页内样式； 注意style中的注释方式不一样。

上图：
可以看到业内样式设计成功； 那怎么将其中部分内容单独进行设计呢，使用行内样式的确可以做到，但是body中一般都是做内容和结构，所以尽量不要使用行内设计。
所以我们可以通过类选择器来设计，为某个或多个内容进行类命名，然后针对命名的类进行设计。

    
    
    



    
22222222222
    
22222222222
    
22222222222
    
1111111111111111
    
1111111111111111
    
1111111111111111

代码↓
在body中为两个内容进行类命名为 test1；
通过点“.”+类选择器名称，对类命名为test1的内容进行设计。

上图：可以看到类选择器的设计为蓝色

id选择器

    
    
    



    
22222222222
    
22222222222
    
22222222222
    
22222222222
    
22222222222
    
1111111111111111
    
1111111111111111
    
1111111111111111
    
1111111111111111

代码↓：
在body中，在内容中使用 id="" 来定义id，这个id是唯一的，不可重复，否则会报错；不过在html中多个内容使用同一个id也是可以成功的，这是因为html是弱类型语言，在JS中就会报错。
在style中使用#main{} 来设计该id的样式

并列选择器

        p , #main{
            border: 4px dashed green;
        }

代码↓：
在style中加入上面的代码； 表示或p或#main的标签都会被设计；
可以放多种标签进行同时设计

复合选择器

复合选择器就是与的关系。
不管放了几个标签，都必须同时符合才会生效设计内容。

       /*复合选择器*/
        p.test1{
            font-size: 66px;
        }
        div#main{
            font-size: 10px;
        }

代码：新增上面的代码； 设计了两个复合选择器； 每个复合选择器的两个条件都必须同时满足，注意复合标签之间不能有空格。

上图：可以看到同时满足两个复合条件的标签的字体大小改变了。

后代选择器

    
    
    



    
22222222222
    
22222222222
    
22222222222
    
22222222222
    
22222222222
    
1111111111111111
    
1111111111111111
    
1111111111111111
    
1111111111111111
    

        

            我是超链接
        

    

代码↓：
body下面增加了部分内容；
style中增加了后代选择器设计，先满足div标签，div后面要满足.test3标签，test3后面要满足a标签；

        /*后代选择器*/
        /*div .test3 a{*/
        /*    font-size: 66px;*/
        /*}*/

        div  a{
            font-size: 66px;
        }

代码：如果把中间的某一个标签去掉也是可以的，因为a也属于div的后代。

        /*后代选择器*/
        /*div .test3 a{*/
        /*    font-size: 66px;*/
        /*}*/

        /*div  a{*/
        /*    font-size: 66px;*/
        /*}*/

        #test2 .test3 a{
            font-size: 66px;
        }

代码：将最前面的标签改成#test2 也是满足条件的。

直接后代选择器

与后代选择器效果差不多，但要求必须是紧挨着的下一级符合才可以，跳过匹配某个标签的后代是不生效的。

上图：
必须是div下面紧挨着的p标签才会生效；
div下的span的p标签是不生效的；

直接后代选择器表达： div > p{}

相邻兄弟选择器

上图：倒数第2个p标签与其上面的div标签相邻

属性选择器

上图：匹配div标签，且div中有名为name的属性； 第1条和第2条会相匹配。

上图：多属性选择器的匹配方法。 第二条匹配。

上图：匹配div，名为name的属性，且name属性的值要是“jack”，满足这三个条件才能匹配

伪类选择器

其中常用的有focus和hover

• focus

/*伪类选择器*/
input:focus{
    width: 500px;
    height: 60px;

上2代码：body中添加input内容； style添加针对input:focus的设计；

上图：默认没有点击的样式

上图：点击后的样式，就变成我们设计的样子了，高度和宽度再点击（聚焦）的时候就改变了。

input:focus{
    width: 500px;
    height: 60px;
    /*调整边框*/
    outline: none;
    border: 1px solid red;

代码：调整边框，先将原来的边框给去掉（outline: none），才能重新定义新的边框。

上图：如果不先去掉原来的边框，新的border 样式就不会生效。

• hover

/*id选择器*/
#main{
    font-size: 60px;
    width: 500px;
    height: 200px;
    background: deepskyblue;
}

代码：修改id选择器的设计样式

上图：当前修改后的样式

#main:hover{
    width: 100px;
    height: 100px;
}

代码：在style中增加上面的代码的样式

上图：将鼠标悬浮在上面的时候，可以看到边框大小改变了。

伪元素

#test4:first-letter{
            font-size: 55px;
        }

我是段落

上2代码：
body增加一个段落，并且使用id选择器；
style中增加first-letter伪元素

上图：文本的第一个字母的样式改变了