web第二天笔记

最新推荐文章于 2024-10-09 20:10:15 发布

全国素质模范

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量38

点赞数

文章标签：前端笔记 javascript

本文链接：https://blog.csdn.net/qq_44213575/article/details/131870878

版权

1.基础选择器

/* 标签选择器:选中当前页面中所有符合标签 */
        h1 {
            color: rgb(32, 27, 28);
        }

        /* id选择器   #id*/
        #box1 {
            color: rgb(6, 106, 194);
        }

        /* 类选择器   .类名 */
        .box1 {
            background-color: pink;
        }

        /* 通配符选择器  选中所有的元素*/
        * {
            font-size: 60px;
        }

2.包含选择器

<style>
        /* 子代选择器   只选中亲生儿子 */
        ul>li {
            background-color: pink;
        }

        /* 后代选择器 */
        /* css样式表存在层叠性，后边的会将前边的覆盖掉 */
        ul li {
            background-color: aqua;
        }

        ul div>li {
            background-color: brown;
        }
    </style>

3.有序列表

<body>
    你喜欢的食物是：
    <ol type="A">
        <li>椒麻鸡
            <a href="#">去百度</a>
            <img src="images/cat.gif" alt="">
        </li>
        <li>榴莲</li>
        <li>螺蛳粉</li>
    </ol>
</body>

4.逗号选择器（复合选择器）

 /* div {
            background-color: pink;
        }

        h1 {
            background-color: pink;

        }

        p {
            background-color: pink;

        } */

        /* 复合选择器 */
        div,
        p,
        h1 {
            background-color: aqua;
        }
    </style>

5.无序列表

<body>
    你喜欢的明星是：
    <ul type="square">
        <li>梁朝伟</li>
        <li>蔡徐坤</li>
        <li>黄子韬</li>
        <li>周杰伦</li>

    </ul>
</body>

6.属性选择器

<style>
        input[type="text"] {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aqua;
        }

        input[name] {
            background-color: red;
        }

        /*   *type的属性值里包含e的input元素 
        */
        input[type*="e"] {
            background-color: blueviolet;
        }

        input[type^="p"] {
            background-color: chartreuse;
        }

        input[type$="l"] {
            background-color: red;
        }
    </style>

7.自定义列表

<body>
    <dl>
        <dt>线下门店</dt>
        <dd>web之家</dd>
        <dd>服务网点</dd>
        <dd>web之家</dd>

    </dl>
</body>

8.伪类选择器

 <style>
        /* a:link 、a:visited 、a:hover 、a:active */
        /* 伪类选择器：元素在不同状态下的样式 */
        /* ：link    为访问的来凝结样式 */
        a:link {
            color: green;
        }



        /* 访问之后的样式 */
        a:visited {
            color: red;
        }

        /* 获取焦点时的样式 */
        a:focus {
            color: blue;
        }

        /* 鼠标悬停时的样式 */
        /* 
       +表示下一个
            ~表示之后所有的兄弟元素 */

        a:hover+div {
            color: pink;
        }

        /* active     用户点击之后按住鼠标 */
        a:active {
            background-color: pink;
        }

        div:hover {
            background-color: pink;
        }
    </style>

9.结构结构伪类选择器

<style>
        ul li:nth-child(9) {
            background-color: pink;
        }

        ul li:last-child {
            background-color: red;
        }

        ul li:first-child {
            background-color: aqua;
        }

        ul li:nth-child(2n+1) {
            background-color: blue;
        }

        ul li:nth-child(2n) {
            background-color: rgb(33, 227, 124);
        }
    </style>

style>
        /* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */
        .father .son:nth-child(2) {
            background-color: pink;
        }


        /* 先找.father，再找.father里的.son，然后对.son进行排序 */
        .father .son:nth-of-type(2) {
            background-color: aqua;
        }
    </style>

10.label标签

 <form action="#">
        <!-- 1、 -->
        <label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing">
        <!-- 2 -->
        <label> 爱跳舞<input type="checkbox" name="love" id=""></label>
    </form>

11.伪元素选择器

<style>
        p::before {
            content: "##3#";
            color: pink;
        }

        p::after {
            content: "and you";
            color: red;
        }

        input::placeholder {

            color: pink;
        }

        div::selection {
            color: aqua;
        }
    </style>