有哪些CSS选择器可以用来控制样式?

html-css0154

有哪些CSS选择器可以用来控制样式?,第1张

ID名选择器

#con {

    border: 1px solid red

  }

代码解析:表示找到ID名为con的元素,并为元素设置1像素、实线、红色边框。

类名选择器

.con {

       border: 1px solid red

   }

代码解析:表示找到类名为con的元素,并为元素设置1像素、实线、红色边框。

标签选择器

div {

    border: 1px solid red

  }

代码解析:表示找到标签名为div的元素,并为元素设置1像素、实线、红色边框。

后代选择器

.con p {

    border: 1px solid red

  }

代码解析:表示找到为类名为con里的所有p元素,并为元素设置1像素、实线、红色边框。需要注意的是不单单是子代受到影响,所有的后代均会受到影响。

子代选择器

.con > p {

    border: 1px solid red

  }

代码解析:表示找到为类名为con里的子代p元素,并为元素设置1像素、实线、红色边框。需要注意的是只是子代受到影响,而非所有的后代均会受到影响。

群组选择器

.con p, .box {

    border: 1px solid red

  }

代码解析:表示找到为类名为con里的所有p元素,并为元素设置1像素、实线、红色边框;找到类名为box的元素,并为元素设置1像素、实线、红色边框;

常见的CSS选择器如上,还有伪类、属性、通配符选择器以及CSS3新增的大量选择器,可以查看《CSS选择器以及选择器优先级》

1:文本的大小:fint-size:14px

2:文本的行高(可能文本的占用高度太高吧这里可以行高。):line-height: 2.0后面的2.0可以自

己改。

3:文本的加粗:font-weight:bold

可以使用CSS的expression,仅限于IE5-IE7上使用,代码如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title>Test Expression</title>

<style type="text/css">

a {star : expression(onload=this.title="111111111111")}

</style>

</head>

<body>

    <a href="a.htm">a.htm</a>

    <a href="b.htm">b.htm</a>

</body>

</html>

效果如下: