EasyClick Html UI 第十节 CSS选择器

Posted 2022-02-18 Mr -老鬼

EasyClick html UI 第十节 CSS选择器

CSS 选择器

css 选择器是用来选择标签的，选出来以后给标签加样式。

CSS 选择器的种类

1. 标签选择器
2. 类选择器
3. 层级选择器(后代选择器)
4. id选择器
5. 组选择器
6. 伪类选择器

标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。
示例

<style type="text/css">
    p
        color: red;
    
</style>

<div>hello</div>
<p>hello</p>

类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。
示例

<style type="text/css">
    .bluecolor:blue
    .bigfont-size:20px
    .boxwidth:100px;height:100px;background:gold 
</style>

<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

层级选择器(后代选择器)

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。
示例

<style type="text/css">
    div p
        color: red;
    
    .conwidth:300px;height:80px;background:green
    .con spancolor:red
    .con .pinkcolor:pink
    .con .goldcolor:gold    
</style>

<div>
    <p>hello</p>
</div>

<div class="con">
    <span>哈喽</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
示例

<style type="text/css">
    #boxcolor:red 
</style>

<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。
示例

<style type="text/css">
    .box1,.box2,.box3width:100px;height:100px
    .box1background:red
    .box2background:pink
    .box2background:gold
</style>

<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例

<style type="text/css">
    .box1width:100px;height:100px;background:gold;
    .box1:hoverwidth:300px;
</style>

<div class="box1">这是第一个div</div>

总结

• css 选择器就是用来选择标签设置样式的
• 常用的 css 选择器有六种，分别是:
• 1. 标签选择器
• 2. 类选择器
• 3. 层级选择器(后代选择器)
• 4. id选择器
• 5. 组选择器
• 6. 伪类选择器

---

交流QQ群：620028786，647082990，772810035
————————————————— 版权声明—————————————-————
版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明：本文所有的教程仅限交流学习使用不得用于违法用途，造成的法律后果本人不承担责任。