CSS3选择器

最新推荐文章于 2020-09-08 11:12:36 发布
最新推荐文章于 2020-09-08 11:12:36 发布
阅读量332 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_ruiii/article/details/52014487
版权

一、属性选择器：

l  E[attr]只使用属性名，但没有确定任何属性值

l  E[attr="value"]指定属性名，并指定了该属性的属性值

l  E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

l  E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

l  E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

l  E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

l  E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

例：

<!DOCTYPEhtml>

<html>

    <head>

       <metacharset="utf-8"/>

       <title></title>

       <styletype="text/css">

           p{height:30px;line-height:30px;font-size:12px;border:1pxsolid#000;}

           pa{background: url(img/w.gif) no-repeat3px;padding-left:20px;display:block;}

           pa[href*=text]{background-image:url(img/text.gif);}

           pa[href*=pdf]{background-image: url(img/swf.gif);}

           pa[href*=ppt]{background-image: url(img/ppt.gif);}

          

       </style>

    </head>

    <body>

       <p>

           <ahref="http://www.miaov.com/doc/javascript.html">妙味课堂</a>

       </p>

       <p>

           <ahref="http://www.miaov.com/text/javascript.html">妙味课堂</a>

       </p>

       <p>

           <ahref="http://www.miaov.com/pdf/javascript.html">妙味课堂</a>

       </p>

       <p>

           <ahref="http://www.miaov.com/ppt/javascript.html">妙味课堂</a>

       </p>

    </body>

</ html >

二、结构性伪类

a)        E:nth-child(n)  表示E父元素中的第n个字节点 n从一开始计数（找E标签父级下的第n个子元素，并且这个元素还得是E标签）

                                                    i.             p:nth-child(odd){background:red}/*匹配奇数行*/

                                                  ii.             p:nth-child(even){background:red}/*匹配偶数行*/

                                                 iii.             p:nth-child(2n){background:red}

b)        E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

c)        E:nth-of-type(n)  表示E父元素中的第n个字节点，且类型为E（找E标签腹肌下的第n个E标签）

d)        E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

e)        E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

f)         E:first-child 表示E元素中的第一个子节点

g)        E:last-child 表示E元素中的最后一个子节点

h)        E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

i)          E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

j)          E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

k)        E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

例：

<!DOCTYPEhtml>

<html>

    <head>

       <metacharset="UTF-8">

       <title></title>

       <styletype="text/css">

       .list{margin:0;padding:0;list-style:none;}

       .listli{width:150px;border-right:1pxsolid#000;float:left;}

       .listli:last-of-type{border:none;}

       .lista{float:left;width:40px;margin:05px;font:12px/30px"宋体";

       text-align:center;}

       .listlia:nth-of-type(3n+1){font-weight:bold;}

       .listli:nth-child(3)a:nth-child(2){color: red;}

"

       </style>

    </head>

    <body>

       <ulclass="list">

           <li>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

           </li>

          

           <li>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

           </li>

          

           <li>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

           </li>

          

           <li>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

           </li>

          

           <li>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

           </li>

          

           <li>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

           </li>

          

           <li>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

              <ahref="#">妙味</a>

           </li>

          

       </ul>

    </body>

</html>


三、伪类

a)        E:target 表示当前的URL片段的元素类型，这个元素必须是E

b)        E:disabled 表示不可点击的表单控件

c)        E:enabled 表示可点击的表单控件

d)        E:checked 表示已选中的checkbox或radio

e)        E:first-line 表示E元素中的第一行



S_RuIii
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3选择器基本介绍
09-25
主要介绍了css3选择器基本介绍,需要的朋友可以参考下
csss3动画
weixin_52474888的博客
03-17 388
csss3里面可以做一些小动画 Keyframes “关键帧” 首先设置动画的名字，开始和结束，可以是位置，角度，大小等 @keyframes 动画的名称{ from{} to{} } 一、animation-name: 动画名称 我们用这个属性引入你上面的动画，可以同时引入几个动画给一个元素，但是中间需要用逗号隔开。 二、animation-duration 动画持续时间 取值：<time> 为数值，单位为s（秒） 三、animation...
CSS3中常用的几种选择器
Web_chicken的博客
09-08 8810
css中几种常用的选择器 1.通配符 *{ margin:0; padding:0; } 因为浏览器默认有margin和padding 而通配符主要作用就是去掉margin和padding 一般写在css最前 2.id选择器 #first{ color:red; } <div id="first">我是id选择器</div> id选择器 调用css样式时需要用# 不推荐使用i
CSS3 选择器 基本选择器介绍
liwei3gjob的专栏
10-14 1015
CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一
【web前端】省市县选择器
xld的博客
09-29 4576
** 效果图如下：** 1.html 布局 &amp;amp;amp;lt;style type=&amp;amp;quot;text/css&amp;amp;quot;&amp;amp;amp;gt; .city_modal_bg{ border: solid 1px gainsboro; width: 520px; height: auto; z-index: 999; background: white; padding: 8px;
CSS3选择器（全部）
GreenBark
10-16 8711
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。 1，基本选择器 （1）标签选择器(类型选择器)             统一定义常用标签的基本样式。 ​ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...
CSS3 选择器 属性选择器介绍
12-13
从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只使用属性名，但没有确定任何属性值； E[attr="value"]：指定属性名，并指定了该属性的属性值； E[attr~="value"]...
让IE可以变相支持CSS3选择器
09-25
别误会，IE是不支持CSS3高级选择器，包括最新的IE8（详见《CSS选择器的浏览器支持》），但是CSS选择器的确是很有用的，它可以大大的简化我们的工作，提高我们的代码效率，并让我们很方便的制作高可维护性的页面。
对CSS3选择器的研究(详解)
09-27
下面小编就为大家带来一篇对CSS3选择器的研究(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
总结30个CSS3选择器
11-21
可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。 1 *：通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的...
CSS3 选择器 伪类选择器介绍
09-25
前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类...
CSS3选择器.rar
05-02
该资源是我本人自学css时，系统地整理的一些关于css选择器的资料汇总拿出来与大家共享，如果需要转载请注明出处，如果表达有误，欢迎指出谢谢！
随手记—CSS3选择器
01-08
属性选择器： 选择符 说明 E [ att ] 选择具有att属性的E元素 E [ att=“val” ] 选择具有att属性，且属性值为val的E元素 E [ att^=“val” ] 匹配具有alt属性，且值以val开头的E元素 E [ att$=“val”...
Web前端学习笔记——CSS3 新增选择器
唯恋殊雨的博客
09-21 472
CSS3 新增选择器 结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一...
什么是css选择器？css3中5种常见的基本选择器（代码实例）
lin123_00的博客
06-30 5668
本章我们给大家讲解一下什么是css选择器？css3中5种常见的基本选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 一：什么是css选择器？ CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。 二：css3中5.
html选择器
a901122的博客
03-30 2861
CSS的作用：     就是用来改变文本的样式CSS三大特性     继承性：给父类元素设置一些属性以后，子类也可以使用，叫继承性    如果对父类标签设置样式以后，如果子类标签没有单独设置样式默认继承父类的样式  注意：   1、并不是所有的都可以继承，只有以color  font-  text  line开头的才可以继承    2、继承不仅仅是直接子代可以继承，后代同样可以继承   3、超链接...
css3选择器-属性选择器
最新发布
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值