CSS简介与选择器

1.CSS

CSS的声明块由标签/其他选择器{属性:属性值;}格式组成

- 内部样式表：把css代码直接写在现有的HTML标签中

缺点：样式的复用率较低

优点：样式与结构分离

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

- 外部样式表：css单独存在于文档中等待使用

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。

<link rel="stylesheet" type="text/css" href="文件的路径"/>
<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

2.CSS选择器

标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性​

格式：标签名称{属性:值;}

example:(h/a/img/ul/ol/dl/input....)

id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性​ 

格式:​ #id名称{​属性:值;​}​ 

类(class)选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:​ .类名{​ 属性:值;​ }

后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性​

格式:​ 标签名称1 标签名称2{​ 属性:值;​ }​ 

example:  div p{}

子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性​

格式:​ 标签名称1>标签名称2{​ 属性:值;​ }

example: .div1>p{}

后代选择器和子元素选择器之间的区别?​

后代选择器使用空格作为连接符号​ 子元素选择器使用>作为连接符号​ -后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中​ 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

后代选择器和子元素选择器之间的共同点​

后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器​ -后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去​ 选择器1>选择器2>选择器3>选择器4{}​ 7.在企业开发中如何选择​ 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器​ 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

交集选择器

​作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性​

格式:​ 选择器1选择器2{​ 属性: 值;​ }​ 

example: p.p1{}

并集选择器

作用: 给所有选择器选中的标签设置属性

格式:​ 选择器1,选择器2{​ 属性:值;​ }​

example: .div1,div2{}

兄弟选择器

相邻兄弟选择器 CSS2​ 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性​ 

格式:​ 选择器1+选择器2{​ 属性:值;​ }​

通用兄弟选择器 CSS3​ 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性​

格式:​ 选择器1~选择器2{​ 属性:值;​ } 

伪类选择器

 伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

-序选择器（结构伪类选择器）：

        :first-child 选中同级别中的第一个标签​

        :last-child 选中同级别中的最后一个标签

        :nth-child(n) 选中同级别中的第n个标签

        :nth-child(odd) 选中同级别中的所有奇数​

        :nth-child(even) 选中同级别中的所有偶数

        :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

-动态伪类选择器：

        E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

         E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

        E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上​

        E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上

其中，a标签的伪类选择器如果一起出现，则存在有严格的顺序要求：

默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active​ 

- 否定伪类

        作用：可以从已选中的元素中剔除出某些元素​ 

        语法：​ :not(选择器)​

- 伪元素选择器

        ::after​在元素最后添加内容

        ::before​在元素最前添加内容

        一般需要结合content这个样式一起使用

        ::first-letter​ 为第一个字符设置样式

        ::first-line为第一行字符设置样式

-属性选择器

        input[type=password]{}

        <input type="text" name="" id="">

         <input type="password" name="" id="">

        CSS2中：[attribute|=value]，搜索value开头并被-和其他内容隔开的name

        CSS3中：[attribute^=value]，只要是value开头都可以被搜索到

-通配符选择器

        作用: 给当前界面上所有的标签设置属性

        格式:​ *{​ 属性:值;​ }​ 

CSS三大特性

-继承性

        ​ 作用: 给父元素设置一些属性, 子元素也可以使用

- 层叠性

        作用: 层叠性就是CSS处理冲突的一种能力

- 优先级（就近原则，选择器越是详细，优先级越高）

        作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定