您的位置：首页 > Web前端 > CSS

Web前端基础CSS初识学习笔记（7) 善用选择器之超详细大合集

2020-07-10 11:41 274 查看

选择器：使界面更整洁

  • 通配符选择器
  • 链接伪类选择器
  • 结构伪类选择器（CSS3）
  • 目标伪类选择器
  • CSS复合选择器

    • 标签选择器

    类选择器



    示例（sublime环境）

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.orange{           /*声明类样式*/
color: orange;
}
.bule{
color: blue;
}
</style>
</head>
<body>
<div class="orange ">鸣人</div>
<div class="bule ">佐助</div>
<div>卡卡西</div>
</body>
</html>

    多类名选择器


    多类名选择器示例（sublime环境）

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.font20{
font-size: 20px;
}
.font14 {
font-size: 14px;
}
.pink {
color: pink;
}
</style>
</head>
<body>
<div class="font20 pink ">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink ">安其拉</div>
<div class="font14">貂蝉</div>
</body>
</html>

    ID选择器


    ID选择器和类选择器的区别

    通配符选择器

    链接伪类选择器


    示例（sublime环境）

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link {       /*未访问的链接*/
font-size: 16px;
color: gray;
font-weight: 700;
}
a:visited {              /*已访问过的链接，已经点击过一次的状态*/
font-size: 16px;
color: orange;
font-weight: 700;
}
a:hover {             /*鼠标移动到链接上的状态*/
font-size: 16px;
color: red;
font-weight: 700;
}
a: active {           /*选定的链接，点击鼠标不松开的状态*/
font-size: 16px;
color: green;
font-weight: 700;
}
</style>
</head>
<body>
/*伪类选择器其中的链接伪类选择器 主要针对于a*/
<div>
<a href="#">秒杀</a>
<a href="#">闪购</a>
</div>
</body>
</html>

    结构伪类选择器（CSS3）

    目标伪类选择器

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li:first-child {
color: pink;
}
li:last-child {
color: purple;
}
li:nth-child(4) {
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
</html>

    CSS复合选择器

    复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精确的目标元素标签。

    交集选择器

    并集选择器

    后代选择器

    选择出所有的后代

    子元素选择器

    只选择出亲儿子

    属性选择器

    /* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
color: green;
}

    伪元素选择器

    1.E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
    2. E::first-line 文本第一行；
    3. E::selection 可改变选中文本的样式；

    p::first-letter {
font-size: 20px;
color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
color: skyblue;
}

p::selection {
/* font-size: 50px; */
color: orange;
}

    4、E::before和E::after

    在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

    div::befor {
content:"开始";
}
div::after {
content:"结束";
}

    E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

    “:” 与 “::” 区别在于区分伪类和伪元素

    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航