css之选择器4

属性选择器

1、作用：根据指定的属性名称找到对应的标签，然后设置属性
该选择器，最常用于input标签

2、格式与具体用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]

例1：找到所有包含id属性的标签
    [id]

例2：找到所有包含id属性的p标签
    p[id]

例3：找到所有class属性值为part1的p标签
    p[class="part1"]

例4：找到所有href属性值以https开头的a标签
    a[href^="https"]
    
例5：找到所有src属性值以png结果的img标签
    img[src$="png"]
    
例6：找到所有class属性值中包含part2的标签
    [class*="part"]

<head>
    <meta charset="UTF-8">
    <title>系列选择器</title>
    <style>
        [id] {color: red}
        p[id] {font-size: 30px;}
        p[class="part1"] {
            color: green;
        }
        a[href^="https"] {
            font-size: 50px;
        }
        img[src$="png"] {
             100px;
        }
        [class*="part"]{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>

</body>

伪类选择器

1、作用：常用的几种伪类选择器。

1.1 没有访问的超链接a标签样式：
a:link {
color: blue;
}

1.2 访问过的超链接a标签样式：
a:visited {
color: gray;
}

1.3 鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}

1.4 鼠标点击瞬间的样式：
a:active {
color: green;
}

1.5 input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}

2 注意：
a标签的伪类选择器可以单独出现，也可以一起出现
a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
link，visited，hover，active
hover是所有其他标签都可以使用的
focus只给input标签使用

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link {
            color: #cccccc;
        }
        a:visited {
            color: #55BBBB;
        }
        a:hover {
            color: green;
        }
        a:active {
            color:red;
        }
        input:hover {
            outline: none;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>

伪元素选择器

1、常用的伪元素。
1.1 first-letter：杂志类文章首字母样式调整
例如：

p:first-letter {
  font-size: 48px;
}

1.2 before
用于在元素的内容前面插入新内容。
例如：

p:before {
  content: "*";
  color: red;}
在所有p标签的内容前面加上一个红色的*。

1.3 after
用于在元素的内容后面插入新内容。
例如：

p:after {
  content: "?";
  color: red;
}
在所有p标签的内容后面加上一个蓝色的?。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-letter {
            font-size: 50px;
        }
        a::after {
            content:"?";
            color: green;
        }
        a:before {
            content: "-";
            color: green;
        }
    </style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>