当前位置: 移动技术网 > IT编程>网页制作>HTML > css选择器与权重问题-----------一、四种基本选择器

css选择器与权重问题-----------一、四种基本选择器

2020年07月24日  | 移动技术网IT编程  | 我要评论
css选择器1、标签选择器标签选择器选择的是整个html页面所有包含这个标签的元素,经常用于描述共性,没办法特殊的选择改变某一个元素例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css选择器</title> <style> p{ color: blue;

css选择器

1、标签选择器

标签选择器选择的是整个html页面所有包含这个标签的元素,经常用于描述共性,没办法特殊的选择改变某一个元素
例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        p{
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <h1>大家好</h1>
    <p>欢迎大家</p>
    <h3>观看我的博客</h3>
    <p>谢谢大家</p>
    <p>中国万岁</p>
</div>
</body>
</html>

效果展示:
在这里插入图片描述
我用标签选择器选择了所有的p标签并改变了他们的颜色,但是我并没有办法单独的改变任意一个p标签的颜色与其他p标签不同。
总结:
1、所有的标签比如ul、li、label、dt、dl、input、div等都可以用标签选择器来选择
2、运用标签选择器多选中的标签并不是单独的一个,而是所有运用这个标签的元素都会被选中

2、id选择器(针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。)

以上面这个例子来说,我想把中国万岁这四个字变成红色而其他的字保持不变运用标签选择器就不能满足了,这时我们可以选用id选择器,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        p{
            color: blue;
        }
        #red{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <h1>大家好</h1>
    <p>欢迎大家</p>
    <h3>观看我的博客</h3>
    <p>谢谢大家</p>
    <p id="red">中国万岁</p>
</div>
</body>
</html>

实现效果:
在这里插入图片描述
任何的标签都可以有id属性,不过就像我们人有身份证一样,id就像是标签的身份证,每个标签的id都不相同且只能使用一次。标签的名字可以任取但是要注意以下几点:

  1. 只能有字母、数字、下划线
  2. 必须以字母开头。
  3. 大小写严格区分,也就是说aa,和AA是两个不同的ID

类选择器(用点来定义)

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        p{
            color: blue;
        }
        #red{
            color: red;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
<div>
    <h1>大家好</h1>
    <p>欢迎大家</p>
    <h3>观看我的博客</h3>
    <p class="green">谢谢大家</p>
    <p id="red">中国万岁</p>
</div>
</body>
</html>

展示效果:
在这里插入图片描述
类选择器与id选择器有些相似,但是相比于id选择器类选择器更加的灵活,同一个html中类选择器可以被多次重复使用。但是为了后面写js方便,我们一般默认标签上都用类选择器,写js的时候用id选择器。也就是类上样式,id上行为

通配符(*)

通用选择器,将匹配任何标签。不建议使用,IE有些版本不支持,大网站增加客户端负担。
一般重置网页的时候有些时候会用到。例如:

*{
            margin: 0;
            padding: 0;
        }

页面上的效果
在这里插入图片描述

本文地址:https://blog.csdn.net/my__road/article/details/107520517

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网