精华内容
下载资源
问答
  • CSS选择器分类

    2017-12-01 20:53:02
    选择器的分类 CSS的选择器有多种形式,根据所获取元素的不同,选择器分为五大类:基本选择器、关系选择器、属性选择器、伪元素选择器、伪...图2-2 CSS选择器分类 本章所列的选择器,已经注明定义该选择器的CSS版本。

    CSS的选择器有多种形式,根据所获取元素的不同,选择器分为五大类:基本选择器、关系选择器、属性选择器、伪元素选择器、伪类选择器。

    伪类选择器,按其功能又可细分为:链接伪类选择器、结构伪类选择器、否定伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器。如图 2‑2 所示:

    CSS选择器分类图2-2 CSS选择器分类

    本章所列的选择器,已经注明定义该选择器的CSS版本。由于CSS本身具有向后兼容性,如果浏览器不理解某个选择器,它会忽略整个规则。因此,在现代浏览器中应用样式时,不必担心在老式浏览器中会产生影响。

    但是,需要注意的是,IE6及更低版本不支持CSS2及以上版本定义的选择器,对于站点的重要功能或布局相关的元素,要尽量避免使用这些选择器。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • Css选择器分类

    千次阅读 2018-06-04 11:16:39
    这次实验主要熟悉css中的后代选择器:nth-child,nth-of-type , >, (空格), + 之类的用法:复合选择器:后代选择器: p span {font-size: 14px;} 选择p元素的所有子孙元素中的span元素子女选择器: p&...

    这次实验主要熟悉css中的后代选择器:nth-child,nth-of-type ,  >, (空格), + 之类的用法:

    复合选择器:

    后代选择器: p span {font-size14px;} 选择p元素的所有子孙元素中的span元素
    子女选择器: 
    p>span {font-size14px;} 选择p元素的所有子女元素中的span元素
    组合选择器: 
    p#start {font-size14px;} 选择idstartp元素(交集)
    群组选择器: em, .even {font-size14px;} 选择em元素或者类名为even的元素
    相邻兄弟选择器: 
    h1 + p {color:red;} 选择h1之后的相邻兄弟元素(必须为p元素
    后续兄弟选择器: h1 ~ p {color:red;} 选择在 h1之后所有兄弟元素中的p元素

    否定选择器: p:not(#start)color:red;} 选择所有id不是startp元素 

    nth-child选择器(结构伪类)
    p:first-child {color:red;} p的双亲的第一个子女
    p:last-child {color:red;} p的双亲的最后一个子女
    p:only-child {color:red;} p的双亲的唯一一个子女
    p:nth-child(5) {color:red;} p的双亲的第5个子女
    p:nth-child(even) color:red;} p的双亲的第偶数个子女 (奇数:odd)
    p:nth-child(3n+1) {color:red;} p的双亲的选择第1、 4、 7、 ...个子女
    p:nth-last-child(5) {color:red;} p的双亲的倒数第5个子女 


    nth-of-type选择器(结构伪类
    p:first-of-type {color:red;} p的双亲的第一个子女(只计算p元素)
    p:last-of-type {color:red;} p的双亲的最后一个子女
    p:only-of-type {color:red;} p的双亲的唯一一个子女
    p:nth-of-type(5) {color:red;} p的双亲的第5个子女
    p:nth-of-type(odd) {color:red;} p的双亲的第奇数个子女 (even,odd)
    p:nth-of-type(3n) {color:red;} p的双亲的选择第3、 6、 ...个子女
    p:nth-last-of-type(5) {color:red;} p的双亲的倒数第5个子女 


    nth-child的其它用法: 
    :nth-child(n+6) 选中从第6个开始的子元素
    :nth-child(-n+9) 选中从第1个到第9个子元素
    :nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素
    :nth-child(n+2):nth-child(-n+9):nth-child(odd) 选中的子元素是从第2位到第9位,并
    且只包含奇数位。

    实验CSS代码如下:


    [html] view plain copy
    1. <style type="text/css">  
    2.         a:link{text-decoration:none;color:black;} <!--伪类-->  
    3.         li:nth-child(even) a:link{text-decoration:none;color:green;} <!-- li双亲的第偶数个子女元素  未被访问的链接 -->  
    4.         a:visited{text-decoration:none;color:black;} <!-- 访问过的链接 -->  
    5.         li:nth-child(even) a:visited{text-decoration:none;color:green;} <!-- li双亲的第偶数个子女元素中 被访问过的链接  -->  
    6.         a:hover{text-decoration:underline;color:blue;}   
    7.         li:nth-child(even) a:hover{text-decoration:underline;color:blue;}   
    8.         a:active{text-decoration:underline;color:red;}   
    9.         li:nth-child(even) a:active{text-decoration:none;color:green;}  
    10. <style>     
    11.   
    12. <style type="text/css">         
    13.         input:focus,textarea:focus{background-color:yellow;} <!--选择获得焦点的 input 或者 textarea元素 -->  
    14.         button:disabled,input:disabled{color:#CCC;} <!--禁用的button或者input元素 -->  
    15.         input:checked+span{color:red;} <!-- 被选中的input元素的相邻兄弟span-->  
    16.         textarea::selection{color:white;background-color:blue;}<!-- 选中的文本-->  
    17. <style>     
    18.       
    19. <style type="text/css">  
    20.         a{color:blue;text-decoration:underline;} <!-- -->  
    21.         li:nth-child(even) a{color:green;}<!-- li的双亲的第偶数个子女中的后代a元素-->  
    22.         li:nth-child(n+3):nth-child(-n+9):nth-child(odd) a{color:red;}<!--选中的子元素是从第3位到第9位,并且只包含奇数位 -->  
    23. <style>  
    24.   
    25. <style type="text/css">         
    26.         a:link,a:visited{color:blue;text-decoration:none;}  
    27.         a:active{color:#532301;text-decoration:none;}  
    28.         p{text-align:left;text-indent:2em;}  
    29.         p:first-letter{font-size:1.5em} <!--选择每个 <p> 元素的首字母-->  
    30.         p:first-line{font-style:italic;} <!--选择每个 <p> 元素的首行 -->  
    31.         p:hover{color:green;}   
    32.         p:nth-of-type(even){font-weight:bold;} <!--p的双亲的第偶数个子女 -->  
    33.         .ref{vertical-align:super;font-size:10px;} <!-- 选择ref类 -->  
    34.         <!-- 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。super垂直对齐文本的上标-->  
    35. <style>  
    36.   
    37. <style type="text/css">     
    38.     p:nth-child(n+3){text-indent:2em;} <!-- 从第3个开始的子女元素-->  
    39.     p:first-letter{color:blue;font-size:1.5em;}  <!-- p元素的第一个字母 -->  
    40.     span{display:none;} <!--display属性用于定义建立布局时元素生成的显示框类型 ,none此元素不会被显示。-->  
    41.     span:first-child{display:inline;} <!-- span的双亲的第一个子女,显示为内联元素,元素前后没有换行符-->  
    42.     p:hover span{display:inline;} <!--鼠标置于上方的p元素中的子孙span元素 -->  
    43.     p:nth-child(n+3){text-align:left;} <!-- p的第3个开始的子元素-->  
    44. <style>  
    45.   
    46. <style type="text/css">     
    47.   tr:first-child > td{background-color:#DDD}<!-- tr双亲的第一个子女元素 的 子孙td元素-->  
    48.   td:nth-child(even){background-color:rgb(200,200,255);}<!-- td的双亲的第偶数个子女元素-->  
    49.   tr:nth-of-type(2) td:nth-child(-n+3){color:grey;}<!--tr双亲的第2个子女 的 子孙td元素 中的 第1个到第3个子元素 -->  
    50.   tr:nth-of-type(2) td:nth-child(n+4):nth-child(-n+7):after,tr:nth-of-type(3) td:nth-child(-n+4):after{content:"*";}   
    51.   <!-- tr双亲的第2个子女的 子孙中  的td元素第4个到第7个的子元素的内容之后插入“*”-->  
    52.   <!-- tr双亲的第3个子女的 子孙中  的td元素第4个到第7个的子元素的内容之后插入“*”-->  
    53. <style>  
    54.   
    55. <style type="text/css">     
    56.     tr:nth-of-type(odd)>td:nth-of-type(odd),tr:nth-of-type(even)>td:nth-of-type(even){background-color:rgb(200,200,200);}  
    57.     <!--tr的双亲的第奇数个子女 的后代 td元素中为基数的, 同。。 -->  
    58.   tr:nth-of-type(odd) >td:nth-of-type(even),tr:nth-of-type(even) >td:nth-of-type(odd){background-color:rgb(100,100,100);}  
    59.   tr:nth-of-type(odd)>td:nth-of-type(odd):hover,tr:nth-of-type(even)>td:nth-of-type(even):hover{background-color:rgb(200,200,240);}  
    60.   <!-- tr的双亲的第奇数个子女 的后代 td元素中为基数的 并且鼠标放置其中的-->  
    61.   tr:nth-of-type(odd) >td:nth-of-type(even):hover,tr:nth-of-type(even) >td:nth-of-type(odd):hover{background-color:rgb(100,100,160);}  
    62.   tr:nth-child(n+7) td>img:hover{border:dashed 1px yellow;margin:auto}<!-- tr的第7个以后的子女元素中的td元素 的img子女元素 hover时 -->  
    63.   tr:nth-child(-n+2) td>img:hover{border:dashed 1px red;margin:auto}  
    64. <style>  
    展开全文
  • 1. CSS选择器分类 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

    1. CSS选择器分类

    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

    三大基本选择器:

    1. 标签名选择器 p{}
    2. 类选择器  .className{}
    3. ID选择器 #id{}

    扩展选择器(基于前三者)

    1. 后代选择器 .navs li{}
    2. 群组选择器 a,img,span{}

    2.优先级
    优先级计算公式:
    选择器越特殊,其指向的元素也就越精准,也就是它的优先级别越高。之前查阅过相关文档,大致都是规定:标签选择器给定1表示其优先级量,类选择器给定10,ID选择器给定100。
    <span style="font-size:14px;"><div class="parent">
    	<div class="children">
    		<div class="title">
    			优先级
    		</div>
    		<div class="body">
    
    		</div>
    	</div>
    </div></span>

    css样式:
    <span style="font-size:14px;">.parent .title {
    	color:#CCC;
    	font-size:16px;
    	font-weight:700;
    }
    .title {
    	color:#333;
    }</span>

    由上述公式计算优先级:
    .parent .title 为:10+10 =20;
    .title 为: 10;
    查看 开发者工具,可看其计算样式如下图所示:



    .title 类所做的修改无效,因为其优先级没前一个高,得到验证。

    3.CSS优化原则
    1. 避免使用通配规则      如    *{} ,页面复杂的话,计算次数会很多,只对需要用到的元素进行选择
    2. 尽量少的直接去对标签进行选择,而是用class     如:#navs li{}, 更优的方式是给li加上nav_item的类名,及.nav_item{}
    3. 不要去用标签限定ID或者类选择符   如:div#main-container,应该简化为#main-container
    4. 尽量少的去使用后代选择器,降低选择器的权重值  后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
    5. 要知道继承这个东西, 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复编写规则

    展开全文
  • 首先声明一下CSS三大特性—— 继承、 优先级和层叠。继承即子类元素继承父类的样式;... 首先来看一下css选择符(css选择器)有哪些?  1.标签选择器(如:body,div,p,ul,li)  2.类选择器(如:class="head",class
    首先声明一下CSS三大特性—— 继承、 优先级和层叠。继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式。

      css选择符分类

      首先来看一下css选择符(css选择器)有哪些?

      1.标签选择器(如:body,div,p,ul,li)

      2.类选择器(如:class="head",class="head_logo")

      3.ID选择器(如:id="name",id="name_txt")

      4.全局选择器(如:*号)

      5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

      6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

      7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

      8.继承选择器(如:div p,注意两选择器用空格键分开)

      9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

      10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

      11.子选择器 (如:div>p ,带大于号>)

      12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

      css优先级

      CSS优先级:是由四个级别和各级别的出现次数决定的。

      四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。

      优先级的算法:

      每个规则对应一个初始"四位数":0、0、0、0

      若是 行内选择符,则加1、0、0、0

      若是 ID选择符,则加0、1、0、0

      若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0

      若是 元素选择符/伪元素选择符,则分别加0、0、0、1

      算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。

      需注意的:

      ①、!important的优先级是最高的,但出现冲突时则需比较”四位数“;

      ②、优先级相同时,则采用就近原则,选择最后出现的样式;

      ③、继承得来的属性,其优先级最低;

      !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

      *css选择器使用强烈建议采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。
    展开全文
  • CSS选择器分类

    2017-03-22 10:10:15
    最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一下css选择器; css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css...
  • CSS选择器超详解

    2020-12-29 00:07:57
    CSS选择器作用CSS选择器根据不同的需求把不同的标签选出来,方便为选出来的标做样式处理,这就是CSS选择器作用CSS选择器分类: 基础选择器:是由单个选择器组成的,例如标签选择器,类选择器等等。 ...
  • CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器。 CSS选择器优先级如下...
  • 一、CSS选择器1、什么是选择器每一条CSS样式声明由两部分组成,选择器{样式}在{}之前的就是选择器,选择器指明了{}中样式的作用对象,也就是样式作用于网页中哪些元素2.选择器的分类(1)、标签选择器 标签选择器...
  • CSS选择器

    千次阅读 热门讨论 2014-07-21 20:21:21
    引言 我们知道,我们每...这就是所谓的“CSS身份证” 选择器分类 世界上不同国家的人就会有不同的居民身份证,因此选择器也有自己的分类。 标记选择器、类别选择器、ID选择器 标记选择器:为标记添加样式。-----------
  • CSS选择器总结

    2017-06-03 09:57:23
    实现CSS对HTML页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控制的。
  • 1.CSS规定拥有更高确定度的选择器优先级更高 2.如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后出现的规则优先级高。 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,...
  • CSS选择器世界

    千次阅读 2020-02-23 12:41:10
    CSS选择器分类与优先级 css选择器分为四类:选择器、选择符(后代关系的空格、>、+、~、||)、伪类、伪元素(::before、::after、::first-letter等)。 css的优先级:css的优先级有很多划分方法,所有的方法其实...
  • CSS3 选择器CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。) 选择器 例子 例子描述 CSS .class .intro ...
  • css选择器种类

    千次阅读 2013-05-24 14:19:59
    CSS 选择器 CSS 元素选择器CSS 选择器分组CSS选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代选择器CSS 子元素选择器CSS 相邻兄弟选择器CSS 伪类CSS 伪元素
  • css选择器类型

    千次阅读 2018-07-17 09:33:38
    1、标签选择器 li{ } 2、类选择器 .leiming{ } 3、ID选择器 #leiming{ } 4、伪类选择器(lvha的顺序不能变) a:link{ /*未访问状态*/ } a:visited{ /*已访问状态*/ } a:hover{ /*鼠标悬停状态*/ }...
  • 选择器分类 2.1 标签选择器 2.2 类选择器 2.3 类选择器-多类名 2.4 id 选择器 id 选择器与类选择器的区别 2.5 通配符选择器 1、选择器的作用 根据不同需求把不同标签选出来,简单来说,就是选择标签...
  • 1、类型选择器CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素。2、简单属性...
  • jQuery类css选择器代码详解

    千次阅读 2018-08-09 21:01:09
    jQuery选择器分类有哪些? 1) 类css选择器 1.1) 基本选择器 ID选择器、标签选择器、类选择器 并集选择器、交集选择器、全局选择器 1.2) 层次选择器 后代选择器:使用空格作为分隔符 子选择器:使用&amp;...
  • CSS三大特性—— 继承...css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:...
  • css选择器优先级权重计算

    万次阅读 2017-05-27 09:57:49
    一、优先级分类 通常可以将css的优先级由高到低分为6组: 第一优先级:无条件优先的属性只需要在属性后面使用!...第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classn
  • web前端@css选择器

    千次阅读 2019-09-03 14:13:52
    web前端@css选择器超级详细 文章很长 需耐心阅读 内容总览 内容总览 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练...
  • JQ类css选择器

    2018-12-06 21:44:44
    1) 类css选择器 1.1) 基本选择器 ID选择器、标签选择器、类选择器 并集选择器、交集选择器、全局选择器 1.2) 层次选择器 后代选择器:使用空格作为分隔符 子选择器:使用&gt;作为分隔符 相邻元素选择器:...
  • CSS选择器的优化

    2014-05-24 16:43:43
    CSS选择器的优化 前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器、CSS属性选择器以及CSS伪类选择器。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化...
  • css并列选择器怎么用?请看文末 css基本选择器: 01. 标签 div{} 02. class css Code: .demo{} html Code: <div class="demo">我是一个类</div> 03. id css Code: #demo{} html Code: <span id=...
  • CSS选择器类型:标签选择器、类选择器、ID选择器 --> <style type="text/css"> /* 标签选择器 */ p{ color:red; } li{ font-size:12px; } /* 类选择器 */ .db{ font-size:20px; ...
  • CSS 选择器及各样式引用方式

    千次阅读 2015-08-26 17:31:55
     一个好的界面,是一个Web吸引人们最大的卖点。...1.选择器分类 语法结构:   1.1 Id选择器 1.1.1 格式  #id :#+元素的id;id是区分大小写。 1.1.2 示例 #title1 {background-color:Blue;
  • CSS选择器及其优先级排序

    千次阅读 2018-10-12 14:20:37
    一、 CSS选择器分类 CSS选择器如下: CSS的选择器其实大类的话可以分为三类,即id选择器、class选择器、标签选择器。 用法如下: id选择器: #id名 { 属性名:属性值; } class选择器 :.class名 { 属性名:属性值; }...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,758
精华内容 15,503
关键字:

css选择器的作用及分类