css选择器

css选择器有多种，主要可以分为五大类：基本选择器、层次选择器、伪类选择器、伪元素、属性选择器、

一、基本选择器

   1.通配符选择：[ * ]

       eg:   *{width:10px;   }

   2.元素选择器：[ .  ]

eg:  .classA{ width:10px;}

   3.id选择器：[ # ]

eg:  #name{ width:10px; }

   4.标签选择器：[ p ]

eg: p{ width:10px; }

二、层次选择器

    1.后代选择器：[.box p ]

     eg:

<div class="box">
<p>1</p>
<p>2<P>
<p>3<P>
</div>

     .box p{ width:10px; }

  2.子元素选择器：[ .box>p ]

eg:  .box>p{width:10px;}

  3.兄弟选择器： [ .demo+div]

三、伪类选择器

   1.动态伪类选择器： [ E:link,E:visited,E:active,E:hover,E:focus ]

    2.目标伪类选择器：[ E:target ]

    3.状态伪类选择：    [ E:checked, E:enabled, E:disabled]

    4.结构伪类选择器:   [E:first-child, E:last-child, E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:first-of-type, E:last-of-type, E:only-child, E:only-of-type, E:empty]

四、伪元素选择器

  1.  ::first-letter 用来选择文本的第一个字母，常用于文本排版方面

 2.  :: first-line   用于匹配元素的第一行文本，也是常用于文本排版

 3.  ::before,   ::after,和常用的：before于：after相似

 4 . ::selection  用来匹配突出显示的文本

五、属性选择器

  1. attr：比如ID属性：a[id=test]

  2.name属性：a[ name=come]

六、样式继承

1.可继承的样式

字体：font、color、font-family、font-size（继承计算后的值）、font-size-adjust、font-stretch 、font-style 、                    font-style 、text-underline-position 、font-variant 、 text-transform line-height、letter-spacing 、word-spacing

文本：text-indent 、text-align 、layout-flow 、writing-mode 、white-space 、word-wrap 、text-kashida-space 、                   layout-grid 、layout-grid-char 、layout-grid-char-spacing 、layout-grid-line 、layout-grid-mode 、

            layout-grid-type

列表：list-style 、list-style-image 、list-style-position 、list-style-type

表格：border-collapse 、border-spacing 、caption-side 、empty-cells 、table-layout 、speak-header

2.不可继承的样式

字体：text-decoration 、text-shadow

文本：text-overflow 、vertical-align 、direction、unicode-bidi 、word-break 、line-break 、text-autospace、text-justify 、ruby-align 、ruby-overhang 、ruby-position 、ime-mode

背景：background、background-origin 、background-clip 、background-size 、background-attachment 、background-color、background-image 、background-position 、background-positionX 、background-positionY 、background-repeat 、layer-background-color 、layer-background-image

定位：position 、z-index 、top、right 、bottom 、left

尺寸：height 、max-height 、min-height 、width、max-width 、min-width

布局：clear 、float、clip 、overflow、overflow-x、overflow-y、display、visibility

外补丁：margin 、margin-top 、margin-right 、margin-bottom 、margin-left

内补丁：padding 、padding-top 、padding-right 、padding-bottom 、padding-left

轮廓：outline、outline-color 、outline-style 、outline-style 、outline-width

边框：border、border-color 、border-style 、border-image 、border-radius 、box-shadow、border-width 、border-top 、border-top-color 、border-top-style 、border-top-width 、border-right 、border-right-color 、border-right-style 、border-right-width 、border-bottom 、border-bottom-color 、border-bottom-style 、border-bottom-width 、border-left 、border-left-style 、border-left-width

列表：marker-offset

其他：cursor、zoom

七、选择器优先级：

   1.基础：

ID选择器 > 类选择器，属性和伪类选择器 >  标签选择器

   2.权值：

id选择器优先级很高，权值为100

class、属性和伪类选择器的权值为10

标签选择器权值为1

文章参考：

https://misok.github.io/2015/03/10/display:none%E5%92%8Cvisibility:hidden%E7%9A%84%E5%8C%BA%E5%88%AB/