CSS3总结(常用)

---

一、CSS常用属性

color: 文字颜色（前景色）
font-size: 文字大小
font-family: 字体，比如：微软雅黑， 黑体，宋体，仿宋体，”Times New Roman”等
font-style: 就是设置字形是”正体”还是“斜体”(italic）
font-weight: 设置是否粗体
background: 背景色
border: 设置边框
text-decoration: 设置“装饰线”（下划线，中划线，上划线）
text-align: 对齐
width: 宽
height: 高

二、选择器

1.基础选择器

（1）标签选择器：形式上是一个标签名

例如： P{ … } div{ … } img{ … }

（2）类选择器：.calss
类选择器的形式上是一个英文点（.）后面紧跟一个类名（className）。类名是在标签上通过class属性而设定

一个类可以供多个标签使用
一个标签可以同时设定多个类，用空格隔开。这样设定后，多个类所设定的属性都可以作用在该标签上。

（3）id选择器：#id
id选择器的形式上是一个英文井号（#）后面紧跟一个id名。id名是在标签上通过id属性而设定。我们可以自己设定id名。

一个网页中的id只能有一个（但class名可以重复）。

（4）通配符选择器： *
通配符选择器非常简单，就一个星号(*)，表示“所有标签”，同得不多。

{ …声明…}表示所有标签都应用该css样式的设定。
例如：{ font-family:“宋体”; color:#444;margin:0 auto;}

2.关系选择器

关系选择器是通过元素之间的“位置关系的特征”来确定所选元素。

（1）子代选择器：S1>S2
匹配S1中的下一级S2。下一级就是“子级”，或子代。

其中S1，S2都可以是独立使用的选择器，比如id选择器，class选择器，标签选择器等。

比如 ：

 <div class="S1">
        <P class="S2"></P>
    </div>

S1为div， S2为p，即形式为“div > p”，就表示找出div中的所有子级p标签。

又比如：

#p1>a{ … } ：表示找出id为p1的标签中的所有子代a标签。 .cc>p{ … } ：表示找出class为cc的标签中的所有子代p标签。
#p2>.cc2>img{ … } ：表示找出id为p2中的子代的class为cc2中的所有子代img标签。

（2）后代选择器：S1 S2
匹配S1内部的所有后代S2。此时就不仅仅局限于子代标签了，还包括孙代，曾孙代，等等。

简单说，就是找出放在S1所选中的标签中的所有S2所选中的标签。

div p{ … } ：匹配div中的所有后代p标签，即凡是放在div中的p标签都会找出来。
#p1 a{ … } ：匹配id为p1的标签中的所有a标签，即只要a标签在#p1中就可以。
.cc p{ … } ：匹配class为cc的标签中的所有p标签，即只要p标签在.cc中就可以。
p2 .cc2 img{ … }：匹配id为p2中的class为cc2中的所有img标签。

（3）相邻选择器：S1+S2
匹配S1后面紧挨着的同级（兄弟）元素S2。

（4）兄弟选择器：S1~S2
匹配S1后面的所有同级（兄弟）元素S2。

3.属性选择器

属性选择器是通过元素的属性的特征信息来确定所选元素。

（1）[attr]，attr表示“属性名”，表示匹配具有所给定属性名称的标签。

[color] { background: yellow; } /*能选中具有color属性的所有标签*/
[width] { border: 1px solid red; } /*能选中具有width属性的所有标签*/

（2）[attr=“val”]，表示匹配具有某个属性且属性值为给定值的标签。

[color="red"] { background: yellow; } /*能选中具有color属性且值为”red”的所有标签*/
[width="100"] { border: 1px solid red; } /*能选中具有width属性且值为”100”的所有标签*/

（3）[attr~=“val”]
匹配具有某个属性且属性值包含所给定单词的标签。

注意： ​ 必须是一个“单词”形式，比如属性值为”a dog”，则使用”dog”可以匹配，而使用”do”不能匹配。 ​
对于中文，除非有明确的空格，否则一句连续的句子（含中文标点符号）也只能算一个单词。

<p title="a dog">...</p>

[title~="dog"]{ .... } /*可以选中上面那个p标签*/

[title~="do"]{ ..... } /*可以选中上面那个p标签*/

（4）[attr*=“val”]
匹配具有某个属性且属性值包含给定的字符的标签。

<p title="a dog">...</p>
[title*="dog"]{ .... } /*可以选中上面那个p标签*/
[title*="do"]{ ..... } /*能选上*/

（5）[attr^=“val”]
匹配具有某个属性且属性值以给定的字符开头的标签。

<p title="a dog">...</p>
[title^="dog"]{ .... } /*选不上*/
[title^="a"]{ .... } /*能选上*/
[title^="a d"]{ ..... } /*能选上*/

（6）[attr$=“val”]
匹配具有某个属性且属性值以给定的字符结尾的标签。

        .box li[class^="t"]{/*class以t开头*/
            color: purple;
        }
        .box li[class$="e"]{/*class以e结尾,下面的css代码优先级高于上方*/
            color: pink;
        }
        .box li[class*="col-"]{/*class值包含col-的颜色变成绿色*/
            color: green;
        }

4.伪类选择器

伪类选择器是通过单冒号和特定的具有某种含义的单词来确定所选元素。

形式：:伪类名称{ … }

（1）:link, :visited, :hover, :active,
这4个伪类主要用于a标签的4种不同状态。

:link ——表示一个链接初始时候的状态。
:visited ——表示一个链接在访问（点击）过之后的状态。
:hover ——表示一个链接在“鼠标移上去”（鼠标悬停）的时候的状态。
:active——表示一个链接在“活动状态”的时候的状态，通常就是点击的瞬间，按住不放能看到。

对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果。

（2）E:first-child, E:last-child, E:only-child, E:nth-child(n)
这几个伪类用于表示（或选中）具有某种特征的子元素。

E:first-child ——匹配作为父元素的第一个子元素E。
E:last-child ——匹配作为父元素的最后一个子元素E。
E:only-child ——匹配作为父元素的唯一一个子元素E。
E:nth-child(n) ——匹配作为父元素的第n个子元素E。括号中的n是一个具体数字 ，还可以这样用：nth-child(2n+1)表示奇数项， nth-child(2n+2)表示偶数项 。

       li:nth-child(3){
            color: hotpink;
        }/*第n个孩子*/
        li:nth-child(2n+1){
            color: greenyellow
        }/*获得奇数孩子*/
        li:nth-child(odd){
            color: greenyellow
        }/*获得奇数孩子*/
        li:nth-child(2n){
            color: lightslategrey;
        }/*第偶数个孩子*/
        li:nth-child(even){
            color: lightslategrey;
        }/*第偶数个孩子*/

（4）E:empty，E:checked，E:enabled，E:disabled

E:empty匹配元素内部为空（没有内容）的元素。其中“内容”指的是一个标签内是否有其他html代码或文字。显然，单标签内是不可能有内容的。
E:checked 匹配被选中的元素（用于input且type为radio或checkbox的时候）
E:enabled匹配“可用的/有效的元素”（用于表单元素）。 E:disabled匹配“不可用的/有效的元素”（用于表单元素）。

5.伪元素选择器

伪元素选择器是通过双冒号（::）和特定的具有某种含义的单词来确定所选元素。

伪元素选择器通常是“本没有这个元素（标签）”，但会创建出一个隐性元素并对其进行样式设定。

伪元素选择器又称为“伪对象选择器”。

（1）E::before
表示在元素E的内部的最前面创建一个元素（伪元素）。
其中必须写上一个属性：content:”内容”; //当然，内容可以为空。

        .two::before{
            content: "tttttt";
        }/*在div前面加入文本*/

（2）E::after
表示在元素E的内部的最后面创建一个元素（伪元素）。
其中必须写上一个属性：content:”内容”; //当然，内容可以为空。

        .two::after{
            content: "hhhhhh";
        }/*在div后面加入文本*/

（3）E::selection
表示将元素E中“选中的文字”单独作为一个元素（伪元素）。

（4）E::first-letter
表示元素E中的“第一个字符”可以单独作为一个元素（伪元素）。

        .one::first-letter{
            color: seagreen;
            font-size: 30px;
            font-weight: bold;
            float: left;
            padding:20px ;
            text-shadow: 2px 2px 2px coral;/*第一个值左右，值越大越向右，第二个值上下，值越大越向下，第三个值模糊强度，值越大越模糊*/
        }/*对首字母的操作*/

（5）E::first-line
表示元素E中的“第一行”可以单独作为一个元素（伪元素）。

        .one:first-line{
            color: red;
        }/*对第一行文字操作*/