css2/css3全教程 选择器 群号：239234426 韬略课堂：何韬
内联样式（在 HTML 元素内部）:<p style="color: sienna; margin- left: 20px"> 内部样式表（位于 <head> 标签内部） 外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css" />
css选择器 1.与标签同名： input,select{ border:1px solid blue; } body{ font-family: font-size:32px; background:green;
2.用id名： #tt{ background:#bbaacc; }
3.用class名： .myc{ font-size:32px; background:green; } class组合 class="class1 class2"
4.用属性名：(属性选择器) [aa]{ border:10px solid red; background:blue; } 属性值 [name*="hello"] /*包含*/
5.值选择器: [aa="5"]{ border:10px solid red; background:blue; }
6.包含hello的值选择器,只要包含hello就被选择 [name*="hello"]{ background:yellow; } <input name="helloworld" type="text"/>
//-----------组合选择器-------------------- ,是平级关系 空格是层级关系(下层到最底层符合条件的标签全受css样式渲染) >仅指下一层(仅仅下一层受渲染)
下节内容 边框背景
选择器的分组： h1,h2,h3,h4,h5,h6 { color: green; }
派生选择器 li strong { font-style: italic; font-weight: normal; } <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。 </strong></li> <li>我是正常的字体。</li> </ol>
类(class)选择器 .fancy td { color: #f60; background: #666; }
属性选择器 [title] { color:red; } <a title="W3School" href="http://w3school.com.cn">W3School</a>
属性和值选择器 [title=W3School] { border:5px solid blue; } <a title="W3School" href="http://w3school.com.cn">W3School</a>
包含hello， [title~=hello] { color:red; } <h2 title="hello world">Hello world</h2>
不等于en [lang|=en] { color:red; }
设置表单的样式 input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
设置表单的样式 input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元 素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。