选择器的类型和特殊性

虽然学了一个学期的web,但大部分东西都没塞进脑子里,最近看了一点选择器,总结一下它的种类和特殊性吧。

ID相当于是一个人的名字,是唯一的,一个页面中不能有相同的ID名。

类选择器用的很多,设置样式离不开它。【注】类名的第一个字符不能用数字

派生选择器是允许根据上下文档的上下文关系来确定某个标签的样式

eg.  li  strong{font-style:italic; font-weight:normal;}

<p><strong>hello!</strong></p>

<ol>

<li><strong>hello!</strong></li>

</ol>

第一个hello!表现为粗体,第二个hello!表现为斜体(类选择器和ID选择器都可以被用作派生选择器)

属性选择器有好几种类型

1.[title]{color:red;}

2.[title=hello!]{color:red;}

3.[title~=hello]{color:red;}

4.[lang|en]{color:red;}

5.[attribute^=value]

6.[atrribute$=value]

7.[attribute*=value]

后代选择器

eg.     h1>strong{color:red;}

<h1>this is<strong>important</strong></h1>

<h1>this
is<em>really<strong>important</strong></em></h1>

第一个important变成红色,第二个important不受影响(因为strong不是h1的子元素而是后代元素)

选择相邻兄弟元素(只对后一种元素有效)

eg.    ul+ol{color:red;}

<ul>

  <li>hello!</li>

</ul>

<ol>

  <li>hi!</li>

</ol>

<ol>

  <li>haha</li>

</ol>

结果为:只有hi!会变色,haha和hello!都不变色

伪类选择器最常见的就是用于锚元素(a)

eg.      a:link{color:red;}

       a:visited{color:red;}

a:focus{background:blue;}

a:hover{color:black;}

      a:visited{color:black;}

(顺序很重要)

伪元素选择器:

1.选择第一个子元素

eg.      p:first-child{font-weight:bold;}

2.设置首字母样式

eg.      p:first-letter{color:red;}

3.设置第一行的样式

eg.      p:first-line{color:purple;}

4.设置之前和之后元素的样式

eg.      h2:before{content:".";}

结果为:   .this is important!

eg.       h2:after{content:"}";}

结果为:   this is important}

通配选择器

eg.     *{margin:0;padding:0;}

设置文档中所有元素的内间距和外间距为0

选择器的特殊性

选择器的特殊性由选择器本身的组件确定。特殊值表述为4个部分,一个选择器的具体特殊性如下确定:

1.对于选择器中给定的各个ID属性值,为"0,1,0,0,"

2.对于选择器中给定的各个类属性值,属性选择器或伪类,为"0,0,1,0"

3.对于选择器中给定的各个元素和伪元素,为"0,0,0,1"

4.结合符(如">","+")没有特殊性

5.通配选择器为"0,0,0,0",即对其他选择器的特殊性不会造成任何影响

选择器的类型和特殊性

时间: 2024-10-13 01:04:35

选择器的类型和特殊性的相关文章

日期类型的特殊性 -- 日期函数转换

其他数据库日期类型必须得转换,但是MySQL不需要转,它会自动转换,只要书写格式是按照日期类型写的,不用日期函数转换. 如下两条SQL执行计划一样: 原文地址:https://www.cnblogs.com/liang545621/p/8277938.html

选择器的类型

1.标签选择器:给同一种标签添加样式:代码:标签名 {属性名:属性值:} 2.通用选择器(通配符):给所有的标签添加样式:代码:* {属性名:属性值:}注意:通用选择器是先遍历页面当中所有的标签,然后再给这些标签添加样式,所以这个选择器的性能非常低:一般只会在测试的时候使用,用于css的初始化,但是在项目当中不要使用: 3.类选择器:给同一类(同一个群体)标签添加样式:要先给同一类标签取一个名字:属性--class给标签命名类名:代码:.class名(类名){属性名:属性值:}注意:一个类名可以

css关联选择器大致类型总结

1.包含选择符(A F) 选择所有被A元素包含的F元素,中间用空格隔开 2.子选择符(A>F) 选择所有作为A元素的直接子元素F,对更深一层的元素不起作用,用大括号表示. 3.相邻选择符(A+F)选择紧贴在A元素之后的F元素,用加号表示.选择相邻的第一个兄弟元素. 4.兄弟选择符(A~F)选择A元素之后的所有兄弟元素F,作用于多个元素,用~隔开

选择器和特殊性

css选择器:类型选择器(元素选择器),后代选择器,ID和类选择器,伪类,通用选择器,子选择器,相邻同胞选择器,属性选择器. 1  其中类型选择器即元素选择器,如: p{ color:black; } h1{ font-weight:bold; } 2  后代选择器选择一个元素的所有后代,子选择器只选择元素的直接后代,例如: li{ list-style:none; } #nav>li{ padding-left:20px; background:url(folder.png) no-repea

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器 特殊性 (a,b,c,d) Style= ”” 1,

CSS选择器,层叠

CSS选择器 .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有 <div> 元素和所有 <p> 元素. 1 element?element div p 选择 <div> 元素内

CSS选择器的权重计算

什么是CSS选择器权重? 即使在不太复杂的样式表中,要寻找同一元素可能有两个或者更多规则,当同一元素被多个不同来源的样式规则设置了样式后,如何处理样式规则的冲突,显示元素最后的样式,用到的计算规则就是CSS选择器的权重规则. 根据选择器的特殊性决定规则的次序.具有更特殊选择器的规则优先于具有一般选择器的规则.如果两个规则的特殊性相同,那么后定义的规则优先. 特殊性 为了计算规则的特殊性,给每种选择器都分配一个数字值.然后,将规则的每个选择器的值加在一起,计算出规则的特殊性.特殊性的计算不是以10

CSS选择器总结

最近在www.w3school.com.cn学习了CSS选择器,下面做一个知识汇总.部分源码来自www.w3school.com.cn! 插入样式表的方法有三种: 第一种:外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 第二种:内部样式表 <head> <style type=&

匹夫细说C#:可以为null的值类型,详解可空值类型

首先祝大家中秋佳节快乐~ 0x00 前言 众所周知的一点是C#语言是一种强调类型的语言,而C#作为Unity3D中的游戏脚本主流语言,在我们的开发工作中能够驾驭好它的这个特点便十分重要.事实上,怎么强调C#的这个特点都不为过,因为它牵涉到编程的很多方面.一个很好的例子便是我们本文要介绍的内容——可空型,它是因何出现的,而它的出现又有什么意义呢?以及如何在Unity3D游戏的开发中使用它呢?那么就请各位读者朋友带着这些疑问,通过下面的文字来寻找这些问题的答案吧. 0x01 如果没有值? 一个了解一