5-CSS的选择器

选择器

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

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

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

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

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

类选择器




    
    选择器
    



    
22222222222
22222222222
22222222222

1111111111111111

1111111111111111

1111111111111111

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

5-CSS的选择器

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




    
    选择器
    



    
22222222222
22222222222
22222222222

1111111111111111

1111111111111111

1111111111111111

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

5-CSS的选择器

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

id选择器




    
    选择器
    



    
22222222222
22222222222
22222222222
22222222222
22222222222

1111111111111111

1111111111111111

1111111111111111

1111111111111111

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

5-CSS的选择器

并列选择器

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

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

5-CSS的选择器

复合选择器

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

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

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

5-CSS的选择器

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

后代选择器




    
    选择器
    



    
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的后代。

5-CSS的选择器

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

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

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

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

直接后代选择器

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

5-CSS的选择器

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

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

相邻兄弟选择器

5-CSS的选择器

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

属性选择器

5-CSS的选择器

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

5-CSS的选择器

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

5-CSS的选择器

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

伪类选择器

5-CSS的选择器

其中常用的有focus和hover

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

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

5-CSS的选择器

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

5-CSS的选择器

上图:点击后的样式,就变成我们设计的样子了,高度和宽度再点击(聚焦)的时候就改变了。

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

代码:调整边框,先将原来的边框给去掉(outline: none),才能重新定义新的边框。

5-CSS的选择器

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

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

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

5-CSS的选择器

上图:当前修改后的样式

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

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

5-CSS的选择器

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

伪元素

5-CSS的选择器

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

我是段落

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

5-CSS的选择器

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


网页题目:5-CSS的选择器
标题URL:http://pwwzsj.com/article/jgiggd.html