原文在w3school:http://www.w3school.com.cn/css/index.asp
one:
——–基础教程:
之前经常用的印象比较深刻的就是id选择器,类选择器,派生选择器(子元素选择器,后代选择器,相邻兄弟选择器),今天看到了属性选择器,发现竟然还可以这样子的。
id选择器:
css:
#class{
color:red;
width:100px;
height:100px;
}
html:
<div id="class1">这个是类选择器,在设置时前面是#</div>
类选择器:
css:
.class2{
width:100px;
height:100px;
}
html:
<div class="class2">这个是类选择器,在设置时前面是.</div>
派生选择器:
css:
div p{
background:green;
width:100px;
height:100px;
}
html:
<body>
<div>
<p>第一行</P>
<p>第二行</P>
</div>
<p>外一行</P>
</body>
这边外一行就没有样式没有颜色
上面这个也可以叫后代选择器
子元素选择器:
css:
h1>strong{
color:red;
}
html:
<h1>This is <strong>very</strong><strong>very</strong>important</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
结果(只会把第一个h1下的strong样式改变,而第二个不会):
相邻兄弟选择器(用一个结合符只能选择两个相邻兄弟中的第二个元素):
css:
li+li{
font-weight:bold;
}
html:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
以上就是基础的三种选择器,现在我着重讲下我不理解的属性选择器。
属性选择器:
css:
[title]{
color:red
}
html:
<h1>可以应用样式:</h1>
<h1 title="w3school">w3school</h1>
<p title="hello">hello</P>
<hr />
<h1>无法应用样式:</h1>
<h1>w3school</h1>
<p>hello</P>
结果:
css:
[title=w3school]{
color:red;
}
html:
<h1>可以应用样式:</h1>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式:</h1>
<p title="greeting">Hi!</p>
<a class="W3School" href="http://w3school.com.cn">W3School</a>
结果只有title= w3school才会改变样式的:
css:
[title~=hello]{
color:red;
}
html:
<h1>可以应用样式:</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />
<h1>无法应用样式:</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
结果title=hello需要title中有hello整个单词的才会显示,这样子 s helloWold这样子是不算的:
css:
[lang|=en]{
color:red;
}
html:
<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式:</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
<p lang="us-en">Hi!</p>
结果当lang=en只有当en为开头元素的才能应用该样式:
css:
input[type="text"]{
width:100px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]{
width:100px;
margin-left:35px;
display:block;
font-family: Verdana, Arial
}
html:
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
结果所有type为text和button的都被设置为统一的样式:
看到最后一个突然发现自己原来一直在应用,只是不知道上面几种和这种用法叫什么,想想我还是个程序媛吗,啪啪打脸。不过这次记录之后我知道了!