zoukankan      html  css  js  c++  java
  • CSS学习笔记----选择器

    用过css的同志们都知道,选择器是非常重要的,如果选择器使用不当,即使你的css写的再好,但是不知道要用在哪个元素上,这不是英雄无用武之地吗?

    css,用过的都说好!

    最基本的选择器,id选择器,类选择器这些大家早已心知肚明的就不在这里赘述了,有那功夫赶紧研究一下把妹攻略大笑.

    伪类:

    :link,:visited被称为链接伪类,只能被用在<a>标签上。:hover,:active,:focus称为动态伪类,可以用于任何元素。

    属性选择器:

    支持自定义属性
    input[title=te]{color:red} /*属性选择器*/
    input[other=wch]{color:blue}

    层叠和特殊性

    顺序:!important的用户样式 > !important的作者样式 > 作者样式 > 用户样式 > 继承 > 浏览器样式

    css特殊性计算规则:
    css特殊性分成4个等级;a,b,c,d
    a表示 style样式;
    b表示id选择器的数量;
    c表示类、伪类和属性选择器的数量;
    d表示类型选择器和伪元素选择器的数量。
    由此计算出来的四位数abcd,值越大,优先级越高;
    例如:
    style=""   值为1000
    #wrapper #content {} 值为0200
    div#content{} 值为0101
    #conten{} 值为0100
    p.comment .dateposted{}  值0021
    div p{} 值为0002

    如果两个规则的特殊性相同,那么定义的规则优先。

    演示代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style >
    a:hover,input:hover{border-color:red;} /*伪类选择器*/
    a:focus,input:focus{border-color:blue}
    a:active,input:active{border-color:green}
    a:link{border-color:#FFFF00}
    a:visited{border-color:#FF33CC}
    a + p{color:green} /*选择兄弟元素,无效好像*/
    #nav>li{color:red !important;} /*改变特殊级别*/
    #nav li{color:yellow}
    #nav li *{color:green} /*通用选择器*/
    input[title=te]{color:red} /*属性选择器*/
    input[other=wch]{color:blue}
    div#ttt{color:#CC0066}
    </style>
    </head>
    
    <body>
    <a href="#" >wch</a>
    <input type="text" value="12321" title="test" other="wch" />
    <input type="text" value="12321" title="te" other="qqq" />
    <input type="text" id="ttt" value="wch"  />
    <div id="ttt">test element#id</div>
    <ul id="nav">
    	<li>h1</li>
    	<li>
    		<ul>123312
    			<li>x1</li>
    			<li>x2</li>
    		</ul>
    	</li>
    	<li>h3</li>
    </ul>
    </body>
    </html>
    



  • 相关阅读:
    java添加后台缓存
    Acunetix WVS安全测试软件使用教程(入门级)
    spring mvc + ajax上传文件,页面局部刷新
    github新手使用教程
    Junit使用方法
    反射(动态代理)
    TCP--文件上传
    网络编程--UDP通讯
    线程实现计时器,多线程间通信
    序列流
  • 原文地址:https://www.cnblogs.com/vvch/p/4027583.html
Copyright © 2011-2022 走看看