css选择器

常用的有:

  • 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的所有元素

非常用的有:

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

伪类选择器

  1. :link :选择未被访问的链接
  2. :visited:选取已被访问的链接
  3. :active:选择活动链接
  4. :hover :鼠标指针浮动在上面的元素
  5. :focus :选择具有焦点的
  6. //css3
  7. :first-of-type 父元素的首个元素
  8. :last-of-type 父元素的最后一个元素
  9. :only-of-type 父元素的特定类型的唯一子元素
  10. :only-child 父元素中唯一子元素
  11. :nth-child(n) 选择父元素中第N个子元素
  12. :nth-last-of-type(n) 选择父元素中第N个子元素,从后往前
  13. :last-child 父元素的最后一个元素
  14. :root 设置HTML文档
  15. :empty 指定空的元素
  16. :enabled 选择被禁用元素
  17. :disabled 选择被禁用元素
  18. :checked 选择选中的元素
  19. :not(selector) 选择非 <selector> 元素的所有元素

属性选择器

  1. [attribute] 选择带有attribute属性的元素
  2. [attribute=value] 选择所有使用attribute=value的元素
  3. [attribute~=value] 选择attribute属性包含value的元素
  4. [attribute|=value]:选择attribute属性以value开头的元素
  5. //css3
  6. [attribute*=value]:选择attribute属性值包含value的所有元素
  7. [attribute^=value]:选择attribute属性开头为value的所有元素
  8. [attribute$=value]:选择attribute属性结尾为value的所有元素

伪元素选择器

  1. :first-letter :用于选取指定选择器的首字母
  2. :first-line :选取指定选择器的首行
  3. :before : 选择器在被选元素的内容前面插入内容
  4. :after : 选择器在被选元素的内容后面插入内容

权重与优先级

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

!Important > 行内样式+1000 > id选择器+100 > 属性选择器、class或者伪类+10 > 元素选择器、伪元素+1 > 通配符(*)+0

继承属性

在css中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性
关于继承属性,可以分成:

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

``` 继承中比较特殊的几点:

  • 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