一些css选择器的使用

来源：互联网发布：如何把linux改为英语编辑：程序博客网时间：2024/05/29 16:34

id选择器，通过id选中元素，只控制id为所选目标的元素，控制范围小且精确，使用#+id{}控制
类选择器，通过类名称选择元素，控制一类元素，使用.class名称{}控制
标签选择器，选择所有该标签的元素，如div,p,span,pre等，直接使用标签名＋{}控制
层级选择器，可以选择某种父级元素的子集元素或者子集类元素，控制精确，比如div p{},.class1 #test{}
群组选择器，将不同的标签用逗号隔开，放在一起控制，是选择器的简化写法，如div,#test1{}, .class1,.class2{}
除了上述选择器之外，还有全局选择器*{}，伪类选择器比如a:link{},a:hover{},字符串匹配的属性选择符
全局选择器是一个星号，它能作用于xhtml文档中的所有元素，例如
*{margin:0; padding:0;}
伪类选择器也是选择器的一种，但是不是作用在标签上，而是作用在元素的状态上。由于很多浏览器支持不同的伪类，
没有一个统一的标准，所以很多伪类不常被用到，其中有一种伪类是主流浏览器都支持的，就是超链接的伪类，包括
:link,:vsitited,:hover,:active,且a可以有一种状态，也可以有两种三种状态。
字符串匹配的属性选择符主要有三种
1.语法：E[att^="val"] ： {attribute}
说明：匹配具有att属性、且值以val开头的E元素
<span style="font-size:18px;"><style type="text/css">
p[title^="val"] {color:#FF0000;}
</style>
<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<p title="value">匹配具有att属性、且值以val开头的E元素</p>
</div></span>
</body>
2.语法:E[att$="val"] ： {attribute}
说明：匹配具有att属性、且值以val结尾的E元素
<style type="text/css">
p[title$="val"] {font-weight:bold;}
</style>
<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p>
</div>
</body>
3.语法:E[att*="val"] ： {attribute}
说明：匹配具有att属性、且值中包含val的E元素。
<style type="text/css">
p[title*="val"] {text-decoration:underline;}
</style>
<title>子串匹配的属性选择符 E[att*="val"]</title>
</head>
<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p>
</div>
</body>

阅读全文

0 0