标签：注意   指定元素   情况下   select   体验   选择器   开头   inf   :hover   

1.CSS

• 层叠样式表
• 网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式，而最终我们能看到的只是网页的最上边的一层
• 总之一句话，css用来设置网页中元素的样式

内联样式，行内样式

在标签内部通过style属性来设置元素的样式

hello world!

• 内联样式不能实现css样式的复用，因此开发时绝对不要使用内联样式

内部样式表

• 将样式编写到head中的style标签中
• 然后通过CSS选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用

缺点：不能多个HTML页面使用

外部样式表（最佳样式）

• 可以将CSS样式表编写到一个外部的CSS文件中
• 通过link标签引入css文件

• 外部样式需要通过link标签进行引入，所有网页都可以对其进行引入
• 使用外部样式表，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

2.CSS的基本语法

2.1注释

/* */

2.2CSS的选择器

通过选择器可以选中页面中的指定元素

• 比如p的作用就是选中页面中所有的指定元素

2.2.1常用选择器

元素选择器

• 作用：根据标签名来选中指定的元素
• 语法：标签名
  例子：p{},h1{},div{}

id选择器

• 作用：根据元素的id属性值选中一个元素
• 语法：#id属性值
• id不能重复

#red{
      color: red;
}

类选择器

• 作用：class是一个标签的属性，他和id类似，但是可以多个元素用同一个class
• 语法：.class{}

.blue{
      color:blue;
}

• 可以同时为一个元素指定多个class属性

hello world

通配选择器

• 作用：选中页面中的所有元素
• 语法：*

*{
      color:red;
}

2.2.2复合选择器

交集选择器

• 作用：选中同时符合多个条件的元素
• 语法：选择器1选择器2选择器3{}
  注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{
      font-size:30px;
}

并集选择器（选择器分组）

• 作用: 同时选择多个选择器对应的元素
• 语法： 选择器1，选择器2，选择器3{}

让元素h1和span都受到color:green；渲染
h1,span{
      color:green;
}

2.2.3关系选择器

html中的元素关系

父元素，子元素，祖先元素，后代元素，兄弟元素

子元素选择器

• 作用：选中指定父元素的指定子元素
• 语法：父元素 > 子元素
• 范围： 直接子元素（只包括儿子辈）

为div直接包含的span设置一个字体颜色
而其子元素p下的span因为没有直接被div包含而不受到影响

      

            我是一个div
            

                  我是div中的p元素
                  我是p元素中的span
            
            我是div中的span元素**被选中**
      

      

            
                  我是div外的span
            **被选中**
      

• 如果只想选中第一个div下的span,只需要给其加一个class并识别食客

      

            我是一个div
            

                  我是div中的p元素
                  我是p元素中的span
            
            我是div中的span元素**被选中**
      

      

            
                  我是div外的span
            **被选中**
      

后代元素选择器

• 作用：选中指定元素内的指定后代元素
• 语法：祖先 后代
• 范围：选中所有满足条件的后代，（不是子元素选择器的只有直接后代才行）

div span{
      color:skyblue;
}

兄弟元素选择器

• 作用：选择下一个兄弟（并行关系）
• 语法：前一个，下一个

选择p后面的span（后面的，离得最近的）
p + span{
      color:red;
}

选择下边所有的兄弟
p ~ span{
      color:red;
}

2.2.4属性选择器

根据元素的属性选择

• 语法：元素[属性名]{}，元素[属性名=属性值]{}

元素[属性]{}

[属性]{}  *[属性]{}//前面不写则默认为*，搜索所有元素的属性

[属性名 ^= 属性值]{} //选择属性值以指定值开头的元素
[属性名 $= 属性值]{} //选择属性值以指定值结尾的元素
[属性名 *= 属性值]{} //选择属性值中含有某值的元素

      
a
      
b
      
c

2.2.5伪类、伪元素选择器

伪类（不存在的类，特殊的类）

• 伪类用来描述一个元素的特殊状态
  比如：第一个子元素，被点击的元素，鼠标移入的元素
• 伪类一般情况下都是使用：开头

排序位置的伪类

根据所有的子元素排序

• :first-child 第一个子元素
• :last-child 最后一个子元素
• :nth-child() 选中第n个子元素
  • :nth-child(n) 选中所有子元素
  • :nth-child(2) 选中第二个子元素
  • :nth-child(2n):nth-child(even)选中偶数位的子元素
  • :nth-child(2n+1):nth-child(odd)选中奇数位的子元素

根据同类型的伪类进行排序

• :first-of-type
• :last-of-type
• :nth-of-type()
  这几个伪类在功能上和上述类似，不同点是他们是在同类型元素中进行排序

2.3CSS的声明块

通过声明块来指定要为元素设置的样式

• 声明是一个名值对结构，一个样式名对应一个样式值

否定伪类

将符合条件的元素从选择器中去除

超链接的伪类

• link表示没访问过的链接

a.link{

}

• visited表示访问过的链接

a.visited{
      
}

以上两个伪类只适用于a
由于隐私的原因，visted这个伪类只能修改链接的颜色

• :hover用来表示鼠标移入的状态

a:hover{
      color:aqua;
      font-size: 50px;
}

• :active 用来表示鼠标点击
  a:active{

}

伪元素选择器

不存在的元素

• ：：开头

• ::first-letter
  元素内容的第一个字母

p::first-letter{            //选中p元素中的第一个字母
      font-size:50px;
}

hello world!

• ::first-line
  表示第一行

• ::selection 表示选中的内容

p::selection{
      background-color:greenyellow;
}

• ::after
  befor和after在开发中用的非常多
  元素最后的位置

• ::before
  元素开始的位置
  before和after必须结合content使用

div::before{
      content:"abc";
      color:blue;
}
div::after{
      content:"xyz";
      color:blue;
}

CSS（一）-- CSS的基本语法，选择器，伪元素，伪类

标签：注意   指定元素   情况下   select   体验   选择器   开头   inf   :hover   

原文地址：https://www.cnblogs.com/psyduck/p/14286162.html