你一定要知道的CSS选择器

左手的ㄟ右手 2022-12-29 09:13 156阅读 0赞

#### 什么是选择器： ####

每一条css样式定义由两部分组成，形式如下：

[code] 选择器{
    样式;
    }

\[/code\] 在\{\}之前的部分就是“选择器”， “选择器”指明了\{\}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

#### 基础选择器 ####

*  **标签选择器（选择标签名）**：一个完整的HTML页面是有很多不同的标签组成，而 标签选择器，则是决定哪些标签，采用相应的CSS样式；  
    如：

p{
    color:#900;
    font-size:12px;
    background:#090;
    }

*  **ID选择器（\#号+ID名）**：ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次；

如：

#demoDiv{
    color:#FF0000;
    }

*  **类选择器（.+class名）**：类选择器根据类名来选择,前面以”.”来标志；

如：

.demoDiv{
    color:blue;
    }

*  **通用选择器（选择全部元素）**：通用选择器用\*来表示；  
    如：

* {
    color:green;
    font-size: 12px;
    }

*  **群组选择器**：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔；  
    如：

p,h1,span{
    color:red;
    line-height:20px;
    }

#main p, #sider span {
    color:#000;
    line-height:26px;
    }

使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。

#### 层次选择器 ####

*  **子选择器** (元素之间用>分割)：子选择器（child selector）是指它的直接后代，可以理解为作用于子元素的第一个后代;  
    如：

p>span{
    color:red;
    }

*  **后代选择器**（元素之间用空格分隔)：用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开  
    如：

section span{
    color:blue;
    }

**子选择器与后代选择器的区别：**  
1）子选择器（child selector）仅是指它的直接后代，而后代选择器是作用于所有子后代元素；  
2）子选择器是通过“>”进行选择，而后代选择器通过空格来进行选择；

*  **兄弟选择器**（元素之间用+分隔):除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器;  
    如：

h1 + p {
    color:blue;
    }

#### 伪类选择器 ####

伪类可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。

*  **动态伪类选择器**  
    动态伪选择器的书写顺序：  
    1）link和visited必须放在最前面（无先后顺序,静态伪类选择器）；  
    2）link和visited只能用于a标签；  
    3）link和visited后面是focus  
    4）focus后面是hover；  
    5）hover后面是active；
 *  **结构伪类选择器**  
    first-child：第一个元素。  
    last-child：最后一个元素。  
    nth-child(n)：某一个元素 想选择第几个，n就取值多少。  
    nth-child(-n+m)：选中前m个元素 n起始值是0。  
    nth-of-type(n)：选中第n个元素。  
    nth-last-child(n)：选中倒数第n个元素.
 *  **否定伪类选择器**  
    元素名：not（n）除了某个元素，其它元素添加样式

#### 伪元素选择器： ####

所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器；

*  :first-letter，设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；

div p:first-letter {
    font-size: 20px
    }
    //选择div元素里所有的p元素的第一个字母或汉字;

*  :first-line：设置第一个文本行样式；

.box .main:first-line {
    color: #f00
    } 
    　//只有部分属性允许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height

*  :before：设置之前的样式，可以插入生成的内容，并设置其样式；

body:before {
    content: 'The Start:'; 
    display: block;
    }
    //在body元素前插入文本内容'The Start:'，并设置其为块元素

*  :after：设置之后的样式，可以插入生成的内容，并设置其样式；  
    例：

body:after {
    content: 'The End.';
    display: block;
    }
    //在body元素最后插入文本内容'The End.'，并设置其为块元素

*  input::-webkit-input-placeholder（修改输入框提示信息样式）

#### 属性选择器 ####

是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；也可以同时匹配多个属性；

*  格式：元素名称\[属性名+“属性值”\]

input[type=“text”]

*  格式： 元素名\[属性名^=属性值开头的内容\]  
    选中以XXX开头的元素

input[type^=“te”]+span{ 
    color:red;
    }

*  格式： 元素名\[属性名 $ =属性值结尾的内容\]  
    选中以XXX结尾的元素