CSS3学习笔记之基本选择器

最新推荐文章于 2024-08-21 16:08:40 发布

atleks

最新推荐文章于 2024-08-21 16:08:40 发布

阅读量498

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/atleks/article/details/38966595

版权

要使某个样式应用于HTML元素，首先需要找到该元素，在CSS中执行这一任务的表现规则称为CSS选择器。

CSS3选择器有如下几种：

本文讨论基本选择器，通过基本选择器可以确定HTML树形结构中大多数的DOM元素，分为如下几类

选择器	类型	功能描述
*	通配选择器	选择文档中所有的HTML元素
E	元素选择器	选择指定类型的HTML元素
#id	ID选择器	选择指定ID属性为"id"的任意类型元素
.class	类选择器	选择指定class属性值为“class”的任意类型的任意多个元素
selector1，selectorN	群组选择器	将每一个选择器匹配的元素集合并

从浏览器兼容性上来说，浏览器对基本选择器都是支持的。

下面用代码样例看一下基本选择器的使用，创建一个HTML文件，如下：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>使用CSS基本选择器</title>
    <style type="text/css">
        * {margin: 0; padding: 0}
        .clearfix:after,.clearfix:before{display: table;content: ""}
        .clearfix:after{clear: both;overflow: hidden}
        .demo {width: 250px; border:1px solid #ccc; padding: 10px; margin: 20px auto}
        li {list-style: none outside none; float: left; height: 20px;
            line-height: 20px; width: 20px; border-radius: 10px;
            text-align: center; background: #f36; color: green; margin-left: 5px;}
    </style>
</head>
<body>
    <ul class="clearfix demo">
        <li class="first" id="first">1</li>
        <li class="active">2</li>
        <li class="important item">3</li>
        <li class="important">4</li>
        <li class="item">5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li class="last" id="last">10</li>
    </ul>
</body>
</html>

显示效果如下：

通配选择器：

通配选择器可以用来选择所有元素，也可以选择某个元素下的所有元素，例如：

* {margin: 0; padding: 0;}

表示将所有元素的margin和padding设置为0，下面，将上述html文件中所有项的背景颜色设置为orange

在上述HTML文件CSS样式的最后添加如下代码：

.demo *{background:orange}

显示效果如下：

元素选择器：

元素选择器是CSS中最常见，最基本的选择器，文档的元素包括HTML，body，p，div，ul，li等，下面通过ul元素选择器改变整个列表的背景颜色，在上述HTML CSS代码的最后增加如下语句：

ul {background:grey}

显示效果如下：

ID选择器:

在使用ID选择器之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素，ID选择器具有唯一性，在一个页面不会出现id相同的属性值。

在CSS中使用id选择器时，需要在id属性值得前面加上#号，如#id，下面使用ID选择器来修改li中id为first和last的表象的背景颜色和前景颜色：

在CSS代码后面增加如下代码：

#first {background:lime;color:#000}
#last {background:#000;color:lime}

显示效果如下:

类选择器：

类选择器在一个页面中可以由多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个，在HTML的CSS代码最后增加对class值为item的元素代码，修改其背景颜色，字体颜色和加粗，如下：

.item {background:green;color:#fff;font-weight:bold}

显示效果如下：

类选择器还有一种用法就是多类选择器，通过两个或者两个以上类选择器合并，来定义有别于一个类名的元素效果，例如，在CSS代码最后增加如下样式：

.item.important {background:red}

显示效果如下：

即，只会修改同时具有item和important两个class的元素，缺一不可。

CSS选择器还支持带标签名的类选择器，例如只修改ul标签中class为block的元素的背景颜色，可以增加如下CSS样式：

ul.block {background:#ccc;}

群组选择器：

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间用逗号分开，例如，刚好有好几个选择器需要将对应的元素的文字设置为灰色的时候，可以写为类似如下形式：

h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#666666; }

这样写起来比较简洁。

参考资料：

《图解CSS3：核心技术与案例实战》

atleks

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记之基本选择器

  要使某个样式应用于HTML元素，首先需要找到该元素，在CSS中执行这一任务的表现规则称为CSS选择器。   CSS3选择器有如下几种：   本文讨论基本选择器，通过基本选择器可以确定HTML树形结构中大多数的DOM元素，分为如下几类
复制链接

扫一扫