CSS各式选择器记录

最新推荐文章于 2024-08-02 20:34:24 发布
最新推荐文章于 2024-08-02 20:34:24 发布
阅读量170 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/breakbridge/article/details/107065669
版权

目录

element,element    

element1 element2

.class1.class2

element.class 

element1>element2

element1+element2

[attribute] 

element[attribute] 

[attribute=value] 

[attribute~=value] 

[attribute|=value]

[attribute^=value]

[attribute$=value]

[attribute*=value] 

:before

:after

a:visited

a:active

a:hover

input:focus 

:first-letter 

:first-line

:first-child 

:only-child

:nth-child(n)

:nth-last-child(n)

:last-child

:first-of-type

:only-of-type

:nth-of-type(n)

:nth-last-of-type(n)

:last-of-type

:empty

:target 

:enabled 

:disabled

:checked

:not(element)

:out-of-range

:in-range

:read-write

:read-only

:optional

:required

:valid 

:invalid

element,element    

几个元素具有相同的样式，用逗号分隔每个元素的名称。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        h1, p { background-color: yellow; }   /*选择所有<div>元素和<p>元素 */
    </style>
</head>
<body>
    <h1>Welcome</h1>   <!--变黄-->
    <p>Hello</p>   <!--变黄-->
</body>
</html>

 PS：也可以是（element,.class)  (.class,.class)组合

element1 element2

 对element1元素中的element2元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div p { background-color: yellow; }  /*选择<div>元素内的所有<p>元素*/
    </style>
</head>
<body>
    <p>不是div中的p</p>   <!--不会变黄-->
    <div>
        <p>div中的p</p>   <!--变黄-->
        <section>
            <p>div中section中的p</p>   <!--变黄-->
        </section>
    </div>
</body>
</html>

 PS：也可以是（element .class) （.class element ) (.class .class)组合    (A B)表示A中的B

.class1.class2

 对同时具有class1和class2类选择器的元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .p1.p2 { background-color: yellow; }      /*选择同时具有p1和p2类选择器的元素*/
    </style>
</head>
<body>
    <p class="p1 p2">拥有p1和p2</p>   <!--变黄-->
    <p class="p2">拥有p2</p>          <!--不会变黄-->
    <p class="p1">拥有p1</p>          <!--不会变黄-->
</body>
</html>

element.class 

 对拥有该class类选择器的element元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p.p2 { background-color: yellow; }      /*选择所有拥有p2选择器的p元素*/
    </style>
</head>
<body>
    <p class="p1 p2">拥有p1和p2</p>   <!--变黄-->
    <p class="p2">拥有p2</p>          <!--变黄-->
    <p class="p1">拥有p1</p>          <!--不会变黄-->
</body>
</html>
p.p1.p2 { background-color: yellow; }    /*选择所有拥有p1和p2选择器的p元素*/ 

element1>element2

 对父级元素是element1的element2元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .div > p { background-color: yellow; }  /*选择所有父级 class="div"的 元素的 <p> 元素*/
    </style>
</head>
<body>
    <p>不是div中的p</p>    <!--不会变黄-->
    <div class="div">
        <p>div中的p</p>   <!--变黄-->
        <section>
            <p>div中section中的p</p>   <!--不会变黄-->
        </section>
    </div>
</body>
</html>

PS:这里的例子是  .class > element    和element element的区别就是 element > element 只表示一层继承，只作用于父与子

element1+element2

 对紧接着element1之后的第一个element2元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div+p { background-color: yellow; }   /*选择紧接着<div>元素之后第一个<p>元素*/
    </style>
</head>
<body>
    <p>div之前的p</p>   <!--不会变黄-->
    <div>
        <p>div中的p</p>   <!--不会变黄-->
    </div>
    <p>div之后的第一个p</p>   <!--变黄-->
    <p>div之后的第二个p</p>   <!--不会变黄-->
</body>
</html>

[attribute] 

 对拥有attribute属性的元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        [title] { background-color: yellow; }   /*选择所有带有该属性的元素*/
    </style>
</head>
<body>
    <p>div之前的p</p>   <!--不会变黄-->
    <p title="Hello">你好</p>  <!--变黄-->
</body>
</html>

element[attribute] 

对拥有attribute属性的element元素应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        h1[title] { background-color: yellow; }   /*选择所有带有该属性的h1元素*/
    </style>
</head>
<body>
    <h1>不含有title的h1</h1>  <!--不会变黄-->
    <h1 title="A">含有title的h1</h1>  <!--变黄-->
    <p title="Hello">你好</p>  <!--不会变黄-->
</body>
</html>

PS:也适用于  .class[attribute] 

[attribute=value] 

对拥有attribute属性且属性值为value的元素应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        [title="A"] { background-color: yellow; }   /*选择所有title="A"元素*/
    </style>
</head>
<body>
    <p title="A">title=A</p>  <!--变黄-->
    <p title="B">title=B</p>  <!--不会变黄-->
</body>
</html>

[attribute~=value] 

对拥有attribute属性且属性值含有value这个单词的元素应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        [title~="A"] { background-color: yellow; }   /*选择所有title中含有A这个单词的元素（字母不算）*/
    </style>
</head>
<body>
    <p title="A">title=A</p>  <!--变黄-->
    <p title="AB">title=AB</p>  <!--不会变黄-->
    <p title="A B">title=A B</p>  <!--变黄-->
</body>
</html>

PS:必须是单词(以空格隔开的才算一个单词，区分大小写） 

[attribute|=value]

 对拥有attribute属性且属性值等于value或者以value-开头的元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        [title|="A"] { background-color: yellow; }   /*选择所有title中单独一个A单词或者以A-开头的词组*/
    </style>
</head>
<body>
    <p title="A">title=A</p>  <!--变黄-->
    <p title="AB">title=AB</p>  <!--不会变黄-->
    <p title="A B">title=A B</p>  <!--不会变黄-->
    <p title="A-">title=A-</p>  <!--变黄-->
    <p title="A-B">title=A-B</p>  <!--变黄-->
    <p title="A-BC">title=A-BC</p>  <!--变黄-->
    <p title="A-B C">title=A-B C</p>  <!--变黄-->
</body>
</html>

PS:该样式主要用于lang属性 

[attribute^=value]

对拥有attribute属性且属性值是以value开头的元素应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        [title^="A"] { background-color: yellow; }  /*选择所有title中以字符串A开头的元素*/
    </style>
</head>
<body>
    <p title="A">title=A</p>      <!--变黄-->
    <p title="AB">title=AB</p>    <!--变黄-->
    <p title="A B">title=A B</p>  <!--变黄-->
    <p title="BA">title=BA</p>    <!--不会变黄-->
</body>
</html>

[attribute$=value]

对拥有attribute属性且属性值是以value结尾的元素应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        [title$="A"] { background-color: yellow; }  /*选择所有title中以字符串A结尾的元素*/
    </style>
</head>
<body>
    <p title="A">title=A</p>      <!--变黄-->
    <p title="A ">title=AB</p>    <!--不会变黄-->
    <p title="BA">title=BA</p>    <!--变黄-->
</body>
</html>

[attribute*=value] 

对拥有attribute属性且属性值包含value的元素应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        [title*="A"] { background-color: yellow; }  /*选择所有title中包含字符串A的元素*/
    </style>
</head>
<body>
    <p title="A">title=A</p>      <!--变黄-->
    <p title="A ">title=A </p>    <!--变黄-->
    <p title="BA">title=BA</p>    <!--变黄-->
</body>
</html>

 PS:[attribute~=value]表示要含有这个单词，[attribute*=value] 表示有这个字符串；[attribute*=value] 包含[attribute~=value]

:before

在元素前面加上内容，并给加上的内容应用样式 

:after

 在元素后面加上内容，并给加上的内容应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p:before { content: "Read this:"; color: red; }    /*在所有p元素前面加上内容，并给加上的内容设置样式*/
    </style>
</head>
<body>
    <p>Hello</p>            <!--Read this:Hello-->     <!--"Read this:"为红色-->
    <p>Welcome</p>          <!--Read this:Welcome-->   <!--"Read this:"为红色-->
</body>
</html>

PS:在元素后面加上内容（:after）;也可以应用于.class

对未访问的链接应用样式

a:visited

对访问过的链接应用样式

a:active

对活动的链接应用样式

a:hover

对鼠标在链接上面时应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        a:hover { background-color: yellow; }
        a:link { background-color: red; }
        a:visited { background-color: greenyellow; }
        a:active { background-color: brown; }
    </style>
</head>

<body>
    <a href="https://www.runoob.com/">菜鸟教程</a>
    <a href="https://c.runoob.com">菜鸟工具</a>
    <a href="https://baidu.com">baidu</a>
</body>
</html>

PS：hover也可以应用于其他element和.class；另外3个主要应用于链接 

input:focus 

一个输入字段获得焦点时选择的样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:focus { background-color: yellow; }
    </style>
</head>
<body>
    <form>
        First name: <input type="text" name="firstname" /><br>
        Last name: <input type="text" name="lastname" />
    </form>
</body>
</html>

:first-letter 

对元素的第一个字母应用样式

:first-line

对元素的第一行应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:first-line { background-color: yellow; }
        P:first-letter { color: red; }
    </style>
</head>
<body>
    <p>Hello</p>  <!--背景色为黄色，字母H为红色-->
</body>
</html>

:first-child 

若是父元素的第一个元素就对其应用样式 

:only-child

若是父元素的唯一元素就对其应用样式

:nth-child(n)

若是父元素的第n个元素就对其应用样式

:nth-last-child(n)

若是父元素的倒数第n个元素就对其应用样式

:last-child

若是父元素的最后一个元素就对其应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:first-child { background-color: yellow; }      /*1.若p元素是父元素的第1个子元素就应用样式*/
        p:only-child { color: red }                      /*2.若p元素是父元素的唯1元素就应用样式*/
        p:nth-child(3) { background-color:aqua; }        /*3.若p元素是父元素的第3个子元素就应用样式*/
        p:nth-last-child(2) { background-color:brown; }  /*4.若p元素是父元素的倒数第2个子元素就应用样式*/
        p:last-child { background-color:coral; }         /*5.若p元素是父元素的最后1个元素就应用样式*/
    </style>
</head>
<body>
    <p>The first child of body.</p>         <!--应用1-->
    <h1>The second child of body.</h1>      <!--无变化-->
    <p>The third child of body.</p>         <!--应用3-->
    <div>
        <h1>The first child of div.</h1>    <!--无变化-->
        <p>The second child of div.</p>     <!--应用5-->
    </div>
    <p>The last child 2 of body.</p>        <!--应用4-->
    <div>
        <p>The only child of div.</p>       <!--应用1,2,5-->
    </div>
</body>
</html>

PS：也可以对类选择器使用  .class:first-child 

:first-of-type

若是父元素的第一个该元素就对其应用样式

:only-of-type

若是父元素的唯一一个该元素就对其应用样式

:nth-of-type(n)

若是父元素的第n个该元素就对其应用样式

:nth-last-of-type(n)

若是父元素的倒数第n个该元素就对其应用样式

:last-of-type

若是父元素的最后一个该元素就对其应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:first-of-type { background-color: yellow; }         /*1.若p元素是父元素的第1个p元素就应用样式*/
        p:only-of-type{ color: red }                          /*2.若p元素是父元素的唯1的p元素就应用样式*/
        p:nth-of-type(2){ background-color:aqua; }            /*3.若p元素是父元素的第2个p元素就应用样式*/
        p:nth-last-of-type(2) { background-color: brown; }    /*4.若p元素是父元素的倒数第2个p元素就应用样式*/
        p:last-of-type { background-color: coral; }           /*5.若p元素是父元素的最后1个p元素就应用样式*/
    </style>
</head>
<body>
    <p>The first p of body.</p>         <!--符合1-->
    <h1>The second child of body.</h1>  <!--无变化-->
    <p>The second p of body.</p>        <!--符合3-->
    <div>
        <p>The only p of div.</p>       <!--符合1,2,5-->
    </div>
    <p>The second p of body.</p>        <!--符合4-->
    <p>The last p of body.</p>          <!--符合5-->
</body>
</html>

PS：first-child是针对所有子元素，而first-of-type是针对某一种子元素 

:empty

对空的元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:empty { width: 100px; height: 20px; background-color: yellow; }
    </style>
</head>
<body>
    <p></p>       <!--变黄-->
    <div>
        <p></p>   <!--变黄-->
    </div>
    <p>A paragraph.</p>
</body>
</html>

PS：可以对类选择器使用 .class:empty；也可以直接用 :empty，对所有元素应用 

:target 

选择当前活动的元素（包含该锚名称的点击的URL） 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:target { border: 2px solid #D4D4D4; background-color: yellow; }
    </style>
</head>
<body>
    <p><a href="#news1">Jump to New content 1</a></p>    <!--锚1-->
    <p><a href="#news2">Jump to New content 2</a></p>    <!--锚2-->
    <p id="news1"><b>New content 1...</b></p>            <!--点击锚1变黄，点击锚2变回原样-->
    <p id="news2"><b>New content 2...</b></p>            <!--点击锚2变黄，点击锚1变回原样-->
</body>
</html>

PS：可以对类选择器使用 .class:target ；也可以直接用 :target，对所有锚应用 

:enabled 

对启用中的元素应用样式 

:disabled

对就用中的元素应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input[type="text"]:enabled { background-color: aquamarine }
        input[type="text"]:disabled { background-color: yellow; }
    </style>
</head>
<body>
    <form action="">
        First name: <input type="text" /><br>                       <!--aquamarine--> 
        Last name: <input type="text"  /><br>                       <!--aquamarine--> 
        Country: <input type="text" disabled="disabled" /><br>      <!--yellow--> 
    </form>
</body>
</html>

PS：也可以对类选择器应用；也可以对所有元素应用。  （主要用于表单元素）

:checked

对每个选中的元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:checked { height: 20px;width: 20px; }
        input[type="checkbox"]:checked { height: 40px;width: 40px; }
    </style>
</head>
<body>
    <form action="">
        <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
        <input type="radio" value="female" name="gender" /> Female<br>
        <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
        <input type="checkbox" value="Car" /> I have a car
    </form>
</body>
</html>

 PS：也可以对类选择器应用；也可以对所有元素应用。  （仅适用于单选按钮或复选框）

:not(element)

对非element元素应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p { color: blue; }           /*对p元素应用该样式*/
        :not(p) { color: red; }      /*对非p元素应用该样式*/
    </style>
</head>
<body>
    <h1>这是一个标题</h1>       <!--红色-->
    <p>这是一个段落.</p>        <!--蓝色-->
    <p>这是另一个段落.</p>      <!--蓝色-->
    <div>这是div元素</div>      <!--红色-->
</body>
</html>

PS：也可以对类选择器应用 :not(.class)；也可以对元素的类选择器  element:not(.class) 

:out-of-range

当元素的值超出范围就应用样式 

:in-range

当元素的值在范围内就应用样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:out-of-range { background-color: red; }
        input:in-range { background-color: aquamarine; }
    </style>
</head>
<body>
    <input type="number" min="5" max="10" value="17" />
    <!--当value值超出范围变为red，在范围内变为aquamarine-->
</body>
</html>

:read-write

当元素是可读写时就应用样式

:read-only

当元素是只读的就应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:read-write { background-color: yellow; }
        input:read-only { background-color: red; }
    </style>
</head>
<body>
    <p>普通的input元素:<br><input value="hello"></p>              <!--变黄-->
    <p>只读的input元素:<br><input readonly value="hello"></p>     <!--变红-->
</body>
</html>

PS：是否可读写，就看元素是否有 readonly属性，若有就为只读  （只适用于 input 和 textarea 元素）

:optional

在表单元素是可选项时应用样式

:required

在表单元素是必填项时应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:optional { background-color: yellow; }
        input:required{ background-color: red; }
    </style>
</head>
<body>
    <p>可选的input元素:<br><input value="hello"></p>              <!--变黄-->
    <p>必填的input元素:<br><input required value="hello"></p>     <!--变红-->
</body>
</html>

PS：是否可选，就看元素是否有 required 属性，若有就为必填（只适用于表单元素: input, select 和 textarea）

:valid 

验证元素符合设定条件或格式就应用样式

:invalid

验证元素不符合设定条件或格式就应用样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:valid { background-color: yellow; }
        input:invalid { background-color: red; }
    </style>
</head>
<body>
    <input type="email" value="support@exampel.com" />   <!--当输入符合email格式就是黄色否则为红色-->
</body>
</html>

PS：选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。 

 

 

 

Bridge_go
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css总结
love_dzq的博客
05-20 1842
对CSS2以及CSS3和移动端布局方式做了个总结
css入门小白自学记录知识点
06-11
- **后代选择器**：用空格分隔两个选择器，如`div p`会选择所有位于`div`元素内的`p`元素。 - **群组选择器**：使用逗号分隔多个选择器，如`h1, h2, h3`将同时选择所有`h1`, `h2`和`h3`元素。 2. **字体样式**： ...
CSS第一节--选择器(1)
weixin_30768175的博客
05-17 156
前言：本篇主要学习CSS中的选择器，包括CSS及CSS3中的，作为自己的学习总结。 第一部分：CSS初识 　　1.何为CSS？有什么作用？ 　　　　CSS(Cascading Style Sheets):通常称为层叠样式表。 　　　　作用：主要负责HTML元素样式添加及页面的布局，是结构和样式分离，从而达到美化页面的目的。 　　2.CSS基本书写规则 　　　　使用CSS时，需要遵从一定...
CSS属性选择器、关系选择器、伪类选择器、伪元素选择器
星河梦~的博客
06-15 478
CSS选择器属性选择器种类用法关系选择器种类用法伪类选择器种类用法伪元素选择器 属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。 CSS3中新增了3种属性选择器。 种类 （1）E[att^=value] 这里的^表示以某个“value”开头 （2）E[att$=value] 这里的$表示以某个“value”结尾 （3）E[att*=value] 这里的*表示包含“value” 用法 //属性选择器 p[id^='xiao']{ /* p标签的id属性是以xiao开头的 */
web前端@css选择器
harry_c的博客
09-03 3484
web前端@css选择器超级详细 文章很长 需耐心阅读 内容总览 内容总览 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 熟练掌握CSS定位 熟练掌握CSS高级技巧强化CSS typora-copy-images-to:...
在学习uni-app过程中使用的css样式记录
qq_34080064的博客
05-20 1319
​在学习uni-app过程中，记录下使用的css样式，持续更新。
Html+CSS
Kiwi23333的博客
09-16 2258
1.HTML标签是由尖括号包围的关键词，例如。2.HTML标签通常是成对出现的，例如和,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。3.有些特殊的标签必须是单个标签（极少情况），例如<b「/>，我们称为单标签。1.以上三个代码vscode自动生成，基本不需要我们重写.2.文档类型声明标签，告诉浏览器这个页面采取htm15版本来显示页面.3.<html lang="en”>告诉浏览器或者搜索引擎这是一个英文网站.本页面采取英文来显示。
前端知识2-CSS
只是甲的博客
08-30 1045
css 前端 html
CSS知识点总结
m0_60560321的博客
08-13 2053
CSS学习期间记录的部分知识点总结
前段入门——CSS3 基础记录
Gink's Blog
06-30 807
HTML 基础知识已经过了一遍了，按照顺序，开始看 CSS 相关知识。众所周知，现在 CSS 最新标准是 CSS3，所以我就直接从 CSS3 开始搞起。 为什么要用 CSS 呢？它的作用是什么呢？ 因为刚学完 HTML 的知识，所以看到参考书上介绍这段时，心里对 HTML 的弊端清晰地映射出来： 维护困难。如果后期需要更改某特殊标记格式，会大费周章，浪费很...
html与css 知识总结
余笙.'的博客
02-28 2869
HTML html结构 HTML结构由<html>、<head>、<body>等几部分组成 html>:定义整个html文档 head>:包含所有头部标签 在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, &
类似JD的地区选择器
05-03
标题中的“类似JD的地区选择器”指的是一个模仿京东（JD）网站的地区选择功能的组件。这个组件通常用于电商网站或需要用户选择收货地址的在线服务中，让用户能够方便地选择他们所在的省份、城市和地区。在电商场景中...
css学习心得是鄙人第一次写的记录哦，有些差劲吧！
05-19
2. **选择器的使用**：选择器是CSS的核心，包括元素选择器（如`p`）、类选择器（如`.myClass`）、ID选择器（如`#myID`）以及更复杂的选择器组合，如后代选择器（`div p`）、相邻兄弟选择器（`h1 + p`）等。...
css-网页设计报告.doc
12-23
通过定义类选择器、ID选择器或其他CSS规则，可以精确地定位和美化网页的各个部分。 例如： ```css .container { width: 800px; margin: 0 auto; } .header { background-color: #f0f0f0; padding: 20px; } ....
ColorPicker 颜色拾取器
10-21
6. **历史记录**：许多ColorPicker工具提供颜色选择的历史记录，让用户可以轻松回溯并重复使用以前选择的颜色。 7. **自定义颜色库**：用户可以保存常用颜色到个人库中，方便日后快速调用。 在实际应用中，颜色...
前端的学习-CSS（弹性布局-flex）
最新发布
m0_68823256的博客
08-02 1484
CSS的定位-给父元素设置的属性
HTML,CSS,JavaScript实现——井字棋游戏
Rverdoser的博客
08-02 458
这段代码提供了一个3x3的井字棋盘，并使用CSS grid布局来创建这个棋盘。接下来，需要添加JavaScript代码来处理玩家的移动，以及判断输赢。这些逻辑会涉及事件监听、条件判断以及DOM操作。这里只提供实现井字棋游戏的核心HTML和CSS代码。具体的JavaScript逻辑（如处理玩家移动、判断胜负等）需要根据实际情况编写。// 这里添加JavaScript代码来实现游戏逻辑。
web基础之CSS
Yunzhong_jiuxiao的博客
08-02 1063
css属性
css-常用函数详解
魏晋-
08-02 418
8. translate() 方法函数在水平和/或垂直方向上重新定位元素。单个值边上在水平方向上的唯一，两个值表示第一个值在水平方向上的位移、第二个值表示在竖直方向上的位移。9. translate3d()，translateX()，translateY()，translateZ() 同表示在不同方向上的位移。因此，较大的值会产生更多模糊。在 CSS 中，有一些内置的函数可以帮助我们实现更复杂和灵活的样式效果。函数用于引入外部资源，常见的是图片。函数用于创建具有透明度的颜色值。来使用该变量定义的颜色。
CSS3选择器支持情况一览
"此资源提供了一个CSS选择器的支持列表，主要关注CSS3选择器在不同浏览器中的兼容性情况。更新于2009年6月30日，提及Firefox 3.5的发布，该版本与其他现代浏览器如Safari 3.1及更高版本、Opera 9.64及更高版本以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bridge_go

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值