【web(八)CSS选择器】教程文章相关的互联网学习教程文章

CSS的三种使用方式以及常用的选择器

一、CSS的三种使用方式:1. 内联样式 * 在标签内使用style属性指定css代码 * 如:<div style="color:red;">hello css</div>2. 内部样式 * 在head标签内,定义style标签,style标签的标签体内容就是css代码 * 如: <style> div{ color:blue; } </style> <div...

CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b...

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)【代码】

《CSS3基本选择器》一、通配符选择器(*)*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器(.className)四、id选择器(#ID)#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器(EF).demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...

CSS选择器【图】

CSS选择器有多个选择器 所在的位置是内嵌和外部常用的选择器有 id选择器 { 是给元素一个身份证号,给id定义的id名不能重复 优先级第一 用#来查找liru:body里面 <div id="id1" ></div> 那么我们查找的id名是id1 那么给找到的id是id1 所在的位置是内嵌和外部 #id1 { background-color:red; width:100px; height:100px;} ...

css学习_写法规范、选择器【图】

1、css(层叠样式表)样式主要目的(让页面更好看些)css尽量不要写内联样式,保证结构和样式分离原则;html专门负责结构,css专门负责样式。2、css写法规范选择器 { 属性 :值 ; }内联样式 写在标签里 style=“”属性:值“”内部样式 写在head标签里的style标签里 外部样式 通过链接导入样式表 link3、font-size(字号大小)4、浏览器默认字体font-family 微软雅黑 ,字体大小一般默认为16px 一般不想写中文是可以用un...

CSS选择器命名及常用命名

CSS选择器命名及常用命名CSS选择器命名及常用命名规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名(语义化命名)! 说个题外话,规范化命名的代码,会显着你更加专业! 关于CSS命名法,和...

css选择器jquery选择器异同

css选择器用$("")包起来就成了jQuery选择器 CSS选择器jQuery选择器ID选择器#myID$(‘#myID‘)类选择器.myclass$(‘.myclass‘)标签选择器p$(‘p‘)层次选择器div > strong$(‘div>strong‘)css称为伪类选择器jQuery称之为过滤选择器p:nth-child(1)$(‘p:nth-child(1)‘) CSS选择器的效率(从上至下):id选择器(#myid)类选择器(.myclassname)标签选择器(div,h1,p)相邻选择器(h1+p)子选择器(ul > li)后代选择器(li...

JQuery CSS 选择器

jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用$("")包起来就成了一个jQuery选择器。1、区别那么两者的区别如下两者的作用不同,CSS选择器找到元素后为设置该元素的样式,jQuery选择器找到元素后添加行为jQuery选择器拥有更好的跨浏览器的兼容性选择器的效率CSS选择器的效率 id选择器(#myid)类选择器(.myclassname)标签选择器(...

css知多少(6)——选择器的优先级【图】

1. 引言  上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。  上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令?  上面还是比较简单的,下面在来一个复杂的:  上图中的<li>该显示成什么颜色呢?2. 特指度  要解决以上问题,我们需要引入一个概念——特指度(specificity)。特指度表示一个css选择器...

css-交集选择器、后代选择器【图】

交集选择器交集选择器又两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,语法如;h3.class{color:redd font-size:25px;} 并集选择器如果选择器定义的样式完全相同,或部分相同,就可以利用丙级选择器为它们定义相同的css样式。 后代选择器后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就把是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌...

css3选择器:nth-child和nth-of-type之间的差别【图】

<section> <p>我是第1个p标签</p> <p>我是第2个p标签</p></section>然后对应2个选择器对应的CSS代码如下:p:nth_child(2) { color:red;} // p:nth-of-type(2) { color:red;}两种对应的效果都是这样的:对于:nth-child选择器有两点需要说明:1,这个是个段落元素2,这个是父级元素的第二个孩子 而对于:nth-of-type选择器,意味着选择一个元素如果:1,选择父级元素的第二个 段落 子 元素 如果把上面的代码稍...

css伪类选择器详细解析及案例使用-----伪元素【代码】

伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter、::first-line、::before、::after、::selection。目的是为了区分伪元素与伪类。对于IE6~IE8,仅支持单冒号写法)1.::first-letter :用来选择文本块的第一个首字母。2.::first-line :用来匹配元素的第一行文本。3.::befor 和 ::after :创建一个作为当前元素子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。:before...

CSS选择器

CSS1&2选择器:包含选择符(E F):选择E元素中所有的F元素;子选择符(E>F):选择E元素的子元素F;相邻选择符(E+F):选择紧贴在E元素之后F元素。E[att]:选择具有att属性的E元素。E[att="val"]:选择具有att属性且属性值等于val的E元素。E[att~="val"]:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。E:fir...

【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器【图】

【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器广东职业技术学院 欧浩源 2017-10-211、引言 目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup使用的技术书籍和博客软文并不多,而在这仅有的资料中介绍CSS选择器的少之又少。在网络爬虫的页面解析中,CCS选择器实际上是一把效率甚高的利器。虽然资料不多,但官方文档却十分详细,然而美中不足的是需要一定的基础才能看懂,而且没有小而精的演示实例。不过,在本...

关于css选择器的一些事 第一章 基本选择器!【代码】【图】

关于选择器,好多人小伙伴只用了最基本的几个选择器,感觉这玩意没有啥学的,讲道理,确实也没啥学的。但是,选择器种类掌握的越多,编写代码起来就会越轻松,为啥呢。举个例子吧!先上一串代码和效果,就知道我想表达什么了!上面一个五列的li,代码如下<style>*{margin:0;padding: 0;list-style: none}ul{display: flex}li{flex: 1;text-align: center;border-left: 1px solid red}li:nth-child(1){border-left:none}</style><ul>...