CSS背景以及选择器的知识

2021-09-14 00:00:27 阅读：160 来源： 互联网

CSS的背景

1、backgound_color:transparent/color

2、backgound-image:添加背景图；none(无背景图，默认)，url{url}

3、backgound-repeat:对象背景铺排方式；（repeat/no-repeat/repeat-x/repezt-y）

<style>
    body{
        background-color: #eee;
        background-image: url("OI.jpg");   //默认repteat
        background-repeat:repeat-y ;
    }
</style>

4、backgound-position:设置对象的背景图像位置；（x-number/top/center/bottom/y-number/left/right/）

5、backgound-attachment:背景图像的滚动位置：（scroll/fixed）

6、background:设置背景的复合写法。

backgound:color image repeat attachment postion

CSS伪类选择器

伪类：专门用来表示元素的一种特殊状态

常用的伪类选择器：

1、 a标签的伪类：link未访问状态 visited已被访问状态

hover:鼠标悬停状态 active:用户激活

2、focus:获得焦点

<style>  
input:focus{
     outline: 1px solid hotpink;
  }
</style>

3、first-child/last-child:nth-child(number)

  <style>
  ul li:first-child{
      color: red;
  }
</style>

属性选择器：

[属性名]：包含有指定属性名的元素

<style>
.hao[title]{
    font-weight: bold;
}
</style>


<div class="hao" title="内容">dix</div>

[属性名=值]：属性名的值为指定的元素

<style>
input[name=hi]{
        background: blueviolet;
    }
</style>

[属性名~=值]：属性名的值为指定的元素

[属性名^=值]：属性名的值并以指定值的开头的元素

[属性名$=值]：属性名的值并以指定值的结尾的元素

关系选择器

1、空格：后代选择器；

h1 strong{                 //样式对所以的子类都有用
    color: slateblue;

2、>：只选择儿子元素；

 h1>strong{                 //只有第二层的儿子元素才能用样式
    color: slateblue;
}

3、+：兄弟选择器

ul li+li{
    color: brown;
    list-style-type: none;
}

<ul>
    <li>li2</li>
    <li>li2</li>
    <li>li2</li>
    <li>li2</li>
    <li>li2</li>
    <li>li2</li>
</ul>

从第二个使用该样式；

CSS伪元素：

1、CSS伪元素与伪类的区别：伪类用于已经存在的元素处于某个状态时，添加相应的样式，根据用户的行为变化而变化；

而伪元素是用于创建一些不在文档树中的元素，并为其添加样式；，用户虽然可以看到这些文本，但是文本不在文档树中；

2、特点：都不会出现在源文档或者文档树中；

大小写不敏感；

伪类可以出现在任何地方，伪元素只能在只能跟在选择器中；

有些伪类是互斥的，而它可以同时用在一个元素上

3、：before/:after/:first-letter/:first-line:前面可以是一个冒号，也可以是双冒号；

：：select/：：placeholder/：：backdrop,前面必须是双冒号

标签：知识,伪类,color,元素,repeat,选择器,CSS,属性
来源： https://blog.csdn.net/qq_58877067/article/details/120278265

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS背景以及选择器的知识