css选择器

来源：互联网发布：js对svg放大缩小拖拽编辑：程序博客网时间：2024/05/16 06:35
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css选择器</title><style type="text/css">/*标签选择器*/div {width: auto;height: auto;background-color: #FF00FF;border: solid;}/*类选择器*/.input {width: 150px;height: 20px;background-color: #FF0000;text-align: center;}/*id选择器*/#submit {width: auto;height: auto;background-color: #0000FF;}/*交集选择器*/p a {color: #00FFFF;}/*并集选择器*/p,a {color: red;}/*伪类选择器*/a:link {color: black;}a:visited {color: blue;}a:hover {color: red;}a:active {color: springgreen;}</style></head><!--        描述：选择器    选择器是用来寻找符合要求的html元素的。        1.标签选择器：根据标签来选择元素    标签名{        }        2.类选择器：根据标签的class属性来选择元素    .类名{        }    类选择器要注意的事项：1. html元素的class属性值一定不能以数字开头.2. 类选择器的样式是要优先于标签选择器的样式。一个元素即有标签选择器的样式，又有类选择器的样式。类选择器起作用。            3.id选择器，根据一个标签的id属性来选择元素。    #id{        }        注意事项：    1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。2. ID的属性值也是不能以数字开头的。3. ID的属性值在一个html页面中只能出现一次。4.交集选择器： 就是对选择器1中的选择器2里面的数据进行样式化。(选择器2选择出的元素必须在选择器1选择出的元素内部才满足条件)选择器1 选择器2{}5.并集选择器:对选择器1和选择器2选择出的元素都起作用选择器1,选择器2{}6.通用选择器：对所有的元素全部起作用*{}7.伪类选择器：在一个元素处于某种状态下进行样式化。link:未被访问的链接        visited:已被访问的链接        hover:鼠标移动到链接上        active:选定的链接(按住不松开)a:visited {color: blue;}a:link {color: black;a:hover {color: red;}a:active {color: springgreen;}        --><body><div>这是第一个div</div><div>这是第二个div</div><div>这是第三个div</div><div>这是第四个div</div><div class="input">这是第无个div</div><hr /><form><input type="text" placeholder="用户名" class="input" /><br /><input type="password" placeholder="密码" class="input" /><br /><input type="submit" value="登陆" id="submit" /><br /></form><a href="css基本语法.html">css定义</a><br /><a href="http://www.sina.com">新浪</a></body></html>
0 0