精华内容
下载资源
问答
  • 2021-06-14 09:14:10

    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)

    更多相关内容
  • 成天都要与样式打交道的朋友,相信对CSS选择符(CSS Selectors)都不会陌生。不过对于刚接触或者还不是很熟悉css的朋友来说,能够找到一份对于CSS选择符的相关例子集合,还是会有一定帮助的。
  • 主要介绍了css选择符类型详细介绍,包括标签选择符、类选择符、ID选择符、包含选择符、通配选择符选择符分组、标签指定式选择符、组合选择符,需要的朋友可以参考下
  • 选择符> 标签1 > 标签2 标签2必须是标签1的子元素.与常规的上下文选择符不同,这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素. 紧邻同胞选择符+ 标签1 + 标签2 标签2必须是紧跟在其同胞标签1的...
  • CSS选择符.docx

    2020-12-16 09:46:16
    CSS选择符详解,内容包括元素选择符、类选择符、ID选择符、属性选择符及文档结构选择。。。。。。 CSS选择符 一、 普通选择符 1、 元素选择符:h2 {font: large/150% sans-serif;} 2、 类选择符:p.warning.help {...
  • css 选择符介绍

    2021-09-24 10:38:32
    css选择符分为很多类,包括:类型选择符,class选择符,id选择符,通用选择符,分组选择符,包含选择符,元素指定选择符,子对象选择符,属性选择符,下面我们来一一讲解 1.类型选择符 类型选择符是指以文档对象模型...

    一,css选择符分类

    css选择符分为很多类,包括:类型选择符,class选择符,id选择符,通用选择符,分组选择符,包含选择符,元素指定选择符,子对象选择符,属性选择符,下面我们来一一讲解

    1.类型选择符
    类型选择符是指以文档对象模型(DOM)作为选择符,即选择某个HTML标签为对象,设置其样式规则。类型选择符就是元素本身,定义直接使用元素名称

    格式:
    body{css代码}

    2.类选择符
    使用类选择符可以吧相同的标签定义为不同的样式。吐过你希望同一种标签在不同的地方使用不同的样式,就可以先定义两个类在应用时只要在标签中指定它的属于哪一个类,就可以使用该类样式。我们可以将不同的元素设置相同的类名,就哭将不同的元素设置为相同的样式

    格式

    <html>
    <style>
    	.类名{属性名:属性值}
    </style>
    <body>
    	<p class='类名'>...</p>
    </body>
    </html>
    

    3.id选择符
    id选择符用于对某个单一元素设置单独样式,定义id选择符时要在id名称前加上一个‘#’号。

    <html>
    <style>
    	#id名{属性名:属性值}
    </style>
    <body>
    	<p id='id名'>...</p>
    </body>
    </html>
    

    其中‘#id名’是定义的id选择符名称,该选择符名称在文档中是唯一的只读页面中的唯一元素进行样式定义。这样的样式定义在页面中只能出现一次,其使用范围为整个html文档中所有引用id

    4.通配选择符
    通配选择符是一种特殊的选择符,其作用是定义页面所有元素的样式,在编码是用 ‘*’ 代表通配选择符
    格式:
    *{css代码}

    5.通用兄弟选择符E~F
    通用兄弟选择符 E~F 用来指定位于同一个元素之中的某个元素之间的所有其他某个种类的兄弟元素所使用是样式
    格式:
    E~F:{att}
    其中E,F表示元素,att表示元素的属性。通用兄弟元素选择符E~F表示匹配E元素之后的F元素。

    6.分组选择符
    分组选择符指的是对多个变迁设置同意样的样式,在不同的类型中,表示同一样的样式
    格式:
    E1,E2,E3{CSS代码}
    当多个对象定义了相同的样式时,用户可以吧他们分为一组这样能够简化代码读写

    .class{css代码}
    .calss2{css代码}
    可以分组为
    .class,class2{css代码}
    

    7.伪类选择符
    下面讲解一些特殊的选择符
    伪类可以让用户在使用页面的过程中增加更多的交互效果,具体代码实例如下:

    a:link{css代码}/*未访问的链接状态*/
    a:visited{css代码}/*已访问的链接状态*/
    a:hover{css代码}/*鼠标移入的链接状态*/
    a:active{css代码}/*被激活的链接状态*/
    

    8.伪元素
    与伪类的方式相似,伪元素通过对插入到文档中的虚构元素进行触发,从而达到某种效果,伪元素格式为:

    选择符:伪元素{属性:属性值;}
    
    展开全文
  • 本文介绍了CSS选择符和ID选择符的区别,分享给大家,具体如下: 类选择符 HTML代码: <div class=one></div> <div></div> CSS代码: div { width: 200px; height: 200px; border: 1px solid #000; margin:...
  • CSS基础 CSS选择符

    2020-10-30 12:15:20
    选择符分类介绍1.通配选择符 语法: * { sRules } 说明: 通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。 假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。
  • 后代选择符用于选取一个标签的所有后代,包括子代和孙辈等;而子代选择符只选取指定父辈的子代标签(指定标签元素的第一代子元素)。 子代选择符使用一个额外的符号(尖括号> )表明两个元素之间的关系。 例如:body...
  • 最初写CSS的时候,觉得很简单,写得天马行空。后来慢慢的发现,没有规则的瞎写,虽然也能实现效果,但是在实际开发中可能会多做无用功或是重复做功,并且CSS并不...但是,事实上,CSS 选择符是从右到左进行匹配的。所
  • CSS选择符说明

    2020-10-30 22:59:35
    CSS选择符说明
  • CSS选择符选择器)基础认识

    千次阅读 2020-12-10 00:30:53
    一、CSS选择符选择器) 常用的选择符有十种左右,这里主要讲三种。 类型选择符,class选择符(类选择符),id选择符,通配符,群组选择符,包含选择符 伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名...

    一、CSS选择符(选择器)
    常用的选择符有十种左右,这里主要讲三种。
    类型选择符,class选择符(类选择符),id选择符,通配符,群组选择符,包含选择符
    伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名),
    伪对象选择符(设置在对象后发生的内容。用来和content属性一起使用 )

    二、类型选择符(权重:0001)
    1.类型选择符也称为元素选择符、标签选择符、element选择器
    2.类型选择符是根据html语言中的标记来直接定义
    3.语法:元素名称{属性:属性值;属性:属性值;属性:属性值;}
    a)类型选择符就是以文档对象html中的标签作为选择符,即使用结构中元素名称作为选择符。例如*body、div、p,img,em,strong,span…*等。
    b)所有的页面元素都可以作为选择符;
    例:
    在这里插入图片描述
    二、id选择符 (权重:0100)
    1.语法:#id名称{属性:属性值;属性:属性值;属性:属性值;}
    2.设置id名:
    <元素 id =“id名”></元素>
    3.语法格式是 "#"加上自定义的id名,如: #box{属性:属性值;}
    例:

    <p id="pbox">我是谁</p>
    #pbox{background-color:red;
    height:800px;}
    

    4.具有唯一性,一个id名在一个文档中只能出现一次
    5.最大的用处:创建网页的外围结构
    6.命名规则:必须以字母(A-Z或者a-z)开头,之后可以是字母、数字、连字符("-")、下划线("_")

    例:

    在这里插入图片描述

    三、class选择符 (权重0010)
    1.语法:.class名{属性:属性值;}
    2.设置class名:

    <元素 class="class名"></元素>
    例:
    <div class="box1">gg</div>
    .box1{color:blue;}
    

    在这里插入图片描述在这里插入图片描述
    说明:class选择符更适合定义一类样式
    1)一个元素可以设置多个class名: <元素名 class=“top box”>
    2)class名可以重复
    3)当我们使用类选择符时,应先为每个元素定义一个类名称
    4)类选择符的语法格式:

     如: <div class="top"></div>
            .top{属性:属性值;}
    
    展开全文
  • CSS选择符-.pdf

    2022-02-28 15:58:26
    CSS选择符-.pdf
  • CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?1、选择符2、继承3、优先级总结 CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算? 1、...

    CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?


    CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?

    1、选择符

    基本选择器:

       标签选择器   div,h1,p{}    多个标签时为群组选择器
         id选择器   #mydiv{}
       类名选择器   .mydiv{}
     通配符选择器   *{}
    

    层次选择器:

      后代选择器    parent n{}     选中parent元素内部后代所有 n 元素
      子代选择器    parent>n{}     选中parent元素内部 的子元素 nv
      兄弟选择器    brother~n{}    选中brother元素后面的所有某一类兄弟元素 n
      相邻选择器    brother+n{}    选中brother元素后面的某一个相邻的兄弟元素n
    

    属性选择器:

       input[type=text]
    

    伪类选择器:

       a:hover  
       li:first-child
    

    2、继承

    可继承:

       font-size/family    color //字体的相关属性可继承
    

    不可继承:

       border  padding margin  width  height
    

    3、优先级

    优先级:就近原则:样式定义最近者为准,载入样式以最后载入的定位为准

     优先级:!important  >id  >class >tag
     
    		!important 写法:div { color:#f00 !important }
    

    总结

    以上是对css选择符、优先级和继承的小总结,后期将继续更新html基础知识点
    文章为原创内容,要是遇到有不合适的地方欢迎赐教🙌

    展开全文
  • CSS选择符选择器)

    2019-05-04 17:19:33
    CSS选择符选择器): 表示要定义样式的对象 1、元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} 语法:元素名称 { 属性:属性值;} 说明: a)元素选择符就是以文档...
  • CSS选择符[归类].pdf

    2021-10-11 01:29:34
    CSS选择符[归类].pdf
  • css选择符有哪些

    千次阅读 2019-02-18 14:47:09
    1:id选择器(#myid); 2:类选择器(.myclassname); 3:标签选择器(div,h1,p); 4:相邻选择器(h1+p); 5:子选择器(ul&lt;li); 6:后代选择器(li a); 7:通配符选择器(*); ...
  • (一)元素选择符 E(某个元素,如p) id(使用id,如#idName) class(使用class,如.myclass) 通配符:* (二)关系选择符 包含选择符:E F(E所有的F包含子代,孙代...
  • CSS选择符补充[整理].pdf
  • css选择符的优先级

    千次阅读 2017-05-10 14:58:08
    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 一、.CSS选择符有哪些? 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器...
  • 优化CSS选择符

    2018-07-27 10:29:24
    CSS选择符对性能的影响源于浏览器匹配选择符和文档元素时所消耗的时间,前端攻城狮们可以通过编写更高效的选择符来控制匹配耗时,实现高效率选择符首先要理解选择符是如何匹配的。 1 CSS匹配规则:最右边优先 看...
  • CSS选择符目前有下面这几个:后代选择符空格( )、子选择符箭头(>)、相邻兄弟选择符加号(+)、随后兄弟选择符弯弯(~)和列选择符双管道(||)。其中对于前4个选择符,浏览器支持的时间较早,非常实用,是本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 166,016
精华内容 66,406
关键字:

css选择符

友情链接: cltj.rar