CSS选择器介绍

最新推荐文章于 2024-08-05 21:31:25 发布

昨夜秋风拂

最新推荐文章于 2024-08-05 21:31:25 发布

阅读量116

点赞数

分类专栏： HTML 文章标签： css html 前端

本文链接：https://blog.csdn.net/L20220927Y/article/details/127212848

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 伪类选择器

伪类即为不存在的类，特殊的类，用来描述一个元素的特殊状态。

如：第一个元素、被点击的元素、鼠标移动到的元素等

<DOCTYPT HTML>
<html lang="en">
<head>
<meta charset="uft-8"/>
<title>伪类选择器</title>
<style>
 ul>li:first-child {color: red;}
 ul>li:last-child{color: aqua;}
 ul>li:nth-child(3){color: blanchedalmond;}
</style>
</head>
<body>
<h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>
      <li>北国风光，千里冰封，万里雪飘。</li>
      <li class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
      <li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
      <li>须晴日，看红装素裹，分外妖娆。</li>
      <li>江山如此多娇，引无数英雄竞折腰。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
</body>
</html>

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

3、 :nth-child() 选中第n个子元素

特殊值： n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

以上这些伪类都是根据所有的子元素进行排序

2. 属性选择器

用来选择含有指定属性或属性值的元素

1:属性选择器

语法：[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择属性值以指定值开头的元素

[属性名$=属性值]{} 选择属性值以指定值结尾的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
<style>

[title]{color:red;}
[title=a]{font-size:40px;}
[title^=ab]{color:blue;}
[title$=abc]{background-color:withe;}
[title*=abcdab]{margin:10px;}

<style/>
</head>
<body>
    <h1 title="a" id="abcd" class="ab" >满江红·写怀</h1>
    <h3 title="ab">岳飞·宋</h3>
    <p>····</p>
    <p title="abc" class="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p title="abcdab">驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
</body>
</html>

3. 复合选择器

复合选择器有两种：

1、交集选择器

作用：选中同时满足多个条件的元素

语法：选择器1选择器2选择器3····{}

注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位

2、并集选择器

作用：同时选中满足条件的元素

语法：选择器1,选择器2,选择器3····{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
<style>

.red{ color: red;}
div#red1.red{font-size: 34px;}
h1,h3{color: yellowgreen;}

<style/>
</head>
<body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red" id="red1">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>三十功名尘与土，八千里路云和月。</div>
    <p>莫等闲，白了少年头，空悲切！</p>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
    
</body>
</html>