zoukankan      html  css  js  c++  java
  • css 选择器及样式属性

    一、选择器

      1、css主要有7中基本选择器

    • ID选择器:#id
    • 类选择器:.class
    • 属性选择器:a[href="qqq.com"]
    • 标签选择器:body
    • 伪类选择器::hover、:link、:active、:visited、:focus、:first-letter
    • 伪元素选择器:::before
    • 通配符选择器:*

      2、css选择器优先级     

             important > 内联样式(style) > id > class=伪类=属性选择器 > 标签选择器=伪元素 > 通配符

      3、其他选择器

    element,element

    div,p

    选择所有<div>元素和<p>元素

    element element

    div p

    选择<div>元素内的所有<p>元素

    element>element

    div>p

    选择所有父级是 <div> 元素的 <p> 元素

    element+element

    div+p

    选择所有紧接着<div>元素之后的<p>元素

    element1~element2

    p~ul

    选择p元素之后的每一个ul元素

    二、可以继承的样式属性

        当元素的一个继承属性(inherited property)没有指定值时,则取父元素的同属性的值。

            1、字体属性:

    font 组合字体
    font-family 规定元素的字体系列
    font-weight 设置字体的粗细
    font-size 设置字体的尺寸
    font-style 定义字体的风格
    font-variant 偏大或偏小的字体

            2.文本系列属性

    text-indent 文本缩进
    text-align 文本水平
    line-height 行高
    word-spacing 增加或减少单词间的空白
    letter-spacing 增加或减少字符间的空白
    text-transform 控制文本大小写
    direction 规定文本的书写方向
    color 文本颜色

            3.表格布局属性

    caption-side 定位表格标题位置
    border-collapse 合并表格边框
    border-spacing 设置相邻单元格的边框间的距离
    empty-cells 单元格的边框的出现与消失
    table-layout 表格的宽度由什么决定<automatic.fixed.inherit>

            4.列表布局属性

    list-style-type 文字前面的小点样式
    list-style-position 小点位置
    list-style 以上的属性可通过这属性集合 


            5.引用

    quotes 设置嵌套引用的引号类型

            6.光标属性

    cursor 箭头可以变成需要的形状



    三、部分伪类

    :first-of-type

    p:first-of-type

    选择每个p元素是其父级的第一个p元素

    :last-of-type

    p:last-of-type

    选择每个p元素是其父级的最后一个p元素

    :only-of-type

    p:only-of-type

    选择每个p元素是其父级的唯一p元素

    :only-child

    p:only-child

    选择每个p元素是其父级的唯一子元素

    :nth-child(n)

    p:nth-child(2)

    选择每个p元素是其父级的第二个子元素

    :nth-last-child(n)

    p:nth-last- child(2)

    选择每个p元素的是其父级的第二个子元素,从最后 一个子项计数

    :nth-of-type(n)

    p:nth-of-type(2)

    选择每个p元素是其父级的第二个p元素

    :nth-last-of-type(n)

    p:nth-last-of- type(2)

    选择每个p元素的是其父级的第二个p元素,从最后 一个子项计数

  • 相关阅读:
    sqlplus时报Linux-x86_64 Error: 13: Permission denied
    thrift之TTransport层的缓存传输类TBufferedTransport和缓冲基类TBufferBase
    Java实现 蓝桥杯 算法提高 新建Microsoft world文档
    Java实现 蓝桥杯 算法提高 新建Microsoft world文档
    Java实现 蓝桥杯 算法提高 快乐司机
    Java实现 蓝桥杯 算法提高 快乐司机
    Java实现 蓝桥杯 算法提高 队列操作
    Java实现 蓝桥杯 算法提高 队列操作
    Java实现 蓝桥杯 算法提高 文本加密
    Java实现 蓝桥杯 算法提高 合并石子
  • 原文地址:https://www.cnblogs.com/Lyh1997/p/14654044.html
Copyright © 2011-2022 走看看