首页 > 其他分享 >2 css基本选择器

2 css基本选择器

时间:2023-08-18 15:55:48浏览次数:32  
标签:基本 元素 id 选择符 选择器 class css 属性

2 基本选择器

image

id选择器

id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式为:

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该语法中,id名即为HTML元素的id属性值。大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于HTML中某一个具体的元素。
id选择器不支持像类选择器那样定义多个值,类似"id="bold font24""的写法是错误的。

class选择器

class选择器使用“.”进行标识,后面紧跟class名,其基本语法格式为:

.class名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签名选择器

通过元素的属性名或属性值来匹配元素。例如,[type="text"]选择器匹配所有type属性为"text"的元素。

input[type="text"]{
	boeder: 1px solid blue;
}
通配选择器
语法:*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

说明:通配符的写法是“*”,其含义就是所有元素。
*{margin:0;padding:0;}代表清楚所有元素的默认边距值和填充值。

作用是:有些标签他默认是带有边距和间隔的,这个通配选择器就是选择所有的标签删除所有的边距的。

/*
#id         # id选择符 
element     # 元素选择符
.class      # claw43ss选择符  
selector1, selector2, selectorN   # 同时获取多个元素的选择符

$("#id")
$(".class")
$("element")
$(".class,p,div")
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
           #i1{
               color: red;
           }
           .c1{
               color: red;
           }
           .c2{
               font-size: 32px;
           }
    </style>
</head>
<body>

<div id="i1">item1</div>
<div id="i2">item2</div>
<div id="i3">item3</div>

<div class="c1 c2">item4</div>
<div class="c1">item5</div>
<div class="c1">item6</div>

</body>
</html>

标签:基本,元素,id,选择符,选择器,class,css,属性
From: https://www.cnblogs.com/zczhaod/p/17640397.html

相关文章

  • 文件和目录的基本操作
    创建文件cat命令concatenate(连接)的缩写,即combinepiecestogether1)把碎片组合在一起(意味着可以使用cat创建一个小文件)2)显示文件──(root㉿kali)-[~]└─#cat/etc/resolv.conf#GeneratedbyNetworkManagersearchlocaldomainnameserver192.168.56.2┌──(ro......
  • 1 CSS的引入方式
    1CSS的引入方式CSS样式有三种不同的使用方式,分别是行内样式,嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。行内样式行内样式,就是写在元素的style属性中的样式,这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不......
  • 瞅瞅吧!你可能会用到的 css 动画库
    原文链接:推荐几个你可能会用到的CSS动画库Animate.cssOBNOXIOUS.CSSCSShakeAnimXYZAimistaHover.cssMagicCSS如果你有正在用的觉得不错的库,可以在下方评论喔~......
  • CSS基础-浮动
    浮动浮动是为了元素标签的并排显示问题。我们在浏览网页的时候,经常会看到几个div块是可以并排显示的,浮动就是解决这样问题的方法之一。float属性有以下的值float:left;左浮动float:right右浮动浮动的特点浮动主要针对的是并排显示的盒子而言。在一个父容器的盒......
  • CSS基础-盒模型
    盒模型所有的HTML标签都可以看成矩形盒子,由width,height,padding,border构成,称为盒模型。盒子的总宽度=width+左右padding+左右border盒子的总高度=height+上下pading+上下borderwidth表示盒子内容的宽度。width属性的单位通常是px,也会涉及到百分数、rem等单位......
  • 码云网站的基本使用
    1.登录并注册账号码云 网站地址是:gitee.com,网站未登录前的网页如下图所示:进入网站后,单击首页右上角的 注册 文字链接或者单击网页中间 加入码云 按钮,都会打开如下图所示的 注册 对话框。在如上图所示对话框中,依次按要求填入各项信息,与绝大多数网站注册差不多。需注意的有以......
  • CSS3
    CSS31.CSS导入方式优先级:就近原则<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css导入方式</title><!--2.内部样式--><style>h2{color:aqua;......
  • CSS如何使文本溢出部分显示省略号?多行超出
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS如何使文本溢出部分显示省略号?多行超出</title><style>*{margin:0px;padding:0px;}.box{w......
  • html、css、js实现的一个简单计算器
    title:html、css、js实现的一个简单计算器date:2023-07-1721:51:46categories:CTF-Web入门description:简易计算器主要代码来自runoob的计算器示例,只是精简了一下,把在js里监听完成的清除输入区也写成了一个函数,点击按钮的时候就自动调用了。这里面是有clear函数的,导致我......
  • 1 基本标签
    <!DOCTYPEhtml><htmllang="en"xmlns="http://www.w3.org/1999/html"><head><metacharset="UTF-8"><title>1基本标签</title></head><body><br><!--标题标签-->&......