div+css(2)选择器

 

12.选择器的优先级：

Style行内  > Id选择器  >  类选择器  >   标签选择器

13.三种：标签选择器、class选择器和id选择器

       1)标签选择器 input{border-color:Yellow;color:Red;}，

                 对于指定的标签采用统一的样式

    2)class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

样式名称开头加“.”

.warning{background:Yellow;}

.highlight{font-size:xx-large;cursor:help;}

<table><tr><td class="highlight">aaa</td><td class="warning">bb</td><td class="highlight warning">ccc</td></tr></table>

同一个标签可以应用多个类选择器（空格隔开）。

       class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

input.accountno{text-align:right;color:Red;}

label.accountno{font-style:italic;}

<input class="accountno" type="text" value="11111111111" />

<label class="accountno">333333333333333333</label>

       3)id选择器:为指定id的元素设定样式，id前加#

        #username

        {

               font-size:10px;

        }

<input id="username" type="text" value="aaaaaaaaaaaa" />

 

style、class可以同时组合使用

<input id="username" class="accountno" style="font-size:40px;color:red" type="text" value="aaaaaaaaaaaa" />

       4)包含选择器:P strong{ background-color:Yellow}

表示P标签内的strong标签内的内容使用的样式

<strong>fadsfasdfads</strong>

<p><strong>adfasfd</strong></p>

       5)组合选择器，同时为多个标签设定一个样式

H1,H2,input{background-color:Green}

<h1>nihao</h1>

<input type="text" value="test" />

       6)伪选择器,为标签的不同状态设定不同的样式：

A:visited：超链接点击过的样式；A:active：选中超链接时的样式；A:link：超链接未被访问时的状态；A:hover：鼠标移到超链接时的状态。

A:visited {TEXT-DECORATION: none}

A:active {TEXT-DECORATION: none}

A:link {TEXT-DECORATION: none}

A:hover {TEXT-DECORATION: underline}

说明：TEXT-DECORATION: none表示超链接不显示下划线。

不是所有的元素都支持伪选择器。（不同浏览器支持情况不一样），目前大多数只在A标签时使用。

注意浏览器缓存问题。

思考：页面上 部分超链接默认是红色、部分超链接默认是白色。怎么实现？（.myAnchor:link）