css属性选择器

css属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

实例:

**1.**下面是包含指定值的target属性的元素样式的例子
a[target]{
    background: gray;
}
//带有target属性的链接会得到灰色的背景
**2.**下面是包含指定值的target属性的元素样式的例子
a[target=blank]{
    background-color: green;
}
//target="_blank"的链接会得到绿色的背景

另外有关target属性的:

  • target="_blank"–>点击连接后会新开一个窗口来打开指定网址。

  • target="_top"–>点击链接后会在当前框架的顶层窗口打开指定网址。

  • 省略不写或写target="_self"–>点击链接后会在当前窗口打开指定网址。

3. 属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值:
    [title~=flower]
    //选择title属性包含单词“flower”的元素,并设置其样式
4.下面是包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值:
    [lang|=en]
    //选择lang属性值以“en”开头的元素并设置其样式
5.下面是包含指定值的class属性的元素样式的例子:
    div[class^="test"]{
        background:#ccc;
    }
    //设置class属性值以“test”开头的所有div元素的背景颜色
6. 下面是包含指定值的class属性的元素样式的例子:
    div[class$="test"]{
        background: #ccc;
    }
    //设置class属性值以“test”结尾的所有div元素的背景色
7.下面是包含指定值的class属性的元素样式的例子:
    div[class*="test"]{
        background:#fff;
    }
    //设置class属性值包含“test”的所有div元素的背景颜色

深入属性选择器:

No.1 如果你想让含标题(title)的所有元素变色,可以这样写,代码如下:

<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
style>
head>
<body>
<h1>可以应用样式:h1>
<h2 title="Hello world">Hello worldh2>
<a title="W3School" href="http://www.baidu.com/">Baidua>
<hr />
<h1>无法应用样式:h1>
<h2>Hello worldh2>
<a href="www.baidu.com/">Baidua>
body>
html>

No.2 对有 href 属性的锚(a 元素)应用样式:

把No.1中的[title]改为“a[href]”就行了。

No.3还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

即继续把上述重点处改成:

a[href][title]{
color:#fff;
}
<h1>还可以应用样式:h1>
<a href="http://www.Baidu.com/" title="Baidu">W3Schoola>

No.6 如果你的html中有一大堆图片或者别的元素(这里只给出图片的修改)要修改为同一大小,你可以先把图片名称都改为形如这样(picture-1.jpg picture-2.jpg picture-3.jpg…==),你可以这样写:

img[src|="picture"] {
border: ;
height: ;
width: ;

}

总之属性选择器会让你写代码时变得简单,但时也要用的恰到好处才能充分发挥其作用。

你可能感兴趣的:(web)