CSS之选择器

-id选择器

<div id="chooseid">
</div>

css选择div添加样式 方式为#id{}

    #chooseid{width: 100px;height: 100px;background-color: red;}

-类选择器

<div class="chooseclass">
</div>

css添加样式 方式为 .class{}

.chooseclass{width: 100px;height: 100px;background-color: red;}

-元素选择

<p>Helloword!</p>

css样式为 元素

p{color: blue;}

-元素下类选择

<p class="p">helloword!</p>

css样式为 elment.class{}

  p.p{
        color: red;
       }

-属性选择器

hello!

welcome!

css属性选择 [属性]{}

 [title]{color: blue;}

浏览器运行结果 hello！ welcome！字体都为蓝色
-属性和值选择器

<p title="helloword">hello!</p>
<p title="welcome">welcome!</p>

CSS选择方式为 [title=value]{}

[title=helloword]{color: blue;}
[title=welcome]{color: red;}

浏览器运行结果为 hello!为蓝色 welcome！为红色
-属性和多值选择器 多值

<h2>Will apply to:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>Will not apply to:</h2>
<p title="student">Hi CSS students!</p>

CSS样式为 [title~=value]{}

[title~=hello]{color:blue;} 

浏览器运行结果 ：Hello world 和Hello CSS students!为蓝色
-表单样式

<form name="input" action="" method="post">
Firstname:<input type="text" name="fname" value="Peter" size="20">
Lastname:<input type="text" name="lname" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>

CSS选择 为 elment[type=value]{}

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>