02CSS选择器06

day06

CSS规则由两部分构成：选择器，声明

CSS选择器

标签选择器
　　以HTML标签作为选择器
类选择器
　　为HTML标签添加class属性
　　通过类选择器来为具有此class属性的元素设置CSS样式
　　可对不同类型元素的同一个名称的类选择器设置不同的样式规则：p.red{} and h1.red{}
　　同一个元素可以设置多个类，之间有空格隔开

ID选择器

　　为HTML标签添加ID属性
　　通过ID选择器来为具有此ID的元素设置CSS规则


全局选择器
　　所有标签设置样式

群组选择器

　　集体统一设置样式
　　后代选择器
　　使用后代选择器，之间用空格隔开

class与id的值是区分大小写的


伪类选择器
　　伪类选择器定义特殊状态下的样式
　　无法用标签，id，class及其它属性实现

链接伪类
　　:link 未访问状态
　　:visited 已访问状态
　　:hover 鼠标悬浮状态
　　:active 激活状态
　　注意写的顺序：:link>:visited>:hover>:active

 

案例：

css_selectors.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        /*h1,#three,p.special{font-size: 50px}
        p{color: red;}
        .special{color: blue;}
        .one{text-decoration: underline;}
        #two{color:green;}
        *{background-color: black;}*/
        .classred{color: red;}
        p em{color: blue;}
        h1.special em{color: orange;}
        em{color: :red;}
    </style>
</head>
<body>
    <h1 class="special"><em>CSS</em>是什么</h1>
    <p><em>CSS</em>层叠样式</p>
    <p class="special one">用于定义HTML内容再浏览器中的显示样式</p>
    <p><em>CSS</em>样式由选择器和声明组成</p>
    <div>
        <h1 id="two"><em>CSS</em>使用方法</h1>
        <ul id="three">
            <li>行内样式</li>
            <li>内部样式</li>
            <li>外部样式</li>
            <li>导入式</li>
        </ul>
        <h1><em>CSS</em>选择器</h1>
        <ul>
            <li>标签选择器</li>
            <li>ID选择器</li>
            <li>类选择器</li>
            <li>后代选择器</li>
        </ul>
    </div>
</body>
</html>

 

css_selectors1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        /*a:link{color: red;}
        a:visited{color: black;}
        a:hover{color: green;}
        a:active{color: gray;}*/
        p.a:link{color: #123123;}
        p.a:visited{color: #213543;}
        p.a:hover{color: #64f433}
        p.a:active{color: red;}
        p:hover{font-size: 50px;}
        p:active{font-size: 30px;}
    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <br>
    <p><a href="http://www.baidu.com" target="_blank">百度</a></p>
    <p>wefdfadf</p>
</body>
</html>

 

posted @ 2018-02-04 18:10  cheinlbb  阅读(145)  评论(0)  编辑  收藏  举报