CSS复合选择器

  1. 后代选择器

    • 后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代

    • 元素1 元素2 {样式声明}
    • 【注意】

      • 元素1 和元素2 中间用空格隔开
      • 元素1是父级,元素2是子级,最终选择的是元素2
      • 元素2可以是儿子,也可以是孙子,只要元素1的后代即可
  2. 子选择器

    • 子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素

    • 元素1 > 元素2 {样式声明}
    • 【注意】

      • 元素1和元素2 中间用大于号隔开
      • 元素1 是父级,元素2 是子级,最终选择的是元素2
      • 元素2 必须是亲儿子,其孙子、重孙之类都不归他管
  3. 并集选择器

    • 并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明

    • 并集选择器是各种选择器通过英文逗号(,)链接而成,任何形式的选择器都可以作为并集选择器的一部分

    • 元素1,元素2{样式声明}
    • 【注意】

      • 元素1和元素2中间用逗号隔开
      • 逗号可以理解为和的意思
      • 毕竟选择器通常用于集体声明
  4. 伪类选择器

    • 伪类选择器用于想某些选择器添加特殊的效果,比如给链接添加特殊效果,或则选择第一个,第n个元素

    • 伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first-child

    • 链接伪类选择器

      • a:link  /* 选择所有未被访问的链接*/
        a:visited /* 选择所有已被访问的链接*/
        a:hover /*选择鼠标指针位于其上的链接*/
        a:active /*选择活动链接(鼠标按下未弹起的链接)*/
  5. 伪类选择器注意事项

    • 为了确保生效,请按照LAHA的循环顺序声明 :link :visited :hover :active
    • a标签在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
  6. 链接伪类选择器

    a{
    color:red;
    }
    a:hover{
    coloe:gray; /* 鼠标经过的时候,原来的红色 变成 灰色 * /
    }
  7. :focus伪类选择器

    • :focus伪类选择器用于选取获得焦点的表单元素

    • 焦点就是光标,一般情况<input> 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说

    • inpt:focus{
      background-color:yellow;
      }
选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格
子代选择器 选择最近的一级元素 只选亲儿子 较少 符号是大于
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号
链接伪类选择器 选择不同状态的链接 跟连接相关 较多 重点a{}和a:hover{}
:focus选择器 选择获得光标的表单 跟表单相关 较少 input:focus

CSS符合选择器的更多相关文章

  1. css节点选择器

    基础选择器 基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别: ID选择器 标签选择器 类选择器 属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下: #c ...

  2. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  3. CSS常用选择器的认识

    ---恢复内容开始--- 前言:在CSS中选择器的种类有很多很多,但是在实际的工作中,我们经常会用到的分为两大类:基础选择器和复合选择器这两个大类,学习选择器的目的就是为了在复杂的页面中能够快速定位到 ...

  4. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  5. css的选择器效率分析

    我们都知道,CSS具有叠加性(同一个元素被多条样式规则指定),继承性(后代元素会继承前辈元素的一些样式和属性)和优先级 (由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定 ...

  6. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  7. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  8. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  9. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

随机推荐

  1. Cypress 之 URL访问

    visit 作用: 访问一个远程URL. (建议:使用前设置 baseUrl) 语法: cy.visit(url) cy.visit(url, options) cy.visit(options) 使 ...

  2. css实现左右两个div等高

    提出问题: 现在有两个div,但是两个div里面内容多少不确定,可能左边多,可能右边多,css要如何设置可以保证左右两边的div等高呢? 解决方案: 每个div使用display:table-cell ...

  3. SSH框架之Hibernate第二篇

    1.1 持久化类的编写规则 1.1.1 什么是持久化类? 持久化类 : 与表建立了映射关系的实体类,就可以称之为持久化类. 持久化类 = Java类 + 映射文件. 1.1.2 持久化类的编写规则 ( ...

  4. Set a One-to-Many Relationship设置一对多关系 (EF)

    In this lesson, you will learn how to set a one-to-many relationship between business objects. The C ...

  5. SSM框架之Spring(3)IOC及依赖注入(基于注解的实现)

    Spring(3)IOC及依赖注入(基于注解的实现) 学习基于注解的 IoC 配置,大家脑海里首先得有一个认知,即注解配置和 xml 配置要实现的功能都是一样 的,都是要降低程序间的耦合.只是配置的形 ...

  6. 网络协议 3 - 物理层 和 MAC 层

    在上一篇博文中,我们见证了 IP 地址的诞生,机器一旦有了 IP,就可以在网络的环境里和其他的机器展开沟通了.     今天,我们来认识下 物理层 和 MAC 层.     日常生活中,身为 90 后 ...

  7. HTML 有序、无序和定义列表

    无序列表 <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> 咖 ...

  8. angularjs 实现猜数字大小的功能

    <body ng-app="myapp" ng-controller="myCtrl"> <h2>猜一猜,多大值?(1-1000)< ...

  9. MySQL基础之常用函数

    数学函数的使用 常用数学函数 函数 作用 函数 作用 ceil() 进一取整 abs() 取绝对值 floor() 舍掉小数部分 power() 幂运算 round() 四舍五入 pi() 圆周率 t ...

  10. SQL Server存储过程数据库日志文件备份的脚本-干货

    还是拿数据库AAAAAAAA为例子        CREATE PROC [dbo].[p_log_backupAAAAAAAA]    @dbname sysname='',             ...