CSS3常用选择器

最新推荐文章于 2020-10-14 09:22:07 发布

我本浪人--游吟世间

最新推荐文章于 2020-10-14 09:22:07 发布

阅读量108

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_41760521/article/details/95003023

版权

前端开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

属性选择器：

E[att] 属性

E[att='val'] 属性att的值为"val"的元素

E[att~='val'] 属性att有多个值，val为其中一个
E[att^='val'] 属性att的值以"val"开头的元素

E[att$='val'] 属性att的值以"val"结尾的元素

E[att*='val'] 属性att的值包含"val"的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        input[type='text'] {
            border: 1px dashed red;
        }
        
        input[class~='name'] {
            border: 1px dashed #000;
        }
        
        input[name*='m'] {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <form action="#">
        <input type="text"><br>
        <input type="password" class="first name is"><br>
        <input type="password" name="myname"><br>
        <input type="password" name="haomeimei"><br>
    </form>
</body>

</html>

效果图：

同级选择器：

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F（紧挨着E元素的F元素）

E ~ F 匹配任何在E元素之后的同级F元素,兄弟选择器（E元素后的所有F元素）

伪类选择器：

:not(s)不含有s选择符的元素E

:first-child匹配父元素的第一个子元素

:last-child

:nth-child(n)

:nth-last-child(n)

:first-of-type

:last-of-type

:nth-of-type(n)：同类型中的第n个

:nth-last-of-type

:empty (dom树无内容)

:enable 匹配表单中激活的元素

:disabled 匹配表单中禁用的元素

:checked 匹配表单中被选中的radio(单选按钮)或checkbox(复选框)元素 checked/unchecked

:target

:root 根元素：<html>或<xml>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        li:not(.my) {
            color: aqua;
        }
        
        li:first-child {
            color: red;
        }
        
        li:last-child {
            color: pink;
        }
        
        li:nth-child(3) {
            color: brown;
        }
    </style>
</head>

<body>
    <li>00</li>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="my">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</body>

</html>

效果图：

伪元素选择器：

::first-letter 设置对象内的第一个字符的样式

::first-line 设置对象内的第一行的样式

::before

::after{content: ''}

::selection 设置对象被选择时的元素的样式(鼠标选择时的状态)

user-selector: none

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        input[type='text']+p::first-line {
            color: orange;
        }
    </style>
</head>

<body>
    <form action="#">
        <input type="text">
        <p>hello,Pains make you stronger, tears make you braver, and heartbreaks make you wiser. So thank the past for a better future. All you can do is to try your best. Even with those small steps, you're closer to your goal than you were yesterday. </p>
        <input type="password" name="myname">
        <p>world!</p>
    </form>
</body>

</html>

效果图：

我本浪人--游吟世间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3常用选择器

属性选择器：E[att] 属性E[att='val'] 属性att的值为"val"的元素E[att~='val'] 属性att有多个值，val为其中一个E[att^='val'] 属性att的值以"val"开头的元素E[att$='val'] 属性att的值以"val"结尾的元素E[att*='val'] 属性att的值包含"val"的元素<!DOCTYPE htm...
复制链接

扫一扫

专栏目录