css选择器四大类:基本、组合、属性、伪类

来源:脚本之家  责任编辑:小易  

一、X:nth-child(n) li:nth-child(3) {color: red;}接下来的几个伪类选择器使用上非常类似,功能也比较接近。:nth-child(n),用于匹配索引值为n的子元素。索引值从1开始。X:nth-child()用法实际上有三种变化,demo的用法是最简单的,X:nth-child

什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器、属性选择器、组合选择器与伪类选择器四个大类!

CSS伪类是用来添加一些选择器的特殊效果。谁的伪类只能给谁添加效果,并不能控制元素吧。

css基本选择器

"反选伪类选择器:not 示例: :not(.class3) 选择所有不包含class3的元素 我也正在学html5的知识,推荐你个新视频,视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的,你值得拥有哈"

基本选择器又分为:*通配符、标签选择器、class选择器、id选择器,在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同,就像每一个人只有一个身份证一样,ID就代表身份证3.class选择器不具有唯一性,它可以重复使用!此外这个*通配符代表的是全局

选中状态,并且包括空格也匹配 CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;},简单地用一个半角英文冒号(:)来隔开选择符和伪类。 CSS很多的建议并没有得

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css基本选择器</title> <style type="text/css"> *{ color: skyblue; }/**通配符*/ div{ color: red; }/*标签选择器*/ .box{ color: steelblue; }/*class选择器*/.box{color: steelblue;}也可以写成*.box{color: steelblue;}代表的所有的box字体颜色为 steelblue #content{ color: tomato; }/*id选择器*/ </style> </head> <body> <div class="box" id="content"> 大灰牛博客专注web前端技术学习 </div> </body> </html>

CSS伪类用于向特殊状态的选择器添加特殊效果,使用最多的伪类是锚伪类。 a:link未访问的链接 a:visited已访问的链接 a:hover鼠标移动到链接上,此伪类不止限于超链接上,其他元素也可使用 a:active选定的链接 注意:在 CSS 定义中,a:hover 必须

css组合选择器

显然,分级这个概念还是深入人心。积家和欧米茄到底是不是同一级别呢?从价位上讲,两个品牌起步售价都超过一万块,数万到几十万这个区间上有重叠,他们跟售价几千块的天梭相比,应该算是同一个组别。但是这么定级别是不是合理呢?答案可能是仁者见仁。从产品分类看,积家和欧米茄并不完全竞争,积家有万年历、三问、陀飞轮、追针计时等复杂工艺表款,这些欧米茄则没有;另外,相同功能相同材质表款直接对比,价格又不是一个档次,积家要高很多。这么比,二者又不是同一个级别了。所以呢,级别这个话题还是不要拿出来谈,禁不住仔细推敲。我们建议你按实际需求去比较品牌,或者比较明确表款才相对有意义。按相似价位、同功能、同材质、同工艺去挑

把基本选择器通过特殊符号串在一起有意见称之为css组合选择器,常见的css组合选择器有:分组选择器、嵌套选择器、子选择器、相邻同级别选择器

在人民币收藏中,豹子号一直是广为藏友关注的一种类型,而其叫法可以说是由一种游戏起因的,在西南地区及叫做“诈金花”,北方地区叫做“拖拉机”的扑克牌游戏,是指发到一位玩家手里的3张牌为同一数字号的牌型,概率很小,但由于大于同花顺等其他牌型,所以“豹子号人民币”是每位玩家梦寐以求的牌型,显得珍贵。因而3个连起来的一样的数字.比如:666、999、888这些就是豹子6、豹子9、豹子8豹子号。而最厉害的是8同号的极品豹子号,每一张纸钞都有它自身的特殊性,那就是号码唯一,没有任何两张纸币具有相同的号码(无号码分币除外),所谓特殊号码实际是人们凭自己的喜爱和公众认可度较高的一些字冠和数字组合。比如豹子号,生

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css组合选择器</title> <style type="text/css"> /* div{ color: teal; font-size: 24px; } p{ color: teal; } */ div{ font-size: 24px; } div,p{ color: teal; }/*分组选择器*/ div p{ color: red; }/*嵌套选择器*/ ul>li{ font-size: 24px; list-style: square; }/*子选择器*/ div+p{ color: blue; }/*相邻同级别选择器*/ </style> </head> <body> <div> 成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨 <p>自以为懂得很多了经历很多了最后才知道都是那么的可笑</p> </div> <p>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</p> <p>成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨<span>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</span></p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>

楼主这个问题,其实很多无线路由器都可以链接光纤,但随着国家提费降速的理念,很多地区都开通了百兆光纤。那么对于100M的光线,哪个些路由器表现相对更好一点呢?这里给大家推荐一款经济实惠的无线路由器吧,TL-WR842N,小编家里用的就是这款。目前京东售价大概在85元左右。100M联通光纤,台式电脑测速,下载速度可以达到11m/s,还是蛮快的。本人家里上网设备大概在15台左右,都独立开启了MAC地址绑定。下图是该路由器的管理后台:在隔了2个卧室的房间里,台式机利用无线网卡链接下载速度可以稳定在5m/s,手机,平板电脑,投影等家用智能设备,表示联网无卡顿。在线投影看1080P的视频,表示无压力!对于

css属性选择器

题主您好,通过我收集的资料,我来简单回答一下这个问题。根据现在的科学研究表明,猫的智商相当于2~3岁的人类智商,虽然它在训练方面会比较棘手,但它确实拥有长期记忆。猫的大脑猫的大脑,虽然比人类的小,但麻雀虽小五脏俱全。和正常的人脑一样具有额叶,颞叶,枕叶和顶叶。它的大脑也由白质和灰质组成。相同的五种感觉将信息发送给他的大脑。猫如何记住事物的最接受的理论被称为神经组合理论。猫在它脑中的神经元之间有联系。每个神经元存储一部分记忆,当神经元的正确组合被激活时,猫会回想起一个记忆。猫的记忆曾经在一项关于寻找食物的测试中,猫的短期记忆持续了16个小时,而狗只有5分钟。猫的长期记忆力更强。虽然一只猫可能只会

基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性~=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css属性选择器</title> <style type="text/css"> div[title]/*基本选择器[属性]*/ div[title=english]{ color: blue; }/*基本选择器[属性=值]*/ div[title~=en]{ color:#f90; font-weight: bold; }/*基本选择器[属性~=值] 任意包含有属性中的一个*/ p,div[title^=zh]{ font-size:24px; color: brown; }/*基本选择器[属性^=值]以什么开始*/ div[title$=china]{ letter-spacing: 10px; text-decoration: line-through; font-style: italic; }/*基本选择器[属性$=值]以什么结束*/ </style> </head> <body> <div title="english"> If you can NOT explain it simply, you do NOT understand it well enough </div> <div title="english en yingyu"> 你们没发现嘛?2013爱你一生,2014爱你一世,2015爱你一屋,2016爱你一路,2017爱你一切,2018爱你一半,2019爱你依旧,2020爱你爱你,2021爱你而已🌝 </div> <p title="zh en"> css选择器四大类:基本、组合、属性、伪类 </p> <div title="zh en china"> http://www.cnblogs.com/dhnblog/p/12293463.html </div> </body> </html>

css伪类选择器

从字面意思来讲,伪就是假的,元素是标签与标签包裹的内容,简单来说伪元素就是假的元素,假的反义词是真的,在页面中这些又是我们自己写的,所以它是真的。在这个html页面中,所有元素都会被偷偷加上开始与结束标签,这个就是伪元素,伪类选择器指的是一种操作状态!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css伪类选择器</title> <style type="text/css"> p{ color: brown; border: 1px solid black; height: 40px; line-height: 40px; } p::before{ content: "before开始"; } p::after{ content: "after结束"; } /* 针对块元素 第一个字母::first-letter 第一行文字::first-line */ div::first-letter{ font-size: 24px; color: blue; } div::first-line{ color: yellowgreen; font-style: initial; font-weight:bolder; } </style> </head> <body> <div class="box">http://www.dhnblog.com/ 大灰牛博客技术为王世界,拼搏成就梦想,高度取决态度 <!--before 开始--> <p>情人节祝福语送女朋友,很甜很撩,瞬间收服她的心!</p> <!--after 结束--> </div> </body> </html>

总结

以上所述是小编给大家介绍的css选择器四大类:基本、组合、属性、伪类,希望对大家有所帮助,也非常感谢大家对脚本之家网站的支持!

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

CSS的基本选择器有哪几种?分别适合在什么情况下使用?

1、同意楼上:

ID选择器:#header {}

类选择器:.header {}

元素选择器:div {}

子选择器:ul > li {}

后代选择器:div p {}

伪类选择器:a:hover {}

属性选择器:input[type="text"] {}

id优先级高于类class;

后面的样式覆盖前面的;

指定的高于继承;

2、除了参考W3school的资料,我这还有CSS的帮助文档,如果需要,留下邮箱,发给你。

参考资料:http://www.w3school.com.cn/css/index.asp

css样式有哪几种选择器

CSS选择器、优先级与匹配原理

1.id 选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul < li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)

其中ID选择器的效率是最高,而伪类选择器的效率则是最低

CSS的权重

1.通配选择符的权值 0,0,0,0

2.标签的权值为 0,0,0,1

3.类的权值为 0,0,1,0

4.属性选择的权值为 0,0,1,0

5.伪类选择的权值为 0,0,1,0

6.伪对象选择的权值为 0,0,0,1

7.ID的权值为 0,1,0,0

8.important的权值为最高 1,0,0,0

使用规则: 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。

从上面我们可以得出两个关键的因素:

1.权值的大小跟选择器的类型和数量有关

2.样式的优先级跟样式的定义顺序有关

html 5 的CSS3新增的伪类选择器还包括哪些?

:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。

:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。

:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

:root :root 选择文档的根元素。

:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。

:target #news:target 选择当前活动的 #news 元素。

:enabled input:enabled 选择每个启用的 <input> 元素。

:disabled input:disabled 选择每个禁用的 <input> 元素

:checked input:checked 选择每个被选中的 <input> 元素。

:not(selector) :not(p) 选择非 <p> 元素的每个元素。

::selection ::selection 选择被用户选取的元素部分。

标记选择器、类选择器、id选择器、伪类选择器的先后顺序是什么?

1、id选择器; 

2、类选择器;

3、标记选择器;

4、最后是伪选择器。

  1. id选择器(#myid);

  2. 类选择器(.myclassname);

  3. 标签选择器(div,h1,p);

  4. 相邻选择器(h1+p);

  5. 子选择器(ul < li);

  6. 后代选择器(li a);

  7. 通配符选择器(*);

  8. 属性选择器(a[rel="external"]);

  9. 伪类选择器(a:hover,li:nth-child)。

参考资料

百度百科.百度[引用时间2018-3-31]

如何理解这种CSS伪类选择器?

首先,*:first-child这个伪类的作用是匹配*这个标签的第一个元素。但是事实上,有的浏览器并没有这样的解释这个伪类。所以为了准确不出错,我们需要另外一个选择器*>*:first-child。比如,p>i:first-child这个选择器

<p>

<i>可以匹配选择器样式</i>

<i>正常显示</i>

</p>

<p>

<i>正常显示</i>

</p>

  • 本文相关:
  • 盘点css selectors level4中新增的选择器
  • css选择器设置标签样式的实例代码
  • 使用css属性选择器来拼接html的dna的方法
  • css中的属性选择符和结构化伪类
  • css first-chjld伪类属性匹配一个序列的第一个元素
  • css对边框的属性控制和链接的伪类选择器-css教程-网页制作-网页教学网
  • CSS的基本选择器有哪几种?分别适合在什么情况下使用?
  • css样式有哪几种选择器
  • html 5 的CSS3新增的伪类选择器还包括哪些?
  • 标记选择器、类选择器、id选择器、伪类选择器的先...
  • 如何理解这种CSS伪类选择器?
  • css3伪类选择器的几种写法介绍
  • CSS伪类选择器,如何选择并控制相邻的上一个标签
  • 跪求html 5 的CSS3选择器中的 反选伪类选择器:not...
  • css类中,伪类后面跟了一个 ~ 是什么意思
  • CSS伪类定义3种方法
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved