css3选择器归纳

最新推荐文章于 2022-10-16 18:38:34 发布
最新推荐文章于 2022-10-16 18:38:34 发布
阅读量457 收藏
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zdf1215/article/details/53221572
版权

1.基本选择器：


这里写图片描述

2.层次选择器：


这里写图片描述

3.属性选择器：


这里写图片描述
示例⑴： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: peachpuff;
                margin-bottom: 4px;

            }
            p a{
                display: block;
                text-decoration: none;
                color: #444;
                background: url(img/w.gif) no-repeat 3px center;
            }
            p a[href*=doc]{
                background: url(img/w.gif) no-repeat 3px center;
            }
            p a[href*=text]{
                background: url(img/text.gif) no-repeat 3px center;
            }
            p a[href*=pdf]{
                background: url(img/swf.gif) no-repeat 3px center;
            }
            p a[href*=exl]{
                background: url(img/x.gif) no-repeat 3px center;
            }
        </style>
    </head>
    <body>
        <p><a href="http://www.baidu.com/doc/javascript:">css3学习</a></p>
        <p><a href="http://www.baidu.com/text/javascript:">css3学习</a></p>
        <p><a href="http://www.baidu.com/pdf/javascript:">css3学习</a></p>
        <p><a href="http://www.baidu.com/exl/javascript:">css3学习</a></p>
    </body>
</html>

运行效果：
这里写图片描述

示例⑵：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            label{
                float: left;margin: 0 5px;overflow: hidden;position: relative;
            }
            label input{
                position: absolute;top: -50px;left: -50px;
            }
            span{
                float: left;width: 30px;height: 30px;border: 2px solid pink;border-radius: 50%;
            }
            input:checked~span{
                background: red;
            }
        </style>
    </head>
    <body>
            <label>
                <input type="radio" name="tab" id="" value="" />
                <span></span>
            </label>
            <label>
                <input type="radio" name="tab" id="" value="" />
                <span></span>
            </label>
            <label>
                <input type="radio" name="tab" id="" value="" />
                <span></span>
            </label>
    </body>
</html>

运行效果：
这里写图片描述

4.结构伪类选择器：


这里写图片描述
示例： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul li{
                list-style: none;
            }
            li{
                width: 150px;
                border-right: 1px solid #d8d8d8;
                float: left;
                margin: 0 10px;
                color: #444;
            }
            li a{
                color: #000;
                text-decoration: none                                                     
            }
            li:nth-last-child(1){
                border: 0;
            }
            li a:nth-child(4n+1){
                font-weight: bold;
            }

        </style>
    </head>
    <body>
        <ul>
            <li>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
            </li>
            <li>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
            </li>
            <li>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
            </li>
            <li>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
                <a href="jac=vascript:">新浪</a>
            </li>
        </ul>
    </body>
</html>

运行效果：
这里写图片描述

5.文本新增伪类：


这里写图片描述
示例： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                width: 300px;
                border: 1px solid #000;
                font: 12px/30px "宋体";
                padding: 10px;
            }
            p:first-line{
                background: palegreen;
            }
            p:first-letter{
                font-size: 30px;
            }
            p::selection{
                background: #666;
                color: plum;
            }
            p:before{
                content: "cat";
                display: block;
                border: 1px solid #000;
            }
            p:after{
                content: "cat2";
                display: block;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <p>只能说我输了也许是你怕了我却得到你安慰的淘汰只能说我输了也许是你怕了我却得到你安慰的淘汰只能说我输了也许是你怕了我却得到你安慰的淘汰只能说我输了也许是你怕了我却得到你安慰的淘汰</p>
    </body>
</html>

运行效果：
这里写图片描述

fangfang12315
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习归纳2的综合案例
04-01
1. **选择器**：如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）、后代选择器（`selector1 selector2`）、子元素选择器（`selector1 > selector2`）等，用于指定要应用样式的元素。 2. **盒...
CSS属性简写和选择器的优先级问题
01-19
具有简短写法的 CSS 属性很多，但是常用的属性无外乎字体、列表、背景、边框、透明等几种，所以在此对这几种属性的简短写法做个归纳，备忘。font 属性 font 属性涉及到字体、字号、行高等好几个属性，使用简短写法的...
href="#"与href="javascript:void(0)"的区别
zhisheng00的专栏
07-15 534
"＃"包含了一个位置信息 默认的锚点是＃top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首 而javascript:void(0) 则不是如此 所以调用脚本的时候最好用void(0) 或者&lt;input onclick&gt; &lt;div onclick&gt;等 打开新窗口链接的几种办法 ...
javascript中call()方法
lceoadren的博客
10-07 509
javascript的call简单理解
CSS3 选择器归纳
liuqiao0327的专栏
08-20 178
CSS3 选择器归纳 文章目录CSS3 选择器归纳一.CSS之前的选择器1.元素选择器2.id选择器3.类(class)选择器4.属性选择器5.派生选择器6.相邻兄弟选择器二.CSS3新增选择器1.属性选择器2.结构性伪类选择器3.目标伪类选择器4.UI 元素状态伪类选择器5.动态伪类选择器6.否定伪类选择器7.层级选择器 一.CSS之前的选择器 1.元素选择器 文档的元素就是最基本的选择器 h1{ color:red; } 2.id选择器 可以为标有特定id的元素指定特定的样式 #box{ b
css选择器归纳
m0_61384067的博客
10-16 496
css选择器归纳 通配，元素，id,类，并集，交集，后代，子元素，伪类选择器
CSS常用选择器归纳大全
xu_yuxuyu的博客
11-10 899
html零基础必看——html入门，编程就是如此简单 第十三章：CSS选择器汇总1. 初级选择器2. 属性选择器3. 伪类选择器3.1 状态类3.2 结构类4.伪元素选择器4.1 伪元素选择器的写法4.2 注意4.3 伪类选择器和伪元素选择器的区别5.样式的优先级比较总结 1. 初级选择器 以标签名 标签名选择器 如 p{ } 以# id选择器 如 #one{ ] 以 . 类名选择器 如 . box 以 通配符选择器 如 { } 可用于清除默认样式 以 空格 后代选择器（父 子 孙 …
CSS选择器全局归纳
CYW2019_HUST的博客
08-07 664
这篇博客是我在b站学习狂胜说CSS时，对于CSS选择器部分进行的个人理解归纳，因为发现在测试过程中，按照狂神的代码运行有些问题，所以之后又借鉴了尚硅谷的部分教学视频进行归纳。主要包括标签选择器、类别选择器、id选择器、层次选择器（后代选择器、子选择器、相邻的兄弟选择器、通用选择器）、结构伪类选择器和属性选择器。 文章目录1、选择器入门2、基本选择器（重点）2.1、标签选择器2.2、类别选择器class2.3、id选择器2.4、小结3、高级选择器3.1、层次选择器后代选择器子选择器相邻兄弟选择器通用选择器层次
css常用选择器归纳
老衲的少女心i~
03-15 405
元素选择器（元素就是标签，标签就是元素） 作用：通过元素选择器可以选中页面中的所有指定元素 语法：标签名{} id选择器 -通过我们的元素的id属性值选中唯一的一个元素 -语法： #id属性值{} 类选择器 ​ （我们可以为元素设置class属性，和id属性类似， ​ 只不过class属性可以重复 ​ 拥有相同class属性值的元素，我们可以说他们是一组元素 ​ 可以同时为一个元素设置多个class属性值，多个值之间用空格隔开） ​ -通过元素的class属性值选中一组元素 -语法： .cl
CSS3 选择器的用法总结
@黄小泽的个人博客
11-09 1607
本篇博客主要针对CSS3一个很常用的知识点进行归纳总结，那就是选择器。目的：通过选择器的使用，开发者可以快速地选取到目标元素。本篇通过以下几方面介绍选择器： 通配符 直接子节点 常用伪类选择 位置选择 属性选择 状态选择 过滤选择 通配符 通配符包括三种： （1）通配符^，表示开头匹配。 （2）通配符$，表示结尾匹配。 （3）通配符*，表示包含匹配。 它的用法如下： &...
CSS及选择器归纳
邱邱的博客
12-14 237
今天把ＣＳＳ样式表的分类和选择器分类做一个总结和归纳，供初学者参考： 1.样式表的分类：   A)行类样式：写在HTML标签里面       例如：样式规则.......”>,此例使用行类样式   B)内嵌样式：写在之间      例如： H1{ 样式规则; ............................... }             C)外部样式：写在外部，H
Css知识点归纳总结.doc
03-29
Css的基本格式是选择器{属性：值;}，其中选择器是指要应用样式的HTML元素，属性是指要设置的样式属性，值是指设置的样式值。例如：p{color:red;}，其中p是选择器，color是属性，red是值。 派生选择器 派生选择器是...
图解CSS3核心技术与案例实战
05-23
内容极为全面、丰富和翔实，由浅入深地讲解了CSS3新特性的语法、功能和使用技巧，涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块；写作方式创新，有趣且易懂，用图解的...
注塑模设计毕业设计说明书.doc
07-17
说明书
成品库存管理系统-Excel模板
07-17
【作品名称】：成品库存管理系统-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
H公司项目管理法则.docx
07-17
H公司项目管理法则.docx
遗传算法及其MATLAB实现
07-17
遗传算法（Genetic Algorithm, GA）最先是由美国Mic- hgan大学的John Holland于1975年提出的。遗传算法是 模拟达尔文的遗传选择和自然淘汰的生物进化过程的计算 模型。它的思想源于生物遗传学和适者生存的自然规律， 是具有“生存+检测”的迭代过程的搜索算法。遗传算法 以一种群体中的所有个体为对象，并利用随机化技术指 导对一个被编码的参数空间进行高效搜索。其中，选择、 交叉和变异构成了遗传算法的遗传操作；参数编码、初始 群体的设定、适应度函数的设计、遗传操作设计、控制参 数设定等5个要素组成了遗传算法的核心内容。 下面是遗传算法的基本步骤以及基本程序流程简介附带有实现程序，可供参考与加深学习。
torchaudio-0.10.2+cpu-cp36-cp36m-linux_x86_64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
CSS 选择器支持列表
12-12
.css3selectors th, .explain {background-color:#FFFF66; padding:4px; } .css3selectors td {padding:4px;} .css3selectors td.compliant {background-color:#009900;} .css3selectors td.iffy {background-color:#FF9900;} .css3selectors td.noncompliant {background-color:#FF0000;} Update 6/30/09: Firefox 3.5 was

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值