css选择器_3

CSS（CascadingCascadingStylesheets）是用来给网页添加样式的代码。css选择器的作用是选择一个元素，以便给它添加样式1.基本选择器通用元素选择器（*），通常用于取消浏览器自带的样式，不常用的id选择器（#id）class类选择器(.class)标签选择器(p)2.组合选择器组合选择器，E，F代表基本选择器E，F多元素选择器，用逗号隔开。匹配元素E和元素FEF后代选择器，以空格分隔。在E元素的所有后代（不仅仅是子元素，子元素的所有后代）中选择满足F选择器条件的元素E>F》子元素选择器，以>分隔。选择E元素的所有直接子元素满足F条件元素“E+F”的E元素与选择器直接相邻，用+隔开。选择与E元素相邻的下一个兄弟元素F，但必须在同一父元素内。“E~F“普通相邻选择器（兄弟选择器）。选择E元素后的元素F（无论是否直接相邻），但必须在同一个父元素中。”3.属性选择器html由元素组成，元素由标签（p/div等标签）、内容和属性（如class属性，class="haha"表示class属性的值为haha).可以通过标签的属性选择元素input[type=password]{width:30px;}[href^="http://"]{background-color:#f0ad4e;}[src$="gif"]{border:1pxsolid#ccc;}4.常用的伪类选择器E:link匹配E所有未点击的链接E:visited匹配E所有点击的链接E:active匹配mouseE元素E:hover已按下但未释放的匹配鼠标悬停在其上的E元素。a标签中设置伪类的顺序比较重要，会出现样式覆盖的情况。//如果a:visited样式放在最后，点击a链接后，hover和active都不会生效。a{颜色：红色；}a:visited{颜色：蓝色；}a:hover{颜色：绿色；}a:active{颜色：黄色；}E:focus匹配处于焦点的元素当点击输入框等元素时，光标闪烁当可以输入内容时，表示输入框处于焦点状态。E:enabled匹配表单中可用的元素。E:disabled匹配表单中禁用的E元素。E:checked匹配表单中选中的单选或复选框元素。E::selection匹配用户鼠标当前选中的元素，注意这里有两个冒号::selection{color:red;}//鼠标选中的文字会变成红色E:first-child匹配第一个子元素其父元素E的E:last-child匹配父元素的最后一个子元素，相当于：nth-??last-child(1)E:nth-child(n)匹配其父元素的第N个子元素，第一个标签为1，等同于E:first-childE:nth-last-child(n)匹配其父元素的最后N个子元素，第一个数字为1小提示：先找到E的父元素，并然后选择它下面的父元素n个元素E:nth-of-type(n)选择满足E选择器的元素的父元素，以及满足E选择器条件的子元素的不同类型（类型指到标签，比如p标签和div标签都是不同类型的第N个子元素的小提示：先找到E的父元素，n选择满足E条件的父元素下的元素，然后选择这些元素中同类型的第N个E：nth-??last-of-type(n)类似于nth-of-type(n)，但是反向匹配的一个小技巧：先找到E的父元素，然后选择其父元素下满足E条件的元素，然后反向选择这些同类型的元素第N个E：first-of-该类型的type匹配父元素下使用相同标签的第一个子元素，相当于：nth-of-type(1)E:last-of-type匹配父元素下最后一个标签相同的子元素，相当于：nth-??last-of-type(1)5.伪元素选择器Pseudo-elementselector前面有两个冒号（::），可以加在选择器的末尾来选择元素的某一部分E::first-line匹配E元素E::first-内容的第一行letter匹配E元素内容的第一行一个字母E::before在E元素内部首先生成一个伪元素，插入生成的内容可以用来清除浮动，主要是简化标签div::before{content:"aa";width:0px;}E::after最后在E元素内部生成一个伪元素，插入生成的内容6.选择器优先常见场景1.在属性后使用!important会覆盖元素样式在page.child任意位置定义{color:red!important;}2.作为样式属性写在元素标签上的内联样式3、id选择器4、classselector5、伪类选择器6、属性选择器7、标签选择器8、通配符选择器9、浏览器auto定义复杂场景：标记为ABCD1.行内样式：