css选择器

浏览数：16 / 时间：2015年06月09日

id 选择器 #red {color:red;} #green {color:green;} <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p> 对象选择器 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 派生选择器 li strong { font-style: italic; font-weight: normal; } <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>

类选择器 .center {text-align: center}

<h1 class="center"> This heading will be center-aligned </h1>

<p class="center"> This paragraph will also be center-aligned. </p>

属性选择器

[title] { color:red; }

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }

input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

CSS 选择器参考手册选择器描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。

如何插入样式表：外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

内部样式表 <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>

内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css选择器