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元素，从最后 一个子项计数