CSS选择器

目录

CSS基本选择器

 延伸：

1.组合选择器：

2.伪类选择器

3.伪元素

4.属性选择器

---

CSS基本选择器

/*1. CSS  id选择器*/

#idname{

  }
不可重复，唯一

/*2. CSS  类选择器*/

 .classname{

 }

/*3. CSS  标签选择器   （慎用）*/

 元素名{
 
 }

选中页面中某一固定的的标签

/*4. CSS  通用选择器*/

 * {
 
 }

选中页面中的所有标签

/*5. CSS  分组选择器（逗号选择器）*/

元素1,元素2,元素3,.....{

}

多个选择器共用一个样式

 延伸：

1.组合选择器：

/*后代选择器 (空格)-----------------选择 <div> 标签内所有的 <p> 标签*/

div p{

}


/*子选择器 (>)----------------------选择父级是 <div> 的所有 <p> 标签*/
div>p{

}

/*相邻兄弟选择器 (+)-----------------选择紧随 <div> 后的 <p> 标签*/
div+p{

}

/*通用兄弟选择器 (~)-----------------选择属于 <div> 元素的同级元素的所有 <p> 元素*/
div~p{

}

2.伪类选择器

2.1锚伪类

/* 没有访问的链接 */
a:link {
 
}

/* 已经访问的链接 */
a:visited {
 
}

/* 鼠标放上去的效果 */
a:hover {
  
}

/* 鼠标已经点击时的效果 */
a:active {

}

2.2  :first-child-----------伪类与指定的元素标签匹配：该元素是另一个元素的第一个子元素。

eg:

选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：

p:first-child{

}

2.3  :last-child -----------伪类与指定元素标签匹配；该元素是另一个元素的最后一个元素。

eg:

选择器匹配作为任何元素的最后一个子元素的的任何<p>元素

p:last-child{

}

2.4   :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

eg:

选择器匹配属于其<p>元素的第 2 个子元素

p:nth-child(2){

}

2.5   :focus 选取获得焦点的元素。

2.6   :root  选择元素的根节点。

3.伪元素

3.1  ::first-letter  选择每个标签元素的首字母。

3.2  ::before   选择在每个标签元素之前插入内容。

3.3  ::after    选择在每个标签元素之后插入内容。

3.4  ::first-line    选择每个标签元素的首行。 

3.5  ::selection   用户鼠标选取的部分。

4.属性选择器：（通过属性反向选择标签）

4.1   [ 元素属性 ] -----------------------选择带有该元素属性的所有元素。

4.2   [ 元素属性  =    *** ]--------------选择带有该元素属性值等于***的所有元素。

4.3   [ 元素属性 ~=   *** ]--------------选择包含"***"一词的所有该元素属性的所有元素。

4.4   [元素属性  |=  *** ]----------------选择带有以"***"开头的所有该元素属性的所有元素。

4.5    元素[元素属性 ^= "***"  ]--------------选择其元素属性值以"***"开头的每一个该元素。

4.6    元素[元素属性 $= "***"  ]--------------选择其元素属性值以"***"结尾的每一个该元素。

4.7    元素[元素属性 *= "***"  ]--------------选择其元素属性值包含"***"的每一个该元素。