将样式应用于id&#39; d <p>元素

时间:2015-12-11 06:59:14

标签: html css

大家好我试图在这个html中设置大量的<p>代码

<section id="about">
    <div class="container-fluid post-1">
        <div class="row">
            <h1 class="text-center">Welcome to our Dance-O-Thon for 2016!</h1>
            </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <p>Carolyn Glover</p>
                <p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my  friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o   Come to raise more funds for ovarian cancer research
o   Come if you have ovarian cancer, or wish to support someone who does
o   Come if you wish to know more about the disease
o   Come to celebrate life!
                </p>

但我似乎无法定位id =&#34; 1&#34;的那个。我试过了

#about p #1 {
    font-size: 1.3rem;
}

#about p {
    font-size: 1.3rem;
}

#about #1 p {
    font-size: 1.3rem;
}

6 个答案:

答案 0 :(得分:3)

像这样删除p标签和你的id名称之间的间距。如果在特定标记中定义了id / class,则标记名称和id /类名称之间不能有任何空格。

#about p#1 {
  font-size: 1.3rem;
}

我方的两条建议 -

  1. 使用整数作为id不方便。尝试至少附加一个字符串。像p1或para1。
  2. 因为它是一个id,所以在整个html文档中它是唯一的。你不需要#about p#1,只有#1就够了

答案 1 :(得分:1)

只需

#1 {
    font-size: 1.3rem;
}

已经足够了,因为如果你正确地做了它,那么应该只有1个id为1的元素。或者如果你需要增加你的风格强度(通常不需要),请使用

p#1 {
    font-size: 1.3rem;
}

答案 2 :(得分:1)

这就够了:

#1 {
    font-size: 1.3rem;
}

答案 3 :(得分:0)

你可以尝试这个:

$(function () {
$("#ListGrid").jqGrid({
    url: "/TodoList/GetTodoLists",
    datatype: 'json',
    mtype: 'Get',
    colNames: ['FirstName', 'Gender', 'Id', 'Lastname', 'Salary'],
    colModel: [            
        { key: false, name: 'FirstName', index: 'FirstName', editable: true },
        { key: false, name: 'Gender', index: 'Gender', editable: true },
        { key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
        { key: false, name: 'Lastname', index: 'Lastname', editable: true },
        { key: false, name: 'Salary', index: 'Salary', editable: true }],
    pager: jQuery('#pager'),
    rowNum: 10,
    rowList: [10, 20, 30, 40],
    height: '100%',
    viewrecords: true,
    caption: 'Todo List',
    emptyrecords: 'No records to display',
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        Id: "0"
    },
    autowidth: true,
    multiselect: false
}).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true },
    {
        // edit options
        zIndex: 100,
        url: '/TodoList/Edit',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        afterComplete: function (response) {

            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        // add options
        zIndex: 100,
        url: "/TodoList/Create",
        closeOnEscape: true,
        closeAfterAdd: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        // delete options
        zIndex: 100,
        url: "/TodoList/Delete",
        closeOnEscape: true,
        closeAfterDelete: true,
        recreateForm: true,
        msg: "Are you sure you want to delete this task?",
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    });

DEMO HERE

答案 4 :(得分:0)

你可以使用它:

#1 {
    font-size: 1.3rem;
}

答案 5 :(得分:0)

正如我的评论所述,CSS标识符不能以数字开头。

根据W3 CSS specification

  

在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高,加上连字符( - )和下划线(_); 他们不能以数字,两个连字符或连字符后跟数字开头......

即使语法是正确的,但因为它是一个数字标识符,所以它不适用。

请参阅代码段:

&#13;
&#13;
p#1 {
  font-size: 1.3rem;
}
p#one {
  font-size: 1.3rem;
}
&#13;
<div class="container-fluid post-1">
	<div class="row">
		<h1 class="text-center">Welcome to our Dance-O-Thon for 2016</h1>
	</div>
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my  friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
				I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
				Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
				o   Come to raise more funds for ovarian cancer research
				o   Come if you have ovarian cancer, or wish to support someone who does
				o   Come if you wish to know more about the disease
				o   Come to celebrate life!
			</p>
			<p id="one">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my  friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
				I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
				Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
				o   Come to raise more funds for ovarian cancer research
				o   Come if you have ovarian cancer, or wish to support someone who does
				o   Come if you wish to know more about the disease
				o   Come to celebrate life!
			</p>
		</div>
	</div>
</div>
&#13;
&#13;
&#13;