css基础（待补充）

切慕溪水

2019-11-04

css选择器

基础选择器

1.标签选择器：针对一类标签

注意：选择的所有，而不是一个。

<style type="text/css">
 p{
    font-size:14px;
 }
</style>
<p>css</p>

2.ID选择器：针对某一个特定的标签使用，只能使用一次

注意：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID。

<style type="text/css">
#mytitle{
    border:3px dashed green;
}
</style>
<h2 id="mytitle">你好</h2>

3.类选择器：针对你想要的所有标签使用，优点：灵活

（特性1：类选择器可以被多种标签使用。特性2：同一个标签可以使用多个类选择器。用空格隔开）
注意：
（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

<style type="text/css">
.oneclass{
    width:800px;
}
</style>
<h2 class="oneclass">你好</h2>

4.通用选择器（通配符）：针对所有的标签都适用（不建议使用）

<style type="text/css">
*/*定义通用选择器*，希望所有标签的上边距和左边距都为0*/{
    margin-left:0px;
    margin-top:0px;
}
</style>

高级选择器

1.后代选择器: 定义的时候用空格隔开（含类选择器、id选择器都是可以的）

注意：只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

<style type="text/css">
    h3 b i{
        color:red ; 
    }
</style>

2.交集选择器

注意：选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。
css基础（待补充）

<style type="text/css">
  h3.special{
    color:red;
  }
</style>

3.并集选择器：定义的时候用逗号隔开

p,h1,#mytitle,.one/*定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{
    color:red;
}

4.伪类选择器

一、结构（位置）伪类选择器（ : ）
1、:first-child
2、:last-child
3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)

<body>
    <ul>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
        <li>我是第四个</li>
        <li>我是第五个</li>
        <li>我是第六个</li>
        <li>我是第七个</li>
        <li>我是第八个</li>
        <li>我是第九个</li>
        <li>我是第十个</li>
    </ul>
</body>
<style type="text/css">
    ul li:first-child{
        /* 选择第一个li */    
        background: rgb(228, 22, 22);
    }
    ul li:last-child {
        /* 选择最后一个li */
        background: rgb(109, 18, 212);
    }
    ul li:nth-child(6){
        /* 选择第n个li */
        background: rgba(140, 214, 19);
    }
    ul li:nth-child(2n){
        /* 选择偶数li（注：n=0,1,2,3,4……） */
        font-size: 20px;
    }
    ul li:nth-child(2n+1){
        /* 选择奇数li（注：n=0,1,2,3,4……） */
        font-size: 12px;
    }
</style>

二、属性选择器（[ ]）
1、[ 属性 ]
2、可以和正则表达式混用，如 $ 和 ^ 和 *

<body>
    <ul>
        <li class="test">我是第一个</li>
        <li class="two123">我是第二个</li>
        <li class="twotabc">我是第三个</li>
        <li class="abcfour">我是第四个</li>
        <li class="ggg-four">我是第五个</li>
        <li class="bug">我是第六个</li>
        <li class="bug_ee">我是第七个</li>
        <li class="hhbug">我是第八个</li>
        <li class="bug345">我是第九个</li>
        <li class="test">我是第十个</li>
    </ul>
</body>
<style type="text/css">
        ul li[class=test] {
            /* 选择有属性为class=test的li（第一个和第十个） */
            background: rgb(206, 25, 25);
        }
        ul li[class$=four]{
            /* 选择属性里结尾有four的类名的li（第四个和第五个）*/
            background: rgb(106, 9, 216);
        }
        ul li[class^=two]{
            /* 选择属性里开头有two的类名的li（第二个和第三个） */
            background: rgb(54, 201, 10);
        }
        ul li[class*=bug]{
            /* 选择属性里所有带有bug的类名的li（第六、七、八、九个） */
            font-size: 30px;
        }
 </style>

css权重的等级划分

什么是权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。

每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、::before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

权重的计算实例

1、实例一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->

2、实例二：

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->

伪类和伪元素

伪类和伪元素的区别（CSS3下的区别）

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。

而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
所以可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。

除了上面这个本质区别以外，在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

1.伪类

CSS3给出的定义是：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种：

1.格式化DOM树以外的信息。比如： <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

2.伪元素

CSS3给出的定义是：伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。

用法

::before

在被选元素之前插入内容。需要指定content属性来插入内容。

::after

在被选元素之后插入内容。需要指定content属性来插入内容。

<p>CSS</p>
<style type="text/css">
    p::before {
      content: "Hi,";
    }
    p::after {
      content: "Css";
    }
</style>

::first-letter

匹配元素中文本的首字母。

::first-line

匹配元素中第一行的文本(只能在块元素中使用)。

::selection

匹配被用户选中的部分。

元素

元素是文档结构的基础。在HTML中，最常用的元素很容易被识别，如平p、table、span、a、和div。文档中的每个元素都对文档的表现起一定的作用。在css中，至少在css2.1中，这意味着每个元素生成一个框（box，也称为盒），其中包含元素的内容。

替换和非替换元素

尽管css依赖于元素，但并非所有元素都以同样的方式创建。元素通常有两种形式：替换和非替换。

替换元素

替换元素是指用来替换元素内容的部分并非由文档内容直接表示。在HTML中，最熟悉的替换元素的例子就是img元素，它由文档本身之外的一个图像文件来替换。实际上，img没有具体的内容，通过一下的简单例子可以了解这一点。

<img src='howdy.gif'>

这个标记片段不包含任何具体内容，只有一个元素名和一个属性。除非将其指向一个外部内容。否则这个元素没有任何意义。
input元素与之类似，取决于input元素的类型，要由一个单选按钮、复选框或文本输入框替换。替换元素显示时也生成框。

非替换元素

大多数HTML元素都是非替换元素。这意味着，其内容由用户代理（通常是一个浏览器）在元素本身生成的框中显示。
例如:

<span>hi there</span>

这就是一个非替换元素。段落、标题、表单元格、列表和HTML中的几乎所有元素都是非替换元素。

元素显示角色

除了替换和非替换元素，css2.1还使用另外两种基本元素类型：块级元素和行内元素。

块级元素

块级元素生成一个元素框，(默认的)它会填充其父元素的内容区，旁边不能有其他元素。换句话说，它在元素框之前和之后生成了“分隔符”。替换元素可以是块级元素，不过通常都不是。

行内元素

行内元素在一个文本行内生成一个元素框，而不会打断这行文本。行内元素最好的例子就是HTML中的a元素。行内元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素内容中，而不会破坏其显示。

css第一个元素 css选择器 css css样式