CSS3选择器新增问题的实现


Posted in HTML / CSS onJanuary 21, 2021

基本选择器扩展

1.子元素选择器

:tomato: #wrap > .inner {color: pink;} 也可称为直接后代选择器,此类选择器只能匹配到直接后代,不能匹配到深层次的后代元素 总结:>作用于元素的第一代后代,空格作用于元素的所有后代

2. 相邻兄弟选择器

:tomato: #wrap #first + .inner {color: #f00;}它只会匹配紧跟着的兄弟元素

3. 通用兄弟选择器

:tomato: #wrap #first ~ div { border: 1px solid;}它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素所有的兄弟元素

4. 选择器分组

:tomato: h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符

属性选择器

1. 子串值属性选择器

:tomato: [attr|=val] : 选择attr属性的值是val(包括val)或以val-开头的元素。

:tomato: [attr^=val] : 选择attr属性的值以val开头(包括val)的元素。

:tomato: [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。

:tomato: [attr*=val] : 选择attr属性的值中包含字符串val的元素 少数浏览器支持子串选择元素

2. 存在和值属性选择器

:tomato: [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。

:tomato: [attr~=val]:表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为val。 比如位于被空格分隔的多个类(class)中的一个类。比如name="atguigu_llc atguigu"

:tomato: [name =val]:该选择器仅选择 name 属性被赋值为 val 的所有元素。

伪类与伪元素选择器

1. 链接伪类

:tomato: :link 表示作为超链接,并指向一个未访问的地址的所有锚

:tomato: :visited 表示作为超链接,并指向一个已访问的地址的所有锚

:tomato: :target 代表一个特殊的元素,它的id是URI的片段标识符

:exclamation: 注意:link,:visited,:target是作用于链接元素的!前两者只能在a标签上起作用

*{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 200px;
                line-height: 200px;
                background: palegreen;
                color: hotpink;
                text-align: center;
                display: none;
            }
            a:visited{
                color:orange;
            }
            :target{
                display: block;
            }

2. 动态伪类

:tomato: :hover表示悬浮到元素上

:tomato: :active表示匹配被用户激活的元素(点击按住时)

:tomato:由于a标签的:link和:visited可以覆盖了所有a标签的状态,所以当:link,:visited,:hover,:active同时出现在a标签身上时 :link和:visited不能放在最后!!!

:tomato: 隐私与:visited选择器只有下列的属性才能被应用到已访问链接:color、background-color、border-color

:exclamation: 注意:hover,:active基本可以作用于所有的元素!

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                color: black;
                display: block;
            }
            a:hover{
                font-size:24px;
                /*color: red;*/
            }
            
            a:link{
                font-size:48px;
                /*color: pink;*/
            }
            a:visited{
                /*font-size:96px;*/
                /*color: deeppink;*/    
            }
        </style>

3. 表单相关伪类

①:disable 匹配被禁用的表单

②:checked 匹配被选中的表单

③:focus 匹配获焦的表单

④:enabled匹配可编辑的表单

实操练习1

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input:enabled{
            background: skyblue;
        }
        input:disabled{
            background: deeppink;
        }
        input:checked{
            width: 200px;
            height: 200px;
        }
        input:focus{
            background: pink;
        }
    </style>
</head>
<body>
    <input type="text"  />
    <input type="text"  disabled="disabled" />
    <input type="checkbox"  />
    <input type="text"  />
</body>

实操练习2 自定义单选按钮

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        label{
            position: relative;
            float:left; /*转换为块级元素撑开大小*/
            width:100px;
            height:100px;
            border:2px solid;
            border-radius: 50%;
            overflow:hidden;
        }
        label > span{
            position: absolute;
            left:0;
            top:0;
            bottom:0;
            right:0;
        }
        input{
            position: absolute;
            left:-50px;
            top:-50px;
        }
        input:checked + span{
            background:pink;
        }
    </style>
</head>
<body>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
</body>

CSS3选择器新增问题的实现

4. 伪元素

:tomato: 概念:伪元素表示页面中一些特殊的并不真实存在的元素(特殊的位置)

:tomato: 语法使用 ::开头

:tomato: 类别:①::first-letter ②::first-line ③::selection ④::before ⑤::after 注意:④和⑤必须结合content属性来使用

:tomato: 代码示例:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"content="ie=edge" />
    <title></title>
    <style type="text/css">
    p:first-letter{
        color: #008000;
        font-size: 2.5rem;
    }
    p:first-line{
        color: aqua;
    }
    p::selection{
        color:red;
    }
    p:before{
        content: ''I will love you forever';
        color:blue;
    }
    p:after{
        content: 'sure are you';
        color:green;
    }
    </style>
</head>
<body>
    <div>Hello are you okay</div>
    <p> 我还是一个段落 我是一个很多很多解放碑还不错保持经济刺激
    哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈
    </p>
</body>

5. 结构性伪类(重点)

:tomato: index的值从1开始计数!!!!index可以为变量n(只能是n)index可以为even odd

:tomato: #wrap ele:nth-child(index)表示匹配#wrap中第index的子元素,这些伪类都是根据所有的子元素进行排序,这个子元素必须是ele

:tomato: #wrap ele:nth-of-type(index)表示匹配#wrap中第index的ele子元素

除此之外:nth-child和:nth-of-type有一个很重要的区别!!nth-of-type以元素为中心,在同一类型中排序,nth-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

/* even表示偶数

odd表示奇数

first-of-type:在p类型中排

first-child:所有元素排

*/

:tomato::nth-child(index)系列

:first-child

:last-child

:nth-last-child(index)

:tomato::nth-of-type(index)系列

:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type(相对于:first-of-type:last-of-type
 或者 :nth-of-type(1):nth-last-of-type(1))    
:not        
:empty(内容必须是空的,有空格都不行,有attr没关系)

代码实例

*{
            margin: 0;
            padding: 0;
        }
        #wrap li:nth-of-type(1){
            color: pink;
        }
        p:only-of-type{
            border: 1px solid;
        }

6. 伪元素选择器

::after

::before

::firstLetter

::firstLine

::selection

#wrap::before{
        content:"";
        display:block;
        width:200px;
        height:200px;
        background: #00FFFF;
    }
    #wrap::after{
        content:"";
        display:block;
        width:200px;
        height:200px;
        background: #0000FF;
    }

到此这篇关于CSS3选择器新增问题的实现的文章就介绍到这了,更多相关CSS3选择器新增内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 #HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 #HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 #HTML / CSS
使用CSS3制作版头动画效果
Dec 24 #HTML / CSS
CSS3实现红包抖动效果
Dec 23 #HTML / CSS
html5+css3之制作header实例与更新
Dec 21 #HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 #HTML / CSS
You might like
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
简述vue中的config配置
2018/01/23 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python语言描述随机梯度下降法
2018/01/04 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python 读写文件的操作代码
2018/09/20 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
对python 自定义协议的方法详解
2019/02/13 Python
python图像处理入门(一)
2019/04/04 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
PyQt5实现简单的计算器
2020/05/30 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
建筑系毕业生自我鉴定
2014/01/24 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
MySQL分布式恢复进阶
2022/07/23 MySQL