CSS 选择器详解

CSS选择器详解

css的基本语法形式如下所示：

• 选择器{属性名：属性值；属性名：属性值；……}
• 注意: 属性和值中间使用冒号分开,属性之间用分号(都是英文)
• 选择器语法符号的含义
  E： 代表“Element”，即元素；
  S： 代表“Seletor”，即选择器；
  attr： 代表“attribute”，即属性；
  下面直接用这些符号代替中文

css就是对html标签的一些外观上的修改,那选择器就是要选择哪个标签

选择器分类

1 通配符选择器

2 标签选择器

3 类选择器

4 id选择器

5 属性选择器

6 伪类选择器

7 伪元素选择器

8 关系选择器

9 选择器组合

---

选择器只是选择要修改的标签, 只是工具, 没有好坏之分,也没有顺序之分,只有常用的和不常用

---

1 通配符选择器

• 通配符 : * (星号)
• 会匹配页面所有的元素,设定一些网页的基本通用属性
• 语法格式:

  	*{
  		margin:0
  		padding:0
  	}
  

---

2 标签选择器

• 按HTML的标签名分类,为某一类指定一种样式

• 可以把某一类标签全部选择出来,不能设计差异化样式 (不常用)

• 语法格式:

  div{
  		background: yello;
  	}
  

---

3 类选择器

• 用英文的点"."标识,后面紧跟类名

• 只要类名一样,那就都选中(常用但不单独出现)

• 语法格式:

  	.类名{
  		属性1:属性值1;
  		属性2:属性值2;
  	}
  

---

4 id选择器

• 用# 号进行标识,后面紧跟id名

• 元素的id是唯一的,只能对对应文档的某一个具体元素

• 语法格式:

  	#id名{
  		属性1:属性值1;
  		属性2:属性值2;
  	}
  

---

5 属性选择器

• [attr] --attr表示:属性名 不常用 ,都用css修改html样式了,那html自带的属性根本就不写了,怎么选中,很少用
  匹配具有所给定属性名称的标签。

  [color] { background: yellow; }	  //能选中具有color属性的所有标签。
  

• [attr=“val”]
  匹配具有某个属性且属性值为给定值的标签。

  [color=”red”] { background: yellow; }		//能选中具有color属性且值为”red”的所有标签。
  

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

  <p  title=”a  dog”>...</p>
  [title~=”dog”]{ .... }		//可以选中上面那个p标签
  [title~=”do”]{ ..... }			//选不上。。。
  

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

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

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

  <p  title=”a  dog”>...</p>
  [title^=”dog”]{ .... }		//选不上
  [title^=”a”]{ .... }			//能选上
  [title^=”a  d”]{ ..... }		//也可以选上
  

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

---

6 伪类选择器

• 概念 :
  伪类选择器是通过单冒号（：）和特定的具有某种含义的单词来确定所选元素。
  伪类的名称是css标准中所预先设定的，我们不能自己设定。可用的伪类名不多。

• :link, :visited, :hover, :active 这四个伪类主要用于表示一个链接（也就是a标签）的4种不同状态。
  它们可以设定一个链接在不同状态下的外观表现（样式表现）。

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

  注意 :
  :hover可以用于其它标签，并且经常用！
  对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果

• E:focus 表示一个元素在成为可输入状态（获得焦点）的时候，主要用于表单元素。

• E:first-child, E:last-child, E:only-child, E:nth-child(n)

  • E:first-child ——匹配作为父元素的第一个子元素E。

    li:first-child{ ... }		//表示作为第一个子元素的li标签
    

  • E:last-child ——匹配作为父元素的最后一个子元素E。

    td:last-child{ ... }		//表示作为最后一个子元素的td标签
    

  • E:only-child ——匹配作为父元素的唯一一个子元素E。

    p:only-child{ ... }		//表示作为父元素中只有这一个子元素的p标签
    

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

    li:nth-child(2){ ... }		//表示作为第2个子元素的li标签
    

• E:empty，E:checked，E:enabled，E:disabled

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

---

7 伪元素选择器

伪元素选择器是通过双冒号（：：）和特定的具有某种含义的单词来确定所选元素。
伪元素选择器通常是“本没有这个元素（标签）”，但会创建出一个隐性元素并对其进行样式设定。
伪元素选择器又称为“伪对象选择器”。

• E::before

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

• E::after

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

• E::first-letter

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

• E::first-line

  • 表示元素E中的“第一行”可以单独作为一个元素（伪元素）。

• E::selection

  • 表示将元素E中“选中的文字”单独作为一个元素（伪元素）。
  • 比如我在浏览器选中一些文字,那这些被选中的文字就会改变

---

简单的选择器说完了,但是网页里面的盒子(div)都是一个套一个,而且正常网页元素都很多 , 所以光上面的这几种选择器是不够的,无法精准的选择要修改的某个标签 , 所有选择器都是搭配着使用的

---

8 关系选择器

• 概念 : 关系选择器是通过元素之间的“位置关系的特征”来确定所选元素
• 子代选择器：S1>S2
  匹配S1中的下一级S2。下一级就是“子级”，或子代。
• 后代选择器：S1 S2
  匹配S1内部的所有后代S2。
• 相邻选择器：S1+S2
  匹配S1后面紧挨着的同级（兄弟）元素S2。
• 兄弟选择器：S1~S2
  匹配S1后面的所有同级（兄弟）元素S2。

---

8 选择器组合

选择器的组合是将多个不同形式的选择器组合起来以确定所选元素。

• E.className

  举例：
  div.c1{ .... }
  p.cc2{ .... }
  

• E#id

  div#id1{ ... }
  p#id2{ ... }
  

• E[属性选择器]

  • [src] //找所有有src属性的标签
  • img[src] //找img标签并且有src属性
  • img[src*=”dog”] 找img标签并且有src属性并且属性中包含“dog”这个字符！

• 并集选择器：S1, S2
  两个选择器，可以使用一个英文逗号（,）连接起来。
  表示这两个选择器，都使用同样一个样式设定（属性设定）。

  p, div{ ... }
  #price, .addr{ ... }
  p.cc,  .cc,  div  .cc2{ ... }