精华内容
下载资源
问答
  • 网页元素:在CSS教程,对于如“<p></p>”、“<h3></h3>”这些不再称呼为标签,而统一称呼为网页元素。在网页元素,都可以按类型进行区分,其类型可以作为CSS的选择符,如“<a></a>”、“<ul></ul>”、“<div></...
  • 前端人员写静态页面时,不可避免的会遇到选择器的...类选择器、属性选择器、伪类选择器的权重为 0,0,1,0  id选择器的权重为0,1,0,0  行内样式的权重为1,0,0,0  !imporatant的权重为∞ 权重大的选择器覆盖权重小的

    前端人员在写静态页面时,不可避免的会遇到选择器的权重问题,下面做一些有关选择器权重问题的总结

    一、选择器优先级先后顺序:

    id选择器>类选择器>元素选择器

    二.、规则:

    选择器的权重值表述为4个部分,用0,0,0,0表示。
    通配符*的权重为0,0,0,0
    标签选择器、伪元素选择器的权重为0,0,0,1
    类选择器、属性选择器、伪类选择器的权重为 0,0,1,0
      id选择器的权重为0,1,0,0
      行内样式的权重为1,0,0,0
      !imporatant的权重为∞

    权重大的选择器覆盖权重小的选择器
      同样权重的选择器,后面的覆盖前面的
      层叠选择器按照权重相加的结果,大的覆盖小的
      !imporatant的权重最大的 只要加上就没得抢了

    展开全文
  • 前端人员写静态页面时,不可避免的会遇到选择器的...类选择器、属性选择器、伪类选择器的权重为 0,0,1,0  id选择器的权重为0,1,0,0  行内样式的权重为1,0,0,0  !imporatant的权重为∞ 权重大的选择器覆盖权重小

    前端人员在写静态页面时,不可避免的会遇到选择器的权重问题,下面做一些有关选择器权重问题的总结

    一、选择器优先级先后顺序:

    id选择器>类选择器>元素选择器

    二.、规则:

    选择器的权重值表述为4个部分,用0,0,0,0表示。
    通配符*的权重为0,0,0,0
    标签选择器、伪元素选择器的权重为0,0,0,1
    类选择器、属性选择器、伪类选择器的权重为 0,0,1,0
      id选择器的权重为0,1,0,0
      行内样式的权重为1,0,0,0
      !imporatant的权重为∞

    权重大的选择器覆盖权重小的选择器
      同样权重的选择器,后面的覆盖前面的
      层叠选择器按照权重相加的结果,大的覆盖小的
      !imporatant的权重最大的 只要加上就没得抢了

    展开全文
  • selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景: 鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等 细节优化: 如果鼠标移动到目标元素过程触发了附近其他元素的:hover效果导致...

    欢迎访问个人博客网站:
    http://www.zhuxin.club

    1. 用户行为伪类

    1.1 :hover

    selector:hover 表示匹配鼠标经过的selector选择器元素。

    应用场景:

    鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等

    细节优化:

    • 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素,可通过设置目标元素效果hover的延时出现(通过visibility控制显隐和transition配合使用)
    • 通过:hover实现类似下拉列表这种重要功能时,需考虑用户交互环境无鼠标的情景(如触屏设备,智能电视),可通过增加focus伪类来优化(使用Tab键来聚焦目标元素触发之前的hover对应的效果)

    注意事项:

    :hover不适用于移动端,虽然也能触发,但消失并不敏捷,体验反而奇怪。

    1.2 :active

    selector:active 表示匹配激活状态的selector选择器元素(通过鼠标主键点击或触屏触摸的过程中触发样式,结束后还原样式),支持任意html元素。

    应用场景:

    链接和按钮点击过程中的样式设置

    注意事项:

    (1)IE浏览器中,:active无法冒泡
    (2)IE浏览器中,<html><body>:标签触发active样式后无法还原
    (3)移动端Safari浏览器下,:active伪类默认无效,可通过touch事件代替
    (4)键盘无法触发:acitve伪类样式,按Enter键会触发点击事件

    1.3 :focus

    selector:focus 表示匹配聚焦状态的selector选择器元素。

    有效范围:

    • 非disabled状态的表单元素(包括input,select和button元素)
    • 含有href属性的a元素
    • area和summary元素

    应用场景:

    常用于表单元素聚焦时的边框高亮显示

    注意事项:

    使用:focus来修改按钮的样式时,建议按钮就用button元素,而非span或div标签模拟的按钮。因为考虑到纯键盘无鼠标的场景,button元素可以通过键盘Tab触发聚焦,而span或div元素不行

    1.4 :focus-within

    selector:focus-within 表示当前selector选择器元素或者其子元素聚焦时都会匹配(而focus只会匹配对应元素本身)。说明子元素聚焦可以让父元素的样式变化

    应用场景:

    用于表单form或列表元素中设置子表单或子元素的一些通用样式

    示例:
    form表单中任一表单元素聚集时让所有表单元素前面文字高亮
    在这里插入图片描述

    <form class="form">
        <label for="username">用户名:</label><input id="username" type="text"/><br>
        <label for="password">密码:</label><input id="password" type="text"/>
    </form>
    
    form:focus-within label{
            color:darkblue;
            text-shadow: 0 0 1px;
        }
    </form>
    

    1.5 :focus-visible

    应用场景:

    selector:focus-visible 匹配的场景是:元素聚焦,同时浏览器认为聚焦轮廓应该显示。

    经典场景是一些元素(比如a元素)我们认为在点击时不应该有轮廓,而键盘访问时应该有轮廓。而此时当你遇到某个元素点击和键盘访问时都有轮廓时,你想修改成前面那样就可以用这个伪类。

    换句话说:focus-visible可以判断是由键盘还是鼠标触发的聚焦行为

    :focus:not(:focus-visible){
         /*这里的focus-visible可以看作匹配是键盘聚焦*/
           /*所以这里匹配不是键盘引发的聚焦行为(比如鼠标触发)*/
         outline: 0;
     }
    

    2. URL定位伪类

    2.1 :link

    selector:link 表示匹配页面上href链接没有被访问过的a元素

    注意事项:

    该伪类已基本被a标签所代替,直接设置a标签的样式即可

    2.2 :visited

    selector:visited 表示匹配页面上访问过的a元素

    注意实项:

    • :visited支持的CSS属性有限,比如不支持before和after这类伪元素(即不支持a:visited::before或after)

    • 使用:visited设置颜色时,UI表现上不支持本透明。要么纯色,要么全透明,例如不支持color:rgba(255,0,0,0.3)

    • 使用:visited时,如果设置了某个属性的样式,目标元素原本使用:visited前并没有设置过该属性的样式,则该样式无效。即只能重置修改,不可凭空新建

      示例:

     a{
          color:blue
       }
     a:visited{
          color:yellow;
          /*此时background-color不生效*/
          background-color: red;
      }
    
     a{
        color:blue;
         background-color: green;
            
      }
        a:visited{
            color:yellow;
            /*此时background-color生效*/
            background-color: red;
        }
    

    2.3 :any-link

    selector:any-link 表示匹配所有设置了href属性的链接元素以及匹配:link伪类和:visited的元素

    应用场景:

    :any-link是真正意义上的链接伪类

    注意实项:

    • 与a标签选选择器相比,该伪类匹配更加准确识别链接元素;与:link伪类相比,该伪类无须担心:visited伪类对样式的干扰
    • IE不支持

    2.4 :target

    selector:target 表示匹配URL锚点对应的元素。例如http://xxx.com/#detail,则可设置CSS样#detail:target对应通过锚点链接跳转到id为detail的元素时的元素样式

    注意实项:

    即使部分浏览器支持a元素的name属性就是锚点值,点击时也会触发锚点跳转,但是考虑兼容性,还是建议统一用href来跳转锚点

    3. 输入伪类

    3.1 :enabled和:disabled

    用于表单元素是否禁用状态的切换,匹配是否设置了disabled属性的表单元素

    应用场景:

    • :enabled伪类在CSS中较为鸡肋,因为表单元素默认状态就是enabled状态。但在js中可方便用于获取当前页面的可用的表单元素
    • :disable伪类经典场景是按钮禁用,尤其是解决按钮点击后发送异步请求时的重复点击问题,可通过控制disabled状态来实现。

    注意实项:

    • a标签设置disabled属性无效,无法匹配:disabled伪类
    • 含有readonly属性的表单元素也会匹配:disabled伪类
    • 尽量用button来实现按钮禁用效果,而非a元素配合pointer-events: none来实现。因为此时用a元素依然可通过键盘Tab触发按钮点击。

    3.2 :read-only和:read-write

    用于匹配输入框元素是否只读还是可读可写,匹配是否设置了readonly属性的输入框元素

    注意事项:

    • 这两个伪类只对input和textarea元素有效
    • disalbed状态的输入框会出乎意料的匹配:read-write伪类
    • 由于IE和FireFox对这对伪类的兼容性问题,建议使用属性选择器如textarea[readonly]来匹配
    • readonly输入框和普通输入框样式类似,但disabled输入框会文字置灰

    3.3 :placeholder-shown

    一个输入框如果placeholder内容显示 ,则该伪类会匹配它

    应用场景:

    可通过该伪类判断输入框是否被输入了内容,并配合伪元素来显示提示信息:

    在这里插入图片描述

    <input placeholder="请输入姓名" type="text"><small></small>
    
     input:placeholder-shown+small::before{
            content:' 尚未输入内容'
        }
    

    3.4 :default

    该伪类匹配处于默认状态的表单元素

    应用场景:

    常用于匹配处于设置了selected属性的下拉框option元素,设置了checked属性的单复选框元素,添加额外样式让用户更加清楚默认值是什么。例如该伪类配合伪元素给一些默认值设置额外的提示信息来增强体验

    注意事项:

    • js脚本快速修改元素的selected或者checked属性不会影响:default伪类的默认匹配效果
    • 虽然option元素在没有设置selected属性的前提下也会默认呈现第一个option,但它不会匹配:default伪类

    3.5 :checked

    该伪类匹配处于默认选中状态的单,复选框元素

    注意事项:

    为什么应该用:checked伪类而不是属性选择器[checked]:

    • :checked伪类只匹配标准表单控件元素,而[checked]属性选择器会匹配任意设置了checked属性的元素(包括自定义的checked属性)
    • 通过js脚本给某元素设置了checked属性后并不会使该元素本身添加了checked属性。所以此时[checked]属性选择器不会匹配,但是:checked伪类会匹配

    3.6 :invalid和:valid

    该伪类匹配有效性验证是否通过的表单元素

    应用场景:

    HTML5中给表单元素提供了required(必输项),pattern(输入值正则匹配)等验证属性,当输入的内容并不符合这些属性规则时,就会匹配:invalid伪类,反之匹配:valid伪类

    注意事项:

    由于页面一加载便会执行CSS,如果我们设置了:invalid匹配样式,例如一些红色的警告提示样式,一进页面就显示这些会影响用户体验。鉴于此,新推出一个:user-invalid伪类,但是浏览器兼容性很差。还可通过js脚本来控制。

    3.7 :required和:optional

    该伪类匹配是否设置了required属性的表单元素。只要表单元素没有设置required属性,就会匹配:optional伪类

    4. 树结构伪类

    4.1 :root

    对于XHTML和HTML文档,该伪类匹配的就是html根元素标签

    应用场景:

    由于现如今浏览器对CSS变量的支持,对于类似整站颜色,布局尺寸这样的变量,业界约定俗成变量由:root伪类负责,而html选择器负责样式。虽然他俩实质是一样的。例如:

     :root{
            --blue:#2486ff;
            --red:#f4615c;
            --layerWidth:1190px
        }
      html{
           overflow: auto;
       }
    

    注意事项:

    :root伪类与html标签选择器的区别:

    • :root伪类优先级更高
    • :root伪类在IE9以上才支持,兼容性低于html标签选择器

    4.2 :empty

    :empty选择器选择每个没有任何子级(包括文本节点)的元素。

    应用场景:

    • 隐藏空元素。尤其是一些设置了padding或margin属性的容器在没有内容时依然会占用空间,此时通过:empty匹配来设置它们display:none来解决
    • 对于一些数据展示的部分,尤其是通过异步请求动态返回的数据。如果某些字段数据为空导致的空标签,可通过:empty伪类匹配并配合伪元素添加一些类似"暂无数据"的提示效果

    注意事项:

    • 如果元素标签内只有注释,也不会匹配:empty伪类
    • 如果标签换行或者元素标签内只有空格,也不会匹配:empty伪类
    • 通过伪元素::before或after给元素插入了内容,但如果标签依然为空,则依然会匹配:empty

    4.3 :first-child和:last-child

    selector:first-child 表示匹配作为其父元素的第一个子元素的selector元素

    selector:last-child 表示匹配作为其父元素的最后一个子元素的selector元素

    应用场景:

    这两个伪类最常用于对列表元素的第一个/最后一个子元素的通用样式的重置。例如除了最后一个子元素,其他子元素都添加底部边框。

      	li{
            border-bottom: 1px solid #cccccc;
        }
        li:last-child{
            border-bottom:none
        }
    

    4.4 :only-child

    该伪类匹配没有任何兄弟元素的元素,或者说是父元素中唯一子元素的元素

    注意事项:

    • :only-child在匹配时会忽略元素前后的文本内容(包括文本节点和注释)

    4.5 :nth-child()和nth-last-child()

    selector:nth-child(n) 表示匹配第n个子元素的selector元素

    selector:nth-last-child(n) 表示匹配从后往前数的第n个子元素的selector元素

    应用场景:

    这两个伪类适用于内容动态,无法确定的匹配场景(如通过异步请求获取的列表数据)。例如一些列表数据奇偶数子元素的背景颜色不同,前N个子元素的高亮显示等场景。如果数据是纯静态的,建议还是使用类名或属性选择器进行匹配

    相关语法:

    二者相关语法是统一的,以nth-child为例:

    • selector:nth-child(odd或even)表示匹配作为其父元素的第奇数/偶数个子元素的selector元素

    • selector:nth-child(An+B)表示匹配符合对应规则的子元素。

      其中A,B,n均为不为负的整数,但A前面可以添加负号。

      示例:

      nth-child(5n)匹配第5,10,15…个子元素

      nth-child(3n+4)匹配第4,7,10…个子元素

      nth-child(-n+3)匹配前3个子元素

      nth-last-child(-n+3)匹配最后3个子元素

    注意事项:

    • :only-child在匹配时会忽略元素前后的文本内容(包括文本节点和注释)

    4.6 :first-of-type和last-of-type

    selector:first-of-type 表示匹配与selector元素标签类型一致的第一个子元素

    selector:last-of-type 表示匹配与selector元素标签类型一致的最后一个子元素

    示例:
    在这里插入图片描述

     dl>:first-of-type{
            color:red
        }
    
     <dl>
           <dt>哈哈</dt>
           <dd>嘿嘿</dd>
       </dl>
    

    可以发现,dt和dt均匹配了该伪类,因为dt和dd都是dl的子元素中各自同类型标签元素的第一个子元素

    4.7 :only-of-type

    selector::only-of-type匹配子元素中标签类型与selector元素一致且只有一个的selector元素,该伪类应用场景较少。

    注意事项:

    匹配:only-child的元素一定匹配:only-of-type,反之则不一定

    4.8 :nth-of-type()和nth-last-of-type()

    selector:nth-of-type(n) 表示匹配与selector元素标签类型一致的子元素集合里第n个子元素

    selector:nth-last-of-type(n) 表示与selector元素标签类型一致的子元素集合里的从后往前数的第n个子元素

    相关语法:

    与nth-child和nth-last-child伪类类似,这两个伪类也具有相同的语法格式。

    应用场景:

    主要适用于特定标签组合并且组合不断重复的场景,例如dl标签的子标签dt和dd的组合

    注意事项:

    :nth-of-type()和nth-last-of-type()这两个伪类的匹配范围是所有相同标签的相邻元素,而nth-child和nth-last-child伪类则匹配所有相邻元素,无视元素类型

    5. 逻辑组合伪类

    5.1 :not()

    selector:not()是否定伪类,如果selector元素与()里的选择器不匹配,则会匹配该伪类

    应用场景:

    使用:not()伪类不仅便于理解,而且保护了原有选择器的优先级,利于维护。它的经典场景适用于一些CSS样式的重置,比如对通用样式的一些例外和特殊情况的处理

    注意事项:

    • :not()伪类自身优先级为0,最终的优先级由()的选择器表达式决定
    • :not()伪类可以不断级联,如input:not(:disabled):not(:read-only){}

    5.2 :is()

    :is()伪类可以把括号中的选择器依次分配出去,对于那种复杂的有很多逗号分隔的选择器非常有用

    示例:

    .test>img,.test1>img,.test2>img,.test3>img{
            
        }
    

    可以通过is伪类简写成下面这样:

     :is(.test,.test1,.tes2,.test3)>img{
    
        }
    

    注意事项:

    :is()伪类自身优先级为0,最终的优先级由()里参数优先级最高的那个选择器决定

    示例:

     :is(#article,.section) p{
    
        }
    

    由于id选择器(#article)优先级大于class类选择器(.section),这段选择器的最终优先级等同于#article p

    5.2 :where()

    :where()伪类的含义,语法和作用与:is()伪类一致,唯一的区别在于:where()的最终优先级(包括括号里的选择器)始终为0

    示例:

    :where(#article,#section) .content的最终优先级等同于.content

    文章参考资料:张鑫旭《CSS选择器世界》

    展开全文
  • css类选择器

    2019-09-30 04:30:49
    伪类是专门用来表示元素的一种特殊状态,比如说常见的 a 元素的一些特殊状态(原始状态的超链接,访问过的超链接,运行的超链接等等),当我们需要为这些处在特殊状态的元素设置样式的时候就可以使用伪类选择器来...

    伪类选择器

      伪类是专门用来表示元素的一种特殊状态,比如说常见的 a 元素的一些特殊状态(原始状态的超链接,访问过的超链接,运行中的超链接等等),当我们需要为这些处在特殊状态的元素设置样式的时候就可以使用伪类选择器来定义。

    动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类,如“:hover”,":active"和":focus"

    二、anchor伪类

    给链接定义四个样式:

    • a:link{ }  正常状态下的链接
    • a:visited{ }  访问过的链接 (只能定义字体颜色color)
    • a:hover{ }  鼠标悬停的链接
    • a:active{ }  正在被点击的链接

    伪类名称不区分大小写

    实例

    1、为没访问过的链接设置颜色为蓝色(正常状态下的链接):

    a:link{ color:skyblue;}

    2、为访问过的链接设置颜色为红色:

    a:visited{ color:red; }

    3、为鼠标悬停状态下的链接设置颜色为绿色:

    a:hover{ color:green;}

    4、为正在被点击的超链接设置颜色为黄色:

    a:active{ color:yellow;}

    :hover 和 :active 伪类不仅仅可以给超链接设置样式,也可以支持超链接以外的元素使用hover和active。但是IE浏览器不支持超链接以外的元素使用hover和active。

    1 p:hover{background:yellow}
    3 p:active{background:orange}
    5 <p>这是一个段落</p>

    浏览器如何判断链接是否访问过?浏览器通过历史记录来判断一个链接是否访问过。

    由于涉及到了用户隐私,所以:visited伪类只能设置字体颜色属性。

    优先顺序:如果同时设置这四个伪类,那么必须按照指定的顺序设置才能生效:a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。a:active 必须在 a:hover 之后。

     

    二、其他伪类

    • :focus  获取焦点
    • ::selection  选中的元素
    • :before  指定元素前(伪元素)
    • :after  指定元素后(伪元素)

    1、:focus获取焦点(文本输入时闪烁的光标叫获取焦点,光标消失叫做失去焦点)

    例:文本框获取焦点以后,其背景颜色变成黄色

    input:focus{ background:blue}
    <input type="text">

    获得焦点为

    2、::selection为选中的内容设置样式

    p::selection{background:yellow}
    <p>第一个段落第一个段落第一个段落第一个段落</p>

    3、在p元素后面添加文字内容

    p:after{content:"会出现在元素的最后面";color:blue;}

     

    4、在p元素前面添加文字(使用伪类元素插入的内容“会出现在元素的最前面”这部分内容不可选中)

    p:before{content:"会出现元素的最前面";color:orange;}

     

     

    三、选择元素的第一个或最后一个子元素(:first-child伪类和:last-child伪类)

    :first-child  选择元素的第一个子元素

    :last-child  选择元素的最后一个子元素

    1、选择div父元素中的第一个子元素p元素,设置文字颜色为红色。

    p:first-child{color:red}
    <div>
    <p >第一</p>
    <p>第二</p>
    <p>第三</p>
    </div>

    2、选择div父元素中的最后一个子元素p元素,设置文字颜色为黄色。

    p:last-child{color:yellow;}
    <div>
    <p >第一</p>
    <p>第二</p>
    <p>第三</p>
    </div>

    3、选择相匹配的所有<p>元素的第一个 <em> 元素,定义文字颜色为蓝色。

    p>em:first-child{color:blue}
    <div>
    <p >第一</p>
    <p><em>第二</em></p>
    <p>第三</p>
    </div>

    4、选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <em> 元素,定义文字颜色为橙色

    p:first-child em{color:orange}
    <div>
    <p><em>第一</em></p>
    <p><em>第二</em></p>
    <p><em>第三</em></p>
    </div>

     

    转载于:https://www.cnblogs.com/nyw1983/p/11396423.html

    展开全文
  • CSS选择器的分类

    2019-05-28 17:26:00
    CSS选择器的分类以及基本用法 ...1.ID选择器 使用id选择器元素上面增加一个id属性,id属性的属性值不用用数字开头 一个页面中只能有一个id属性值 css中id选择的表示方法用# 表示 #div01{ width: 100px; ...
  • CSS结构器伪类选择器 本片文章主要是为了学习CSS3 空格符:的意义。 下面是E:frist-child与E:frist-of-type的区别 这里插入图片描述 注:如选着器未指定父元素,则父元素默认为body 空格符号如代码所示ul ...
  • 类选择器:由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。伪元素选择器:并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的...
  • 目录通配符选择器ID选择器类选择器标签选择器后代选择器子代选择器组合选择器伪类选择器(重点)相邻兄弟选择器相邻选择器兄弟选择器属性选择器通配符选择器(*)表示选择所有的元素。*{ margin: 0; padd...
  • 类选择器在 HTML 以 class 属性表示 CSS 类选择器以一个点“.”号显示。 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。 可以理解为给这个标签起了一个名字,来表示。...
  • css选择器

    2021-03-09 21:57:17
    css的两个选择器 id选择器:HTML元素以id属性来设置id选择器,CSS id 选择器以 “#” 来定义。...clss选择器:class 选择器HTML以class属性表示, CSS 类选择器以一个点"."号显示 <style> .cen
  • div ul { color : red; } 表示div元素的ul元素(后代ul元素)颜色显示为红色; div.ul { color : red; } 表示:所有class属性为ul的div元素显示为红色; div.example.ul { color : red...
  • 类选择器有哪些: E:last-child选择父元素的倒数第一个子元素 EE:nth-child(n)选择父元素的第n个元素 E:nth-last-child(n)选择父元素的倒数第n个元素E,须满足倒数第n个元素以及为E标签,否则无效 E:fi
  • 类选择器/class选择器 以点"."开头,后面紧跟一个类名 ID选择器 以"#"开头,后面紧跟一个ID名,一个文档,ID值不能重复 普遍选择器 用"*”来表示普遍选择器,表示选择所有元素,通常用组合选择器 ...
  • 在CSS中,我们要给一个元素定义样式,首先得把这个元素选出来,我在网上看了很多文章,再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家,哈哈哈一起学习一起进步! 目录通配符选择器ID选择器类...
  • CSS选择器

    2020-05-16 19:01:48
    (1)基础选择器:标签选择器、类选择器、id选择器、通配符选 择器。 (2)组合选择器:标签指定式选择器、后代选择器。 (3)属性选择器 (4)伪类选择器 基础选择器: 标签选择器也叫元素选择器。其实就是 ...
  • CSS类选择器类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和...
  • 导航标签,当前文档或其他文档提供导航链接 3 article 内容标签,表示文档、页面、应用或网站的独立结构 4 section 定义文档的某个区域,没有更具体的语义 5 aside 侧边栏标签,表示一个和其余页面内容...
  • 选择器的详细介绍总结的下方) 1.关系选择器 >: 选择后代 多个为多级后代 (较常用) + :选择同级的下一个,不能为多级。同时其他选择器的条件也要遵守 ~ :后面的所有同级,同时其他选择器的条件也要遵守 ...
  • CSS3选择器--伪

    千次阅读 2017-01-02 15:46:50
    前面介绍了CSS3选择器的属性选择器和结构性伪类选择器结构性伪类选择器的文章也提及了伪元素和伪类,那么本文会详细说明几个伪类的使用,但是侧重点在于before和after两个伪类的使用。  先列举伪类有什么...
  • CSS3——属性选择器

    千次阅读 2018-05-12 19:53:44
    CSS3 属性选择器 CSS3 属性选择器, CSS3 ...CSS3 结构性伪类选择器,包含伪类选择器和伪元素选择器,伪元素选择器包含 first-line(给元素内容第一行增加属性)、first-letter(给元素内容首字母增加属性)...
  • 在CSS中选择器的方法有三种: 直接使用标签进行选择 div{} class选择器(类选择器),使用标签的class名选择 <div class="box"></div> css中选中这个标签使用.box{} id选择器 <div id="box"></...
  • css基本选择器

    2020-04-09 09:28:01
    CSS基本选择器(对指定的标签设置样式,要把指定的标签选择出来):元素选择器、类选择器、id选择器、组合选择器、通用选择器 元素选择器(类型选择器或标记选择器):声明哪些元素采用css样式 类选择器(class...
  • 然后页面中导入这个样式文件3、CSS的样式规则4、CSS选择器:CSS核心(1)标签名选择器(2)id选择器(3)类选择器5、CSS中颜色表示方式6、CSS中尺寸表示方式7、CSS中图像表示方式 CSS:层叠样式表 1、结构和表现...
  • CSS教程之选择器

    2017-12-08 09:00:19
    css 选择器 如果你要 html 标签设置 CSS 样式,那么你有四种方法,即 css 选择器有四种 1.id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的...class 选择器在HTML以class属性表示, CSS
  • CSS选择器优先级

    2019-09-19 15:51:50
    Id表示身份,页面原色的id不允许重复,因此id选择器只能选择单个元素 类别选择器 .nav 选择拥有该的多个元素 标签选择器 div 根据标签...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 275
精华内容 110
关键字:

在css中表示类选择器