CSS选择符详解-优快云博客

本文链接：https://blog.youkuaiyun.com/NirvanaFeng/article/details/4556091

tag：CSS，样式表，选择符

CSS的样式表语法很简单：选择符{属性：属性值}

如果属性值由多个单词组成，必须加引号；如果有多个属性，属性之间加分号。

属性和属性值用的时候查阅手册即可，总结下常用的选择符：

1、通配选择符 *

适用于页面内的所有元素，一般用于设置颜色、字体

2、类型选择符 HTML标签名称

用于定义该标签类型的所有元素，比如所有的<p>元素或<tr>元素

3、ID选择符 #ID名称

用于div标记的样式，为标有特定ID的HTML元素指定样式，可以建立派生选择符，如#red p{}，表示Id为red的所有p标记

4、类选择符 .类名称

选择的是任何拥有相同的class属性值的元素，而不考虑其出现位置，可以建立派生选择符，如.fancy td{}，表示fancy类下的td元素

5、伪类选择符元素名：伪类名{}

用来指定一个或者与其相关的选择器状态，一般用来显示鼠标响应等特殊效果。

下面是一段index.jsp，引入外部样式表c1.css

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <link href="c1.css" mce_href="c1.css" rel="stylesheet" type="text/css"> </head> <body> <h2>hi~!</h2> <form action="index.jsp" method="get" name="form1" type="_blank"> <div id="name">name:<input type="text" name="name" size="5" /></div> <div id="code">code:<input type="password" name="code" size="6" /> <p>pause</p> </div> <p><input type="submit" value="Go!" /> <input type="reset" value="Undo!" /></p> </form> <table border="1" width="50%" align="center"> <th class="first" align="left">NAME</th> <th align="left">CODE</th> <tr> <td class="first" >LIli FENG</td> <td>12343</td> </tr> <tr> <td class="first">WANG MI</td> <td>8999</td> </tr> <tr> <td class="first">HUUIJ</td> <td>9090909</td> </tr> </table> <br> <br> <p>Let me have a look!</p> <h3>hi~~</h3> <h4>hi~~~~</h4> <a href="www.baidu.com" mce_href="www.baidu.com">点击这里！</a> </body> </html>

c1.css

*{ /*通配选择符*/ background: pink; color:#000; } h2{ /*HTML标签类型选择符*/ color:blue; font-family:"华文彩云"； } #name{ /*div的ID选择符*/ color:yellow; font-weight:bold; } #code p{ /*ID为”code“的派生选择器*/ color:white; font-style:italic } .first{ /*类名为first的类选择器*/ color:silver; background-color:green } h2,h3,h4{ /*组选择器*/ font-family:Verdana; color:yellow } a:link{ /*伪类选择器,未被访问的链接颜色*/ color:white } a:visited{ /*伪类选择器，被点击过的链接颜色*/ color:black } }