IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

ed3a5ea043cb416fa229ee97c392197d.jpg

 

HTML有标签,CSS就有选择器,选择器就是赋予内部或者外部样式表的名字,当查找到一个或多个HTML元素后,再通过声明属性加样式。常用的样式选择器包括:HTML选择器、类选择器、ID选择器、组合选择器、关联选择器、伪类和伪元素。

 

1  HTML选择器

HTML选择器,即HTML的标签,用来改变一个指定标签的样式。任何HTML元素都可以是一个CSS的选择器,用于找到和选择器同名的HTML元素。如下所示:

721701da1c784fea886609b03a58c42f.jpg

 

2  类选择器

同一个选择器能有不同的类(class),因而允许同一个元素有不同的样式。例如,开发者也许希望交替显示段落的背景颜色。

167528bc341f445d90755a6d3388624a.jpg

这些类可以在HTML的<p>标签中使用class属性引用,每个<p>元素指定一个类名。如下所示:

aa922ce22eea462f9e3a3755d4bb4afa.jpg

以上的例子建立了两个类:dark-row和light-row,供HTML的<p>元素使用,并通过class属性在HTML中指明元素使用的类。类的声明也可以不需要相关的元素,只要定义类选择器时不加点(.)前面的HTML标记即可,这样这个类就可用于任何元素。如下所示:

.note { font-size: small }                /*  为note的类可以被用于任何元素  */

类名是自定义的,一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观命名。上述例子中的note类也可以命名为small,但如果开发者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

另外,一个HTML元素可以同时使用多个类选择器,同样使用class属性指定多个类名,但多个类名之间要使用“空格”分开。如下所示:

<p class="one two three">第一段</p>    /* 为p元素指定了one、two和three三个类 */

 

3  id选择器

在HTML页面中,id属性指定了某个单一元素,id选择器用来对这个单一元素定义单独的样式。ID选择器的应用和类选择器类似,只要把class换成id即可。它们的不同之处在于,id用在唯一的元素上,而class则用在不止一个元素上。定义ID选择器要在ID名称前加上一个“#”号,这和类选择器相同。例如,ID选择器可以指定如下:

#main { text-indent: 3em }            /* 在ID名称main前加上一个“#”号  */

在下面的例子中,使用id属性匹配id="main"的段落元素<p>:

<p id="main">文本缩进3em</p>          <!-- 在HTML的p标记中指定id属性值为main  -->

posted on 2019-10-29 08:29  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航