1020人加入学习
(2人评价)
Web前端第二季(CSS)

制作完成于2018年6月6日 CSS2.0,

价格 免费

其他选择器
1,群组选择器
多个选择器应用同一组样式,多个选择器之间用逗号隔开。
p,h1,h2,.c1,.c2,#id{}
2,全局选择器
*{} 对所有html元素有效
3,后代选择器
标签1 标签2{}
选择器 标签2{}
控制标签1下面的标签2的样式。(对标签1下面的其他标签不影响)
4,属性选择器
标签名[属性名=‘属性值’]{}
控制标签相同属性相同的元素的样式。
5,伪类选择器
超链接有四种状态,不同状态下的样式怎么设置?
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接(点击鼠标不松开) */
和CSS类搭配
.red : visited {color: #FF0000}
注意1:
link和visited时候超链接的伪类
hover和active不止可以对超链接使用,别的html元素也可以
注意2:
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类(选择元素的第一个子元素)

使用F12工具查看网页指定部分的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>选择器变形</title>
    <style type="text/css">
        /* 后代选择器 */
        div p{
            font-size:20px;
        }
        div p span{
            color:#0000FF;
        }
        div.one{
            color:red;
        }
        .two{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div><div>我是第1个div标签里面的内容<p>我是<span>p标签</span>里面的内容</p></div></div>
    <div class="one two">我是第2个div标签里面的内容</div>
    <div class="one">我是第3个div标签里面的内容</div>
    <p class="one">我是p标签里面的内容</p>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>其他选择器</title>
    <style type="text/css">
        /* div{
            font-size:30px;
            color:blue;
        }
        span{
            font-size:30px;
            color:blue;
        }
        p{
            font-size:30px;
            color:blue;
        } */
        
        /* 1,群组选择器 */
        /* div,span,p,.one,#header{
            font-size:30px;
            color:blue;
        } */
        
        /* 2,全局选择器 */
        /* *{
            color:green;
            font-family:宋体;
        } */

        /* 3,属性选择器 */
        input[type="text"]{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div>我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <span>我是第1个span标签里面的内容</span>
    <span>我是第2个span标签里面的内容</span>
    <span>我是第3个span标签里面的内容</span>
    <p>我是第1个p标签里面的内容</p>
    <p>我是第2个p标签里面的内容</p>
    <p>我是第3个p标签里面的内容</p>
    <input type="text" />
    <input type="password" />
</body>
</html>

 

[展开全文]

选择器的类型:

1.基本选择器

2.群组选择器

//设置标签为div span,类为one,id为header的标签内容颜色为蓝色

div,span,.one,#header{
  color:blue;
}

3.全局选择器

//设置所有的标签内容颜色为绿色

*{
color:green;
}

4.属性选择器

//设置属性type='text'的input标签背景颜色为黄色

input[type='text']{
  background-color:yellow;
}

 

[展开全文]

授课教师

SiKi学院老师

课程特色

下载资料(1)
视频(47)