CSS-学习笔记四

1、*用于匹配任何的标记

2、>用于指定父子节点关系

3、E+F毗邻元素选择器，匹配所以紧随E元素之后的同级元素F

4、E~F匹配所以E元素之后的同级元素F

5、名称[表达式]

     [att=val]

     [att^=val]

     [att$=val]

     [att*=val]

6、伪类

     6.1  :hover, :link , :active , :visited , :focus

     6.2  :disabled , :enabled , :checked , :read-only , :read-write

     6.3  :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) , :first-child , :last-child , :nth-last-of-type(n) , :first-of-type , last-of-type

     6.4  not()

7. 伪元素

    ::before    ::after

    ::first-letter    ::first-line

    ::selection

/*>表示只获得一级子元素，可以比较和d#1 p的区别*/
#d1>p {
    color :red;
}

#d1{
    width :150px;
    height :150px;
    border :solid 1px black;
}

/* + 获取和.c1平级的并且是挨着的元素*/
.c1+div{
    color :blue;
}

#d2{
    width :150px;
    height :100px;
    border :solid 1px black;
}

/* ~ 获取~之后的所有同级元素*/
.c2~div{
    color :pink ;
}
#d3{
    width :150px;
    height :150px;
    border :solid 1px black;
}

/* a下面定义了href 或 title 属性的元素*/
a[href]
{
    color :blue;
}

/*定义title=b的元素*/
a[title =b]
{
    color:red;
}

/*^=表示以什么开头*/
a[href^=www]{
    font-size :32px;
}

/*$=以什么结尾*/
a[href$=html]{
    color :green ;
}

/* *=内容里面包含什么的*/
a[href*=tao]{
    color :orange ;
}

/*伪类，这里替代了class*/
i:first-child {
    color :mediumpurple;
}

/*这里必须遵循love hate原则  Link visited hover active 只有满足这个顺序，才能使这四个伪类都起作用
    这四个伪类对其他标签一样存在效果
*/
/*a:link超链接没点击之前的样式*/
a:link{
    font-style:italic;
}

a:visited {
    color:aqua;
}

/*a:hover鼠标放在超链接时的样式*/
a:hover {
    color :yellow ;
}

/*a:activer鼠标点击超链接那一刻时的样式*/
a:active {
    color :black ;
}

/*当获取焦点的时候*/
input:focus {
    color :red;
}

/*获取到被禁用的元素
    :disabled{
    } 这个代表所有被禁用的元素
*/
input:disabled {
    color :blue;
}

/*获取checked元素，没测试成功*/
:checked {
    font-size :30px;
}

/*获取checked元素*/
/*:read-only {
    color :mediumpurple;
}*/

/*默认情况下就是又可以读又可以写*/
:read-write {
    color :greenyellow ;
}

/*这个元素：1，是它的父标签的第n个 2, 是P标签*/
p:nth-child(2){
    color:green ;
}

/*这个元素：1.是它的父元素的倒数第n个元素 2. 是P元素*/
p:nth-last-child(2){
    color :pink;
} 

/*这个元素：父元素的第n个P元素*/
p:nth-of-type(2){
    color :yellow ;
}

/*这个元素：父元素的倒数第n个P元素*/
p:nth-last-of-type(2){
    color :aqua;
} 

/*这个元素：1，是它的父标签的第1个 2, 是P标签*/
p:first-child {

}

/*这个元素：1.是它的父元素的倒数第1个元素 2. 是P元素*/
p:last-child {

}

/*这个元素：父元素的第1个P元素*/
p:first-of-type{

}

/*这个元素：父元素的倒数第1个P元素*/
p:last-of-type{

}

/*class不等于c1的pre标签*/
pre:not(.c1){
    color :red;
}

/*获取所有disabled的input标签
input:not(:enabled){

}
获取所有read-only的input标签
input:not(:read-only){

 }
*/

/*在P标签前面添加内容*/
p::before {
    content :"加在前面：";
}

/*在P标签后面追加内容*/
p::after{
    content :"加在后面...";
}

/*p标签的第一个字母
p::first-letter {

}
p标签的第一行
p::first-line {

}*/

/*选择内容的时候，字体和底板呈现什么颜色*/
::selection {
    color :red;
    background-color :#00F;
}