hgq's docs
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)

guoguoqiqi

漫不经心的向往
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)
  • 怎么解决移动端1px问题
  • 说一说对BFC的理解
  • CSS的盒子模型
  • 说一说对flex布局的认识
  • 网格布局
  • 伪类选择器和伪元素
  • 怎么实现响应式布局
  • css中的选择器有哪些、哪些可以继承
    • 如何做移动端适配
    • 如何清除浮动
    • em、rem区别
    • display none与visibility hidden的区别
    • z-index失效的场景
    • 在页面上隐藏元素的方法有哪些
    • css选择器中first-child与first-of-type的区别
    • 用css绘制三角形及其原理
    • 说一说box-sizing属性
    • 说一说水平垂直居中的布局方法
    • CSS 常见布局方式
    • CSS3的新特性有哪些
    • 圣杯布局和双飞翼布局
    • inline、block、inline-block这三个属性值有什么区别
    • 说一说css的预处理器
    • 如果要做优化,CSS提高性能的方法有哪些
    • CSS3常见动画有哪些
    • 怎样画一条0点5px的线
    • CSS
    guoguoqiqi
    2022-02-13

    css中的选择器有哪些、哪些可以继承

    示例代码:

    <div id="box">
        <div class="one">
            <p class="one_1">
            </p>
            <p class="one_1">
            </p>
        </div>
        <div class="two"></div>
        <div class="two"></div>
        <div class="two"></div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    # 选择器有哪些

    # 1. 常用选择器

    • id选择器(#box),选择id为box的元素

    • 类选择器(.one),选择类名为one的所有元素

    • 标签选择器(div),选择标签为div的所有元素

    • 后代选择器(#box div),选择id为box元素内部所有的div元素

    • 子选择器(.one>one_1),选择父元素为.one的所有.one_1的元素

    • 相邻同胞选择器(.one+.two),选择紧接在.one之后的所有.two元素

    • 群组选择器(div,p),选择div、p的所有元素

    # 2. 伪类选择器

    • :link :选择未被访问的链接

    • :visited:选取已被访问的链接

    • :active:选择活动链接

    • :hover :鼠标指针浮动在上面的元素

    • :focus :选择具有焦点的

    • :first-child:父元素的首个子元素

    # 3. 伪元素选择器

    • :first-letter :用于选取指定选择器的首字母

    • :first-line :选取指定选择器的首行

    • :before : 选择器在被选元素的内容前面插入内容

    • :after : 选择器在被选元素的内容后面插入内容

    # 4. 属性选择器

    • [attribute] 选择带有attribute属性的元素

    • [attribute=value] 选择所有使用attribute=value的元素

    • [attribute~=value] 选择attribute属性包含value的元素

    • [attribute|=value]:选择attribute属性以value开头的元素

    # 5. 在CSS3中新增的选择器有如下:

    • 层次选择器(p~ul),选择前面有p元素的每个ul元素

    • 伪类选择器

    :first-of-type 父元素的首个元素
    :last-of-type 父元素的最后一个元素
    :only-of-type 父元素的特定类型的唯一子元素
    :only-child 父元素中唯一子元素
    :nth-child(n) 选择父元素中第N个子元素
    :nth-last-of-type(n) 选择父元素中第N个子元素,从后往前
    :last-child 父元素的最后一个元素
    :root 设置HTML文档
    :empty 指定空的元素
    :enabled 选择被禁用元素
    :disabled 选择被禁用元素
    :checked 选择选中的元素
    :not(selector) 选择非 <selector> 元素的所有元素
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    • 属性选择器
    [attribute*=value]:选择attribute属性值包含value的所有元素
    [attribute^=value]:选择attribute属性开头为value的所有元素
    [attribute$=value]:选择attribute属性结尾为value的所有元素
    
    1
    2
    3

    # 优先级

    内联 > ID选择器 > 类选择器 > 标签选择器

    如果外部样式需要覆盖内联样式,就需要使用!important。

    # 权重

    从0开始,一个行内样式+1000,一个id选择器+100,一个属性选择器、class或者伪类+10,一个元素选择器,或者伪元素+1,通配符+0

    # 优先级

    权重相同,写在后面的覆盖前面的 使用 !important 达到最大优先级,都使用 !important 时,权重大的优先级高

    # 继承属性

    在css中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性

    关于继承属性,可以分成:

    • 字体系列属性
    font:组合字体
    font-family:规定元素的字体系列
    font-weight:设置字体的粗细
    font-size:设置字体的尺寸
    font-style:定义字体的风格
    font-variant:偏大或偏小的字体
    文本系列属性
    text-indent:文本缩进
    text-align:文本水平
    line-height:行高
    word-spacing:增加或减少单词间的空白
    letter-spacing:增加或减少字符间的空白
    text-transform:控制文本大小写
    direction:规定文本的书写方向
    color:文本颜色
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    • 元素可见性
    visibility
    
    1
    • 表格布局属性
    caption-side:定位表格标题位置
    border-collapse:合并表格边框
    border-spacing:设置相邻单元格的边框间的距离
    empty-cells:单元格的边框的出现与消失
    table-layout:表格的宽度由什么决定
    
    1
    2
    3
    4
    5
    • 列表属性
    list-style-type:文字前面的小点点样式
    list-style-position:小点点位置
    list-style:以上的属性可通过这属性集合
    
    1
    2
    3
    • 引用
    quotes:设置嵌套引用的引号类型
    
    1
    • 光标属性
    cursor:箭头可以变成需要的形状
    
    1

    继承中比较特殊的几点:

    • a 标签的字体颜色不能被继承

    • h1-h6标签字体的大下也是不能被继承的

    # 无继承的属性

    display
    
    文本属性:vertical-align、text-decoration
    
    盒子模型的属性:宽度、高度、内外边距、边框等
    
    背景属性:背景图片、颜色、位置等
    
    定位属性:浮动、清除浮动、定位position等
    
    生成内容属性:content、counter-reset、counter-increment
    
    轮廓样式属性:outline-style、outline-width、outline-color、outline
    
    页面样式属性:size、page-break-before、page-break-after
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    ← 怎么实现响应式布局 如何做移动端适配→

    最近更新
    01
    vuex数据持久化怎么做
    05-22
    02
    vue的动态路由怎么配置使用
    05-22
    03
    vue权限控制一般怎么做
    05-22
    更多文章>
    Theme by Vdoing | Copyright © 2022-2022 Guoquoqiqi | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式