【CSS基础学习】复杂选择器 - 蓝蓝设计_UI设计公司

帝皇彩票官网

【CSS基础学习】复杂选择器

2020-4-11 前端达人 前端及开发文章及欣赏

文章目录

        CSS第二课-复杂选择器

        群组选择器

        格式

        选择器1,选择器2,,,选择器n{声明的属性和属性值}

        p,h1{
        	color: blue;
        }


        用于对于多个选择器进行样式修改,由简单选择器组合而成的选择器,可以是简单选择器中的任意组合,如上面代码例,就是修改了p标签和h1标签的字体颜色。

        属性选择器

        根据属性名查找元素

        格式

        元素[属性名]{
        	声明的属性和属性值;
        }


        p[id]{
        	color: blue;
        }


        前面添加元素的名字,然后后面加上属性名,比如上例,就是p标签,其中带有id的元素,然后把字体颜色设置为蓝色。

        根据属性值精确查找

        格式

        元素[属性名=属性值]{
        	声明的属性和属性值;
        }


        p[class = 'p2']{
        	color: blue;
        }


        和上面的根据属性名查找差不多,只不过更加精确了,精确到了属性名后面的属性值,上例就是作用于p标签,只不过条件是为带有class属性,并且属性值为p2的p标签。

        多属性选择器

        格式


        元素[属性名或属性表达式][属性名或属性表达式]..{
        	声明的属性和属性值;
        }
        p[title][class]{
        	color: blue;
        }



        元素后面加。属性名或属性表达式,可以加+∞个,但是没必要。上例为:设置title属性和class属性的段落p标签的样式

        根据属性值近似查找

        格式


        元素[元素名~=属性值]{
        	声明的属性和属性值;
        }


        元素[属性名|=值]{
        	声名的属性和属性值;
        }


        p[class~='red']{
        	color: blue;
        }



        注意,这里是~=,为约等于,就是找满足符合约等于条件的标签,上例为:设置class属性的值,包含red属性名的标签

        根据标签查找

        格式


        元素名1~元素名2{
        	声名的属性和属性值;
        }


        a~p{
        	color: blue;
        }


        a标签后面的每一个p标签,都进行了样式的修改。

        派生选择器

        后代选择器

        格式


        父类标签 子类标签{ /*注意俩标签中间有空格*/
        	声名的属性和属性值;
        }


        div strong{
        	color: blue;
        }


        相邻兄弟选择器

        格式


        父标签+子标签{
        	声名的属性和属性值;
        }


        #div1 + p{
        	color: blue;
        }


        相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。




        ————————————————
        版权声明:本文为CSDN博主「董小宇」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
        原文链接:https://blog.csdn.net/lolly1023/article/details/105413125

标签: CSS 选择器

Powered by sitemap
博发彩票开户 帝皇彩票 吉利彩票导航 帝皇彩票官网 大象彩票登入 吉利彩票登陆 吉利彩票开户 桔子彩票注册 迪士尼彩乐园 盛源彩票注册