web中的部分选择器

选择器{
属性名：属性值；
}

选择器类型

基本选择器

标签选择器

一次性把网页所有一类的标签选出来，如   p   div   a   li

类选择器(class选择器)

1.结构：.类名 { css属性名：属性值； }

2.作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

3.注意点：

• 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
• 类名可以由数字、字母、下划线、中划线组成，class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以
• 一个标签可以同时有多个类名，类名之间以空格隔开
• 类名可以重复，一个类选择器可以同时选中多个标签

        <p class="one"></p>   class人名

        <p class="A">段落1</p>

        <p class="B">段落1</p>

        <p class="C">段落1</p>

        .A{} , .B{} , .C{} ......

id选择器

1.结构：#id属性值 { css属性名：属性值； }
2.作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
3.注意点：
（1）所有标签上都有id属性
（2）id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
（3）一个标签上只能有一个id属性值，可以重复利用,不能以数字开头
（4）一个id选择器只能选中一个标签

<p id="one"></p>

<p id="A">段落1</p>

<p id="B">段落1</p>

<p id="C">段落1</p>

#A{} , #B{} , #C{} ......

通配符选择器

1.结构：* { css属性名：属性值； }
2.作用：找到页面中所有的标签，设置样式
3.注意点：
（1）开发中使用极少，只会在极特殊情况下才会用到
（2）在基础班小页面中可能会用于去除标签默认的margin和padding

*{

             margin: 0;  //外间距

             padding: 0;  //内间距

}

包含选择器

子代选择器（>亲生儿子）

父元素直接包含子元素,子元素直接被父元素包含

1. 选择器语法： 选择器1 > 选择器2 { css }；例如 .box>strong{color:pink;}
2.作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
3.效 果： 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
4.注意点：  子代只包括：儿子 ；子代选择器中，选择器与选择器之前通过 > 隔开

<ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>

后代选择器（后代所有）

祖先元素直接或间接的包含后代元素

ul li：

1. 选择器语法： 选择器1 选择器2 { css }；例如 .box a{color:red;}
2.作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
3. 效 果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
4.注意点： 后代包括：儿子、孙子、重孙子…… 后代选择器中，选择器与选择器之前通过 空格 隔开

逗号选择器

逗号选择器：div，
                    p，
                    span{}

div{
}
a{
}                       =》  div,
                            a,
                            p{
                                  }
p  {
}

属性选择器

属性选择器使用的[ ]  用于input标签,它是html标签的属性来选择元素，如input[type="password"]

属性选择器一共有7种写法

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]

input[type="password"]{}


*：包含
input[type*="m"]{}

^以……开头
input[type^="te"]{}


$：以……结尾

<input type="text">
<input type="password">
<input type="email">
<input type="number">

结构伪类选择器

1.原理：能够使用 结构伪类选择器 在HTML中定位元素
2.作用：根据元素在HTML中的结构关系查找元素( 根据html结构选择标签 )
3.优势：减少对于HTML中类的依赖，有利于保持代码整洁( 选择方便,省去了很多类名 )
4.场景：常用于查找某父级选择器中的子元素

父元素    子元素:nth-child(n)    :父元素第n个子元素
even：偶数
odd：奇数

:first-child   第一个子元素

:last-child    最后一个子元素

:nth-child()   选中第n个元素

关于:nth-child()的特殊值(括号内的内容可以填写以下几种)

        n   第n个   n的范围0到正无穷（全选）

        even或2n    选中偶数位的元素

        odd或2n+1   选中奇数位得到元素

以child结尾的是在所有元素中选择

:first-of-type  第一个子元素

:last-of-type   最后一个子元素

:nth-of-type()    选中第n个元素

E:nth-child()   ；先看nth-child

E:nth-of-type（）       先看E，对所有的E进行编码，然后再看:nth-of-type（）

:hover================鼠标经过时 

a:hover div{
对div的更改
}

           <a> 
        <div>
        </div>
           </a>

a:hover+div{
对div更改的
}

 <a></a>
<div></div>

伪元素选择器

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常见的几个伪元素：

::first-letter    表示第一个字母

::first-line       表示第一行

::selection     表示选中的元素

::before         元素开始的位置前

::after            元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

：：before       content:"~"
::after  content:"~"
::selection