二、CSS之——选择器

html-css023

二、CSS之——选择器,第1张

作用:通过元素选择器可以选择页面中的所有指定元素

语法:标签名{}

作用:通过元素的class属性值选中一组元素

语法:.class属性值{}

id选择器

作用:通过元素的id属性值选中唯一的一个元素

语法:#id属性值{}

复合选择器(交集选择器)

作用:可以选中同时满足多个选择器的元素

语法:选择器1选择器2选择器N{}

选择器分组(并集选择器)

作用:通过选择器分组可以同时选中多个选择器对应的元素

语法:选择器1,选择器2,选择器N{}

通配选择器

作用:可以用来选中页面中的所有的元素

语法:*{}

元素之间的关系:

父元素:直接包含子元素的元素

子元素:直接被父元素包含的元素

祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素

后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素

兄弟元素:拥有相同父元素的元素叫做兄弟元素

作用:选中指定元素的指定后代元素

语法:祖先元素 后代元素{}

有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素。

给链接定义样式:

有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4中不同的方式。

其他:

否定伪类

否定伪类可以帮助我们选择不是其他东西的某种东西。

语法: :not(选择器){}

比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。

语法:

[属性名]

[属性名 = "属性值"]

[属性名 ~= "属性值"]

[属性名 ^= "属性值"]

[属性名 |= "属性值"]

[属性名 $= "属性值"]

[属性名 *= "属性值"]

作用:选中指定父元素的指定子元素

语法:父元素 >子元素

比如body >h1将选择body字标签中的所有h1标签

IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系,还可以根据兄弟关系查找元素。

语法:

兄弟元素 + 兄弟元素 :查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素:查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。

比如:

这两个选择器都会选择h1元素,如果两个选择器设置的样式不一样那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用哪个样式呢?CSS中会默认使用权重较大的样式,下面看一下权重又是如何计算的。

不同的选择器有不同的权重值:

使用 * 可为所有元素设置样式。

根据标签为元素设置样式

同时设置多个元素组合

类选择器是为一类状态声明样式规则,下面是把文本居中定义为类样式。

将类选择器指定为具体标签。这样样式的权重就提高了

注意span.help-block不能写成 span .help-block。标签选择器和类选择器中间加了空格的话,就变成了 span下面所有class是help-block的选择器了

HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素内的元素(不只是子元素,是后代元素,子集,孙子级,所有的。。。)。

子元素选择器中选择子元素,不包括孙级及以下元素。

用于选择紧挨着的同级兄弟元素。

用于选择后面的所有指定的兄弟元素或者所有元素。

为具有 class 属性的h1标签设置样式

约束多个属性

具体属性值设置样式

^ 以指定值开头的元素

$ 以指定值结尾的元素

属性内部任何位置出现值的元素,包含关系

~ 属性值中包含指定词汇的元素

| 以指定值开头或以属性连接破折号的元素

伪类选择器hover可以在鼠标移到链接上时设置一些特殊样式,比如字体大小,背景颜色,显示隐藏等等。

注意:伪类选择器hover 可以作用于所有元素,不仅仅是链接。

与hover类似的选择器还有link,visited,active。 link 选择器可以设置未被访问过的链接样式, visited 选择器可以设置已被访问过的链接样式,active选择器可以设置被激活的链接样式。不清楚的同学可以参考 CSS视频教程。

用法1:当鼠标经过链接时改变其自身的样式(hover后面直接接样式)

描述:当鼠标经过时,a标签的字体颜色变为红色,字体变大,

用法2:用伪类选择器hover控制其子元素的样式(hover后面加空格再接要改变元素的样式)

描述:当鼠标经过时div时,其子元素的颜色变为紫色,字体变大,出现红色边框,

用法3:当鼠标经过时控制其兄弟元素的样式(hover后面加“+”再接要改变元素的样式)

描述:鼠标经过时其兄弟元素的背景颜色变为黄色,字体变大,