h5c3从入门到精通day02

最新推荐文章于 2024-10-08 10:17:41 发布

飞不起来的飞机耶耶耶

最新推荐文章于 2024-10-08 10:17:41 发布

阅读量114

点赞数 4

文章标签： javascript 前端 html html5 css3 css

本文链接：https://blog.csdn.net/m0_75016516/article/details/132286056

版权

01.css3兼容性

-ms-transition: ;

-o-transition: ;

苹果

-webkit-transition: ;

火狐

-moz-transition: ;

02相邻兄弟选择器+

<style>
        /* 相邻兄弟选择器  +  */
        span+div {
            color: red;
        }
    </style>

<body>
    <div class="content">
        <span>span1</span>
        <div>div1</div>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
        <span>span6</span>
    </div>
</body>

03匹配选择器~

    <style>
        /* 匹配选择器  ~  */
        /* 位于div 后面的所有span元素都会被选中 */
       .content div ~ span{
            color: red;
        }
    </style>

<body>
    <div class="content">
        
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <div>div1</div>
        <span>span5</span>
        <span>span6</span>
    </div>

04属性选择器

[attribute]用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute^=value]匹配属性值以指定值开头的每个元素。

[attribute$=value]匹配属性值以指定值开头的每个元素。

[attribute*=value]匹配属性值中包含指定值的每个元素。

[attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。

[attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。

::selection选中后状态

05整体结构类型选择器

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。

06标签结构选择器

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
:last-of-type 匹配某个父元素中最后一个某一类型的元素。

07指定子元素的序号

:nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以是数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。
:nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。
:nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。
:nth-last-of-type(n) 匹配指定序号的同一种类型的子元素（从后往前数）

08其他伪类选择器

- :root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。

- :empty 指定当元素内容为空白时使用的样式。

- :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。

- :target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。

09表单状态的伪类选择器

- :disabled 指定当前元素处于不可用状态时的样式。

- :enabled 指定当前元素处于可用状态时的样式。

- :checked 指定表单中单选框或复选框处于选中状态时的样式。

10内容追加伪元素

- ::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)

- ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)

11js新增选择器

获取一个元素

document.querySelector('selector');

获取多个元素

document.querySelectorAll()

12多重背景

<style>
        .box2 {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            background-image: url(https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00626-2070.jpg),
                url(https://img2.baidu.com/it/u=3780486306,4144668544&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500);
            background-repeat: no-repeat;
            background-size: 200px 200px, 200px 200px;
            background-position: 0 0, 50% 50%, right bottom;
        }
    </style>
    <div class="box2"></div>