CSS选择器

最新推荐文章于 2025-03-06 12:11:45 发布

weixin_34221036

最新推荐文章于 2025-03-06 12:11:45 发布

阅读量40

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/heyuheitong/p/4024870.html

本文深入解析CSS选择器的使用方法，包括类选择器、ID选择器、属性选择器等，并通过实例展示了如何在HTML文件中应用这些选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：代码部分，上面都是html，下面为css，如果放在.css文件中，就不用谢<style></style>，如果放在.html文件中，需放在<head></head>中。

1）类选择器——调用元素的class：

<div class="div1"></div>

<style>
 .div1 {margin:auto;}
<!--或者用下面的-->
div.div1 {margin:aotu;}
</style>

2）ID选择器——调用元素的id：

<div id="div2"></div>

<style>
#div2 {margin:10px;}
</style>

3）属性选择器——调用含某属性的某元素：

<a href="xx.html">会变颜色</a>
<a>不会变颜色</a>

<style>
a[href] {color:red;}
</style>

所有带有title属性的元素都会改变：

<a title="a">a</a>
<a title="b">b</a>

<style>
[title] {color:red;}
/*或*/
*[title] {color:red;}
</style>

还可以指定包含特定具体属性值的元素：title="a"的会变成红色字

<a title="a">a</a>
<a title="b">b</a>

<style>
[title="a"] {color:red;}
/*或*/
*[title="a"] {color:red;}
</style>

根据部分属性值选择：

<a title="a b">a</a>
<a title="b">b</a>

<style>
[title~="a"] {color:red;}
/*或*/
*[title~="a"] {color:red;}
</style>

4）子串匹配属性选择器

类型	描述
[href^="com"]	选择 abc 属性值以 "def" 开头的所有元素
[href$="com"]	选择 abc 属性值以 "def" 结尾的所有元素
[href*="com"]	选择 abc 属性值中包含子串 "def" 的所有元素

<a href="comb.com">blue</a>
<a href="baidu.com">green</a>
<a href="yahoo.com.cn">red</a>

<style>
    [href^="com"] {color:blue}
    [href$="com"] {color:green}
    [href*="com"] {color:red}
</style>

5）后代选择器——调用某个元素内的元素

<div id="bg">
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
</div>

<style>
#bg ul{margin:10px;}
</style>

6)子元素选择器

　　这里与后代选择器需要区分下，只有cd会变成红色：

<h1>ab<em>cd</em>ef</h1>
<h1>gh<b><em>ij</em></b>kl</h1>

<style>
    h1>em {color:red}
</style>

结合后代选择器、子选择器：www.baidu.com会变红

<div class="div1">
    <a href="www.baidu.com"><b>www.baidu.com</b></a>
    <a href="www.sina.com">www.sina.com</a>
</div>
<div class="div2">
    <a href="www.baidu.com"><b>www.baidu.com</b></a>
    <a href="www.sina.com">www.sina.com</a>
</div>


<style>
　　div.div1 a > b {color:red}
</style>

7）相邻兄弟选择器

　　注意的就是虽然是table+ul，但只有ul中的适用了样式，只从第二个兄弟开始变，第一个不变

<html>
<body>
　　<table>...</table>
　　<ul>...</ul>
</body>
</html>

<style>
html > body table + ul {margin-top:20px;}
</style>

转载于:https://www.cnblogs.com/heyuheitong/p/4024870.html