二、CSS之——选择器

html-css0329

二、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中会默认使用权重较大的样式,下面看一下权重又是如何计算的。

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

1、先确保代码没有错别字;2、提升这个选择器的优先级,排除掉优先级不够高的可能;3、这个选择器的书写一定要确保在英文输入状态下,包括空格;4、检查css中在这个选择器的前面代码有没有输入错误,如:有其他字符在大括号的外面

本文讨论另一个重要的CSS特征:选择器,它可以用来在一个页面内选择元素风格化Web页。选择器类型CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器,类型选择器,类选择器,ID选择器,祖先选择器,子孙选择器,邻接兄弟选择器和属性选择器进行选择。这里我们将分别来看一下这几种方法(邻接兄弟和属性除外,我们将在下周进行讨论)。注意:浏览器对CSS选择器的支持是不一致的,不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。通用通用选择器允许你在整个页面中使用样式。基本上说来,一个样式并不指定具体的元素,类等,所以它适用于页面内的所有元素。这对设置颜色,字体等来说十分有用。通用选择器可用于页面上的所有元素,但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号(*)来表示一个通用选择器。列表A演示了如何使用通用选择器来为页面设定背景和默认的字体。类型风格化元素的一种最常用方法是通过它的类型。也就是说一个特定的元素拥有自己定义的样式,且这个样式可用于该类型的所有元素而不管元素在页面上的位置。列表B中的例子演示了用一个类型选择器来风格化页面中的所有段元素。使用这种类型选择器,叶面内的所有段落元素(除非被更多特定选择器覆盖)拥有特定的页边距和红色文本。现在你也可以自己建立CSS类来处理页面上的特定元素风格化问题。类在决定一个样式覆盖什么内容时,类选择器比类型选择器有更多的控制。由类选择器定义的样式可以用于具有类属性的所有元素,不管该元素在页面中的位置。它可以很好的控制那些元素接受样式。列表C中的例子演示了使用类只格式化页面中的第一段。所以第一段的是锯齿状的字体,而接下来的段落与此不同。类选择器不能使用HTML 保留的元素如heading,p,h1等等。你还可以通过用空格分开的方法对同一个元素使用多个类。列表D演示了使用多个类来风格化一个特定的段落。你可以将类选择器和类型选择器结合在一起使用,来风格化拥有分配的类的某些元素。在这个场景中,当定义样式时,元素名有一个由空格隔开的类名。列表E中的例子演示了这样的技巧,即仅拥有赋予的特定类名的段元素才风格化为某种方式,而拥有相同类名的头部风格化为另一种形式。